[SpringBoot] 웹개발(6) - 로그인 기능 만들기(1)

 

2023.11.09 - [공부해야할 것/java] - [SpringBoot] 웹 프로젝트 만들기(5) - thymleaf 적용

[SpringBoot] 웹 프로젝트 만들기(5) - thymleaf 적용

여기서 이어진다.

계정이 저장 될 DB 테이블 로그인 페이지 / 회원가입페이지 회원가입 기능  로그인 관련되어 security 설정 로그인시 올바른 정보를 입력해서 체크하는 기능 -> 올바른 정보를 입력했을때만 로그인하도록 권한체크기능

이전시간에 이화면을 기억하는가

이것은 실제 로그인 화면이 아니다..아니 실제 로그인 화면이지만 스프링시큐리틴가 뭐시기에서 임의로 만든화면이다. 그렇기에 킬때마다 세션에 user가 생성되며 비번도 매번 바뀐다.

매번 킬때마다 바뀌는 비밀번호들

하지만 서버를 끄고 킬때마다 비밀번호가 바뀌는 계정이 어디있는가

그렇기에 실제 DB에 계정이 저장되고 그 저장된 계정을 기반으로 로그인을 하는 화면을 만들고자 한다.

 

그렇다면 로그인을 하는데 필요한 것들은 무엇이있을까 대략 정리하면 아래와 같을 것이다.

계정이 저장 될 DB 테이블 로그인 페이지 / 회원가입 페이지 회원가입 기능  로그인 관련되어 security 설정 비밀번호 암호화 로그인시 올바른 정보를 입력해서 체크하는 기능 -> 올바른 정보를 입력했을때만 로그인하도록 권한체크(선택)

 

대략 이렇게 되지 않을까 싶다.  이 글에서는 1,2 까지만 할것이다. 일단 계정 정보가 저장될 테이블을 설계해보자 계정 정보에 뭐가 필요할까? 신상정보를 제외한 로그인할때 순수하게 필요한 정보말이다. 생각나는거 아무거나 나열해보겠다

로그인할때 사용할 아이디 로그인할때 사용할 비밀번호 로그인할때 사용할 아이디랑 별개로 시스템 내부에서 해당 계정이 별도값임을 구분할 유니크한 아이디 해당계정 사용여부 이메일 주소 (계정 비밀번호 분실시 확인용으로 사용할) 정보 잘못입력한거 count (특정 횟수이상 비밀번호 잘못입력했을때 잠구기용) 해당 계정 잠금 여부 (잘못입력한거 특정일수 이상 잘못되면 lock 처리) 등록일시 마지막 수정일시 ( 이게 아마 마지막 로그인일시가 되지 않을까 싶다.로그인할때마다 정보잘못입력한거 count가 초기화되면서 여기에 수정일시가 찍히도록)

 

좋았다 이걸 이제 테이블로 만들어 보겠다. heidiSQL 을 열고 테이블을 만들어보자

CREATE TABLE accountInfo(
    acct_uid VARCHAR(36) DEFAULT UUID() PRIMARY KEY COMMENT '아이디 생성시 자동으로 생성되는 계정 유니크 아이디'
    ,acct_usr_id VARCHAR(50) NOT NULL  UNIQUE KEY COMMENT '사용자 계정아이디 해당 아이디도 중복값이 없도록'
    ,acct_usr_pwd VARCHAR(255) NOT NULL COMMENT '사용자 비밀번호 암호화 되서 저장된다'
    ,acct_usr_email VARCHAR(255) NOT NULL COMMENT '사용자의 이메일 주소'
    ,acct_fail_cnt INT(2) NOT NULL DEFAULT 0 COMMENT '사용자가 정보를 잘못입력했을때 숫자가 늘어남'
    ,acct_lock_yn CHAR(2) NOT NULL DEFAULT 'N' COMMENT '사용자 계정 잠금 여부'
    ,acct_use_yn CHAR(2) NOT NULL DEFAULT 'Y' COMMENT '사용자 계정 사용여부'
    ,acct_reg_dt DATETIME NOT NULL DEFAULT NOW() COMMENT '계정 등록일시'
    ,acct_last_mod_dt DATETIME COMMENT '계정 마지막 수정일자'
) COMMENT='계정테이블';

 

