์คํ๋ง ์ํ๋ฆฌํฐ๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด,
์ปค์คํฐ๋ง์ด์ง ํด๋ก WebSecurityConfigurerAdapter๋ฅผ ์ ๊ณตํ๋ค.
ํด๋น ํด์ ์์๋ฐ๋ SecurityConfig๋ผ๋ ์ค์ ํ์ผ์ ๋ง๋ค์ด์ผ ํ๋ค.
์ด ์ค์ ํ์ผ์์๋ ์ด๋๋ก ์์ฒญ์ด ๋ค์ด์ค๋ฉด ํ์ธํ ์ง, ํด์ฌ๋ ๋ญ๋ก ํ ์ง, ์ ์ ์์ด๋๋ ์ด๋์ ์ฐพ์์ง ๋ฑ์ ์ค์ ํด์ผ ํ๋ค.
๋ฐ๋ผ์ ์ค์ ์ ๋ฐํ์ผ๋ก ์ ์ ๊ฐ์ฒด๋ PrincipalDetailService๋ก ์ฐพ๊ณ , ํด์ฌ๋ Bcrypt๋ก ํธ๋ ๋ฑ ๊ตฌํ์ ํ๋ค.
๋ํ ์ํ๋ฆฌํฐ ์ธ์
์๋ UserDetails ๋ฐ์ ์ ์ฅํ์ง ๋ชปํ๊ธฐ ๋๋ฌธ์ ์ด๊ฒ๋ ๊ตฌํํด์ผ ํ๋ค.
๋ก๊ทธ์ธ ์ฃผ์, ๋ก๊ทธ์์ ์ฃผ์ ๋งคํ์ด ํ๋ ์์ํฌ ์ํ๋ฆฌํฐ์ ์ด๋ฏธ ํํฐ๋ก ๋ง๋ค์ด์ ธ ์๋ค.
/auth/**
/
/js/**
, /css/**
, /image/**
/ (์ปจํ ์คํธ ์ญ์ ) -> index.jsp
< UserApiController >
/auth/joinProc
/auth/loginProc
< UserController >
/auth/joinForm
/auth/loginForm
๊ทธ ์ธ : auth ๋ถ์ด๋ฉด ์๋๋ ์ฃผ์ (์ธ์ฆ๋ ์ฌ์ฉ์๋ง ํ์ฉ๋๋ ์ฃผ์)
๊ธ์ฐ๊ธฐ : /board/form
ํ์์ ๋ณด : /user/form
๋ก๊ทธ์์ : /logout
๋ก๊ทธ์ธ์ 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"%>
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();
@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 ํ ํฐ ๋นํ์ฑํ (ํ
์คํธ์ ๊ฑธ์ด์ฃผ๋ ๊ฒ์ด ์ข์)
}
์ฌ๊ธฐ๊น์ง ํ๊ณ ํ์๊ฐ์ ํ ๋ ๋น๋ฐ๋ฒํธ ํด์ฌํ๋ฌ ๊ณ ๊ณ