csrf적용한 로그인(아웃), 회원가입,댓글(작,삭),게시글(작,수,삭),회원정보(수정)

SecurityConfig

 

 

 

 

 

login_form.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../layout/header.jsp"%>

<!-- /auth/loginProc <--- 이녀셕은 스프링이 알아서 처리 해줌 마법..아니라
.loginProcessingUrl("/auth/loginProc") 설정 되어 있음 
   -->
<div class="container">
	<form action="/auth/loginProc" method="post">
		<div class="form-group">
			<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}">			
			<label for="username">username:</label> <input type="text" class="form-control" placeholder="Enter usernmae" id="username" name="username"
				value="teco">
		</div>
		<div class="form-group">
			<label for="password">password:</label> <input type="password" class="form-control" placeholder="Enter password" id="password" name="password"
				value="asd123">
		</div>
		<button type="submit" id="btn--login" class="btn btn-primary">signIn</button>
		<a
			href="https://kauth.kakao.com/oauth/authorize?client_id=96d4b049c21c05bf7f9d3995dad3c0c6&redirect_uri=http://localhost:9090/auth/kakao/callback&response_type=code">
			<img alt="카카오로그인" src="/image/kakao_login_medium.png" width="78" height="38"></a>
	</form>
</div>

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

 

 

 

로그인화면에서 소스보기로 확인해보면 토큰값을 받아오는걸 확인 할 수 있다.

 

 

 

 

 

 

 

회원가입 처리

 

header

 

user.js

let token = $("meta[name='_csrf']").attr("content");
		let csrfHeader = $("meta[name='_csrf_header']").attr("content");

beforeSend: function(xhr) {
				xhr.setRequestHeader(csrfHeader,token)
			},

 

 

 

게시글 작성

save: function() {
		let xcheckTitle = XSSCheck($("#title").val());
		let token = $("meta[name='_csrf']").attr("content")
		let csrfHeader = $("meta[name='_csrf_header']").attr("content");
		let data = {
			title: xcheckTitle,
			content: $("#content").val()
		};

		// ajax 통신 요청 

		$.ajax({
			beforeSend: function(xhr) {
				xhr.setRequestHeader(csrfHeader, token)
			},
			type: "POST",
			url: "/api/board",
			data: JSON.stringify(data),
			contentType: "application/json; charset=utf-8",
			dataType: "json"
		}).done(function(data, textSatus, xhr) {
			if (data.status == "OK") {
				alert("글쓰기 성공");
				location.href = "/";
			}
		}).fail((error) => {
			console.log(error);
			alert(error.responseJSON.error);
		});

	},

 

 

 

게시글 수정

update: function() {
		// HTML 태그에 직접 속성을 정의할 수 있다. 규칙은 data-* 
		// data-* 값을 가지고 오기 위해서 Jquery --> (선택자).attr("data-[id]")
		let boardId = $("#board-id").attr("data-id");
		let token = $("meta[name='_csrf']").attr("content")
		let csrfHeader = $("meta[name='_csrf_header']").attr("content");

		let data = {
			title: $("#title").val(),
			content: $("#content").val()
		}

		$.ajax({
			beforeSend: function(xhr) {
				xhr.setRequestHeader(csrfHeader, token)
			},
			
			type: "PUT",
			url: "/api/board/" + boardId,
			data: JSON.stringify(data),
			contentType: "application/json; charset=utf-8",
			dataType: "json"
		}).done(function(data, textStatus, xhr) {
			if (data.status) {
				alert("글 수정이 완료 되었습니다");
				location.href = "/";
			}
		}).fail(function(error) {
			console.log(error);
			alert("글 수정에 실패 하였습니다");
		});

	},

 

 

 

 

게시글 삭제

deleteById: function() {
		let id = $("#board-id").val();
		let token = $("meta[name='_csrf']").attr("content") 
		let csrfHeader = $("meta[name='_csrf_header']").attr("content");
		// 통신 ---> ajax 
		$.ajax({
			beforeSend: function(xhr) {
				xhr.setRequestHeader(csrfHeader,token)
			},
			type: "DELETE",
			url: "/api/board/" + id
		}).done(function(data, textStatus, xhr) {
			if (data.status == "OK") {
				alert("글 삭제가 완료 되었습니다");
				location.href = "/";
			}
		}).fail(function(error) {
			alert("글 삭제하기에 실패 하였습니다");
		});
	},

 

 

 

 

댓글 작성

	replySave: function() {
		let token = $("meta[name='_csrf']").attr("content");
		let csrfHeader = $("meta[name='_csrf_header']").attr("content");

		let replydata = {
			boardId: $("#board-id").val(), // fk (board pk) 
			content: $("#content").val()
		};
		// ajax 통신 요청 
		$.ajax({
			beforeSend: function(xhr) {
				xhr.setRequestHeader(csrfHeader,token)
			},
			
			type: "POST",
			url: `/api/board/${replydata.boardId}/reply`,
			data: JSON.stringify(replydata),
			contentType: "application/json; charset=utf-8",
			dataType: "json"
		}).done(function(data, textSatus, xhr) {
			if (data.status == "OK") {
				alert("댓글작성이 완료 되었습니다.");
				location.href = `/board/${replydata.boardId}`;
			}
		}).fail((error) => {
			console.log(error);
			alert("댓글 작성에 실패 하였습니다.");
		});

	},

 

 

 

 

댓글 삭제

replyDelete: function(boardId, replyId) {
		let token = $("meta[name='_csrf']").attr("content") 
		let csrfHeader = $("meta[name='_csrf_header']").attr("content");
		
		
		$.ajax({
			beforeSend: function(xhr) {
				xhr.setRequestHeader(csrfHeader,token)
			},
			type: "DELETE",
			url: `/api/board/${boardId}/reply/${replyId}`,
			dataType: "json"
		}).done(function(resData) {
			if (resData.status == "OK") {
				alert("댓글 삭제 성공");
				location.href = `/board/${boardId}`
			}
		}).fail(function(error) {
			alert("댓글 삭제 실패");
		});
	},