이제 spring security 관련된 설정을 할 차례이다. 일단 config 폴더에 security.config라는 새로운 config 파일을 만들어 준다.

내 프로젝트 기준 (java/com/kkkkim/forStudy/config) 폴더 내에 만들었다. 일단 껍데기로 다음과 같이 작성해주자

package com.kkkkim.forStudy.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.method.configuration.EnableMethodSecurity;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.web.SecurityFilterChain;
import org.springframework.web.servlet.handler.HandlerMappingIntrospector;

@Configuration
@EnableWebSecurity
@EnableMethodSecurity(securedEnabled = true, prePostEnabled = false)
public class SecurityConfig {
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http, HandlerMappingIntrospector introspector) throws Exception {
       /** 이부분 설정 해제하는 것은 추후에 진행할 예정 */
       http.csrf((csrf)->csrf
                .disable()
        );
       return http.build();
    }
}

@Configuration이 무엇일까. 나도 잘 모른다. 다만 @Configuration에 대한 설명은 여기에 나와있다.

https://docs.spring.io/spring-framework/reference/core/beans/java/basic-concepts.html

Basic Concepts: @Bean and @Configuration :: Spring Framework

 

https://docs.spring.io/spring-framework/reference/core/beans/java/configuration-annotation.html

Using the @Configuration annotation :: Spring Framework

영어 잘하는 사람은 보고오자. 대충 이해한대로 설명하면 스프링은 킬때 상시 올려둘 객체?들을 bean이라고 설정한다. @configuration 하는데 해당 bean 에 대한 정의랑 bean간의 관계를 정의하는 부분이다라고 스프링상에 알려주는 일종에 이름표이다. 아닐수도 있으니 저거 정독해보자

여튼 securityFilterChain이라는 빈이 정의되있는 설정 클래스임을 표시한거다. 이쯤에서 한번 springboot를 껏다켜보자

??? 이전에는 껏다키면 로그인 화면이 나왔는데 지금 바로 키면 바로 메인페이지로 이동하는 걸 확인할수 있다.

원래 스프링에서 자동으로 설정된것으로 넘겨주다가 SecurityFilterChain을 우리가 인위로 설정주면서 스프링부트에서 자동으로 제공되던 로그인 프로세스가 사라지고 바로 메인 화면으로 넘어간게 될것이다.

나중에 로그인 로직은 저 SecurityFilter Chain에 설정 할 예정이다. 이제 1은 어느정도 된거 같으니 로그인 페이지를 만들자. 편의를 위해 auth란 폴더를 만들자

그리고 거기에 이전에 main페이지와 했던것과 동일하게 web이란 폴더를 추가하자.그리고 web폴더에 AuthController라는 자바 클래스를 만들어주자. 이전 MainController를 만들던것과 동일한 프로세스이다. 그리고 로그인 페이지로 이동할 메소드를 만들어 줄것이다.

package com.kkkkim.forStudy.auth.web;


import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/auth/*")
public class AuthController {

    /**
     * 로그인 페이지
     * @param modele
     * @return
     */
    @GetMapping("login")
    public String login(Model modele){
        return "auth/login";
    }

    /**
     * 회원가입 페이지
     * @param modele
     * @return
     */
    @GetMapping("join")
    public String join(Model modele){
        return "auth/join";
    }
}

@RequestMapping("/auth/*")는 url 에서 url뒤에 auth/로 시작하는 모든 주소는 이컨트롤러와 매핑시키겟다는 의미이다.

www.사이트.com/auth/아무글자

는 이 AuthController와 이어지는 것이다.

login페이지도 url이 http://localhost:8080/auth/login이 될것이다.

이제 해당 경로(auth/logn)에 실제 파일이 있어야하지 않겟는가 template폴더에 auth 폴더를 만들고 login.html을 추가해주자.

이제 실제 구동이 잘되는지 Springboot를 껏다 켜보자 키고 로그인 페이지로 이동해보자

http://localhost:8080/auth/login

