Paper.Yellow
쿠키 본문
쿠키
브라우저가 요청할 때 서버에 리퀘스트 공간을 배정받는다. 응답 시 공간을 비워준다.
서버가 종료되면 세션의 내용도 소멸하기 때문에 영구 저장을 위해 하드디스크=DB에 저장한다.
쿠키 자체는 자바스크립트 코드로 접근 불가
ㅁ로그인 아이디 기억하기
로그인할때 id/password를 post로 서버에 전달(body에 담음)
-> DB에 검증 -> session에 저장
->
응답
header:
body: code=1, massege="성공", data=null(돌려줄 데이터가 없다.)
응답 body 값을 자바스크립트로 저장을 할 수 없기 때문에 header에 담아서 쿠키에 저장한다. (set-cookie / 데이터 값을 담는다.)
왜 body에 담지 않고 header에 담는걸까??
-브라우저가 응답을 받을때 header에 set-cookie 키값이 있으면 쿠키에 자동저장한다.
http only라는 정책이 있다. 브라우저로만 쿠키에 접근이 가능한 프로토콜.
테스트용 페이지
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Stacked form</h2>
<form action="http://localhost:8000" method="get">
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
검증방식 - 쿼리스트링
주소:8000?remamver=
remember.equals("") 공백 확인
주소:8000?
rememver == null
테스트 해서 값을 알아보기 위해서 user.js 파일에 테스트 코드 추가
function loginTest(){
let remember = $("#remember").val();
console.log(remember);
}$("#btnLogin").click(() => {
//login();
loginTest();
});
코드를 추가할땐 사용법을 익히고 -> 검증까지 완료해야 한다.
동일한 답이 나와서 뒤에 val(value)가 잘못 된거 같아서 코드를 수정
function loginTest(){
let remember = $("#remember").prop("checked");
console.log(remember);
}
응답 값을 헤더의 쿠키에 담기 위해 코드를 수정
DTO에 remember 추가
정상적으로 true가 출력되는 것을 확인할 수 있다.
브라우저에서도 정상적으로 작동하는지 확인을 위해 코드 수정
UsersController 추가
if(loginDto.isRemember()) {
response.setHeader("Set-Cookie", "username="+loginDto.getUsername());
}users.js 로그인 시 메인 화면 이동을 막음
키값 : Set-Cookie / username : cos 가 정상적으로 담긴 것이 확인된다.
키값과 담기는 값을 모두 임의로 넣을 수 있다.
하지만 Set-Cookie는 프로토콜이니 꼭 지켜주자.
"쿠키의 username을 저장하고 싶은게 목적 "
바로 저장하지 않고 왜 username / password / remember 값을 전달할까?
브라우저가 스스로 쿠키 값을 저장할 방법이 없어서 서버가 브라우저가 쿠키에 값을 저장하고 싶단걸 알면 set-cookie로 저장을 허용해준다.
@PostMapping("/login")
public @ResponseBody CMRespDto<?> login(@RequestBody LoginDto loginDto, HttpServletResponse response) {
System.out.println("======================");
System.out.println(loginDto.isRemember());
System.out.println("======================");
if(loginDto.isRemember()) {
Cookie cookie = new Cookie("username", loginDto.getUsername());
cookie.setMaxAge(60*60*24);
response.addCookie(cookie);
//response.setHeader("Set-Cookie", "username="+loginDto.getUsername());
}else {
Cookie cookie = new Cookie("username", null);
cookie.setMaxAge(0);
response.addCookie(cookie);
}
Users principal = usersService.로그인(loginDto);
if(principal == null) {
return new CMRespDto<> (-1,"로그인실패", null);
}
session.setAttribute("principal", principal);
return new CMRespDto<> (1,"로그인성공", null);
}
@GetMapping("/loginForm")
public String loginForm(Model model, HttpServletRequest request) {// 쿠키 배워보기
Cookie[] cookies = request.getCookies();
for(Cookie cookie : cookies) {
if(cookie.getName().equals("username")) {
model.addAttribute(cookie.getName(), cookie.getValue());
}
System.out.println("=====================");
System.out.println(cookie.getName());
System.out.println(cookie.getValue());
System.out.println("=====================");
}
return "users/loginForm";
}
최종적으로 최초 로그인 후 다시 로그인 시도시에 username이 남아있는것을 볼 수 있다.
'데이터베이스' 카테고리의 다른 글
| MySQL 시간 입력하기 (0) | 2022.12.06 |
|---|---|
| 5.JAVA(이클립스)로 DB(오라클)연결하기 (0) | 2022.08.16 |
| 2. 데이터베이스 개요 (0) | 2022.08.11 |
| 1. 데이터베이스 (0) | 2022.08.09 |
