🔥 #8 로그인에 스프링 시큐리티 적용하기

스프링 시큐리티를 사용하기 위해,
커스터마이징 툴로 WebSecurityConfigurerAdapter를 제공한다.
해당 툴을 상속받는 SecurityConfig라는 설정파일을 만들어야 한다.

이 설정파일에서는 어디로 요청이 들어오면 확인할지, 해쉬는 뭘로 할지, 유저 아이디는 어디서 찾을지 등을 설정해야 한다.

따라서 설정을 바탕으로 유저 객체는 PrincipalDetailService로 찾고, 해쉬는 Bcrypt로 푸는 등 구현을 한다.
또한 시큐리티 세션에는 UserDetails 밖에 저장하지 못하기 때문에 이것도 구현해야 한다.

---

로그인 주소, 로그아웃 주소 매핑이 프레임워크 시큐리티에 이미 필터로 만들어져 있다.

• 로그아웃 필터
• username password 인증 필터

---

주소 세팅

• 인증이 안된 사용자들이 출입할 수 있는(허용되는) 경로
  • /auth/**
  • /
  • static 이하에 있는 /js/**, /css/**, /image/**

/ (컨텍스트 삭제) -> index.jsp

< UserApiController >
/auth/joinProc
/auth/loginProc

< UserController >
/auth/joinForm
/auth/loginForm

그 외 : auth 붙이면 안되는 주소 (인증된 사용자만 허용되는 주소)
글쓰기 : /board/form
회원정보 : /user/form
로그아웃 : /logout

---

파일 수정

< loginForm.jsp >

로그인을 form 태그 (x-www-form-urlencoded 타입데이터) 로 하는 이유 : 시큐리티가 x-www-form-urlencoded 타입데이터 만 파싱하기 때문이다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<%@ include file="../layout/header.jsp"%>

<div class="container">

    <form action="/auth/loginProc" method="post">
    
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" name="username" class="form-control" placeholder="Enter username" id="username">
        </div>
        
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" name="password" class="form-control" placeholder="Enter password" id="password">
        </div>
        
        <button id="btn-login" class="btn btn-primary">로그인</button>
        
    </form>
</div>

<!-- 자바스크립트 사용하지 않고 form에서 액션 타서 보낼거라 아래 문장 사용하지 않음-->
<!--<script src="/js/user.js"><</script>-->
<%@ include file="../layout/footer.jsp"%>

• user.js 사용하지 않을거라 지우고, input type에 name 속성 넣기

< user.js >

let index = {
    init: function () {
        $("#btn-save").on("click", ()=>{ // function(){} 대신 ()=>{} 를 쓴 이유 : this를 바인딩하기 위해서
            this.save();
        });
        //$("#btn-login").on("click", ()=>{ // function(){} 대신 ()=>{} 를 쓴 이유 : this를 바인딩하기 위해서
        //    this.login();
        //});
    },

    save: function () {
        // alert('user의 save함수 호출됨');
        let data = {
            username: $("#username").val(),
            password: $("#password").val(),
            email: $("#email").val()
        };

        // console.log(data); data는 자바스크립트 오브젝트
        // console.log(JSON.stringify(data)); JSON 문자열

        // ajax 호출시 default가 비동기 호출 -> 순서 상관없음
        // ajax 통신을 이용해서 3개의 데이터를 json으로 변경하여 insert 요청
        // ajax가 통신을 성공하고 서버가 json을 리턴해주면 자동으로 자바(스크립트?) 오브젝트로 변환
        $.ajax({
            // 회원가입 수행 요청
            type: "POST",
            url: "/auth/joinProc",
            data: JSON.stringify(data), // http body 데이터
            contentType: "application/json; charset=utf-8", // body 데이터가 어떤 타입인지 (MIME)
            dataType: "json" // 요청을 서버로 해서 응답이 왔을 때 기본적으로 모든 것이 String(문자열), 만약 생긴게 json이라면 javascript 오브젝트로 변경
        }).done(function (resp) {
            // 결과가 정상이면 done 실행
            alert("회원가입이 완료되었습니다.");
            //console.log(resp);
            location.href = "/";
        }).fail(function (error) {
            // 실패하면 fail 실행
            alert("회원가입이 실패하였습니다.");
            alert(JSON.stringify(error));
        });
    },

    /*
    login: function () {
        let data = {
            username: $("#username").val(),
            password: $("#password").val()
        };

        $.ajax({
            type: "POST",
            url: "/api/user/login",
            data: JSON.stringify(data), // http body 데이터
            contentType: "application/json; charset=utf-8", // body 데이터가 어떤 타입인지 (MIME)
            dataType: "json" // 요청을 서버로 해서 응답이 왔을 때 기본적으로 모든 것이 String(문자열), 만약 생긴게 json이라면 javascript 오브젝트로 변경
        }).done(function (resp) {
            // 결과가 정상이면 done 실행
            alert("로그인이 완료되었습니다.");
            //console.log(resp);
            location.href = "/";
        }).fail(function (error) {
            // 실패하면 fail 실행
            alert("로그인이 실패하였습니다.");
            alert(JSON.stringify(error));
        });
    }
     */
}


index.init();

• 로그인에 해당하는 부분 전부 지우기

---

로그인 페이지 커스터마이징

< SecurityConfig >

• 빈 등록 : 스프링 컨테이너에서 객체를 관리할 수 있게 하는 것
• 아래 세 개의 어노테이션은 시큐리티에서 세트로 사용

@Configuration // 빈 등록 (IoC관리)
@EnableWebSecurity // Security 필터가 등록됨 = 스프링 시큐리티가 이미 활성화는 되어있지만, 설정은 해당 파일에서 할 것임
@EnableGlobalMethodSecurity(prePostEnabled = true) // 특정 주소로 접근을 하면 권한 및 인증을 미리 체크

// 빈 등록 : 스프링 컨테이너에서 객체를 관리할 수 있게 하는 것
// 아래 3개의 어노테이션은 시큐리티에서 세트로 사용

@Configuration // 빈 등록 (IoC관리)
@EnableWebSecurity // Security 필터가 등록됨 = 스프링 시큐리티가 이미 활성화는 되어있지만, 설정은 해당 파일에서 할 것임
@EnableGlobalMethodSecurity(prePostEnabled = true) // 특정 주소로 접근을 하면 권한 및 인증을 미리 체크 (수행한 후에 체크하는 것이 아님)
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    // 필터링
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
        		.csrf().disable() // csrf 토큰 비활성화 (테스트시 걸어두는게 좋음)
                .authorizeRequests() // request가 들어오면
                .antMatchers("/", "/auth/**", "/js/**", "/css/**", "/image/**") // 여기로 들어오면
                .permitAll() // 모두 가능 (누구나 가능)
                .anyRequest() // 그게 아닌 다른 모든 요청은
                .authenticated() // 인증이 되어야 한다
                .and()
                .formLogin()
                .loginPage("/auth/loginForm"); // 인증이 필요한 요청은 이 로그인 폼으로 온다
    }

    // 참고 : .headers().frameOptions().disable() // 아이프레임 접근 막기
    // 참고 : .csrf().disable() // csrf 토큰 비활성화 (테스트시 걸어주는 것이 좋음)
}

• 커스터마이징 툴로 WebSecurityConfigurerAdapter 를 상속받기

여기까지 하고 회원가입 할 때 비밀번호 해쉬하러 고고