잘뜨는걸 확인할 수 있다. 그러면 이 로그인 페이지를 어떻게 꾸며줄것인가.. 이전과정에서 다운받았던 템플릿을 적용할 것이다.

https://kkkkims.tistory.com/54

[SpringBoot] 웹개발(4) - 다운받은 템플릿 적용

해당 템플릿에 auth-login-basic.html을 참조할것인데 

이파일을 그대로 가져다 붙이고 파일명만 바꿔도 되지만.. 기왕이면 타임리프를 이용하여 템플릿화 해보자.

템플릿화 과정은 아래 글에 접어두겠다. (과정필요없는 사람은 패스하자)

우선 이전시간에 사이드바랑 헤더랑 푸터가 있는 layout을 만들어줬던걸 기억하는가?

이제 우리는 사이드바/헤더/푸터가 없는 기본 템플릿을 만들것이다.

layout폴더에 html폴더에 noneSidebar.html이라 추가한다. 그리고 다음과 같이 작성한다.

<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:replace="~{fragment/config :: ConfigFragment}"><title></title></head>
<body>
<main class="main" id="top">
    <div th:block layout:fragment="content"></div>
</main>
</body>
</html>

 

이제 로그인화면도 잘 바꿔보자.

login.html을 다음과 같이 수정하여 noneSidebar레이아웃을 쓰도록하게하자

<html
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{layout/noneSidebar}">
<div layout:fragment="content">
   로그인깡깡이
</div>
</html>

템플릿이 잘적용됬는지 확인해보고 싶은 사람은 스프링을 함 껏다 켜보고 로그인 페이지로 이동해보는것도 나쁘지 않다.

 

이제 템플렛에있던 기본 내용들을 옮겨와주자

auth-login-basic.html

0.01MB

 

이파일 기준으로 <div class="container-xxl"> 부분을 복붙해오면 된다.

복붙해서 하고 키면

조금 넙적한 화면을 확인할수 있는데.. 이것은 이페이지 전용 css를 적용하지 않아서 그렇다. <div class="container-xxl">  위에 css파일을 추가해준다.

 

<html
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{layout/noneSidebar}">
<div layout:fragment="content">
    <link rel="stylesheet" href="/assets/vendor/css/pages/page-auth.css" />  
    <div class="container-xxl">
        <div class="authentication-wrapper authentication-basic container-p-y">
        ~~이하 코드

 

이후 잘 켜보면 이쁘게 잘 적용되있는걸 확인 할 수 있다.

 

 

마찬가지로 template 페이지에 join.html을 만들어준다. 이것은 기존 가입페이지html을 가져다 붙이거나 아니면 템플릿화한 페이지로 만들거나 아무렇게나 해보자

템플릿화하는 과정은 아래에 접어두겠다.

위의 로그인페이지 하는 것과 동일하게 한다.

<html
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{layout/noneSidebar}">
<div layout:fragment="content">
</div>
</html>

 

이렇게 만들어 놓고 content div안에 register 관련된 소스를 옮기면 된다.

auth-register-basic.html

0.01MB

 

나는 이 html파일을 참조했으며 <div class="container-xxl">부터 복붙하고  <div class="container-xxl"> 위에

<link rel="stylesheet" href="/assets/vendor/css/pages/page-auth.css" />  을 추가해줬다.

<html
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{layout/noneSidebar}">
<div layout:fragment="content">
    <link rel="stylesheet" href="/assets/vendor/css/pages/page-auth.css" />
    <div class="container-xxl">
    ~~~

 

이제 auth/join도 잘뜨는지 확인해보자

 

마지막으로 로그인페이지에서 create account를 누를씨 가입페이지로 이동하도록  login.html  소스를 수정해준다.

                        <p class="text-center">
                            <span>New on our platform?</span>
                            <a href="/auth/join">
                                <span>Create an account</span>
                            </a>
                        </p>

 

마찬가지로 등록페이지에서 로그인화면으로 넘어갈수 있겠금 join.html을 수정해주자

<p class="text-center">
    <span>Already have an account?</span>
    <a href="/auth/login">
        <span>Sign in instead</span>
    </a>
</p>