Burninghering's Blog
article thumbnail
Published 2023. 3. 9. 00:05
패스트캠퍼스 챌린지 - 18일차 [스프링의 정석:남궁성과 끝까지 간다] 패캠 챌린지

loginForm.jsp

<%@ page contentType="text/html;charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="java.net.URLDecoder" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
    <style>
       * { box-sizing:border-box; }
       a { text-decoration: none; }
        form {
            width:400px;
            height:500px;
            display : flex;
            flex-direction: column;
            align-items:center;
            position : absolute;
            top:50%;
            left:50%;
            transform: translate(-50%, -50%) ;
            border: 1px solid rgb(89,117,196);
            border-radius: 10px;
        }
        input[type='text'], input[type='password'] {
            width: 300px;
            height: 40px;
            border : 1px solid rgb(89,117,196);
            border-radius:5px;
            padding: 0 10px;
            margin-bottom: 10px;
        }
        button {
            background-color: rgb(89,117,196);
            color : white;
            width:300px;
            height:50px;
            font-size: 17px;
            border : none;
            border-radius: 5px;
            margin : 20px 0 30px 0;
        }
        #title {
            font-size : 50px;
            margin: 40px 0 30px 0;
        }
        #msg {
            height: 30px;
            text-align:center;
            font-size:16px;
            color:red;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <form action="<c:url value='/login/login'/>" method="post" onsubmit="return formCheck(this);">
        <h3 id="title">Login</h3>
        <div id="msg">
	    <c:if test="${not empty param.msg}">
		<i class="fa fa-exclamation-circle"> ${URLDecoder.decode(param.msg)}</i>            
	    </c:if>        
	</div>
        <input type="text" name="id" placeholder="이메일 입력" autofocus>
        <input type="password" name="pwd" placeholder="비밀번호">
        <button>로그인</button>
        <div>
            <label><input type="checkbox" name="rememberId"> 아이디 기억</label> |
            <a href="">비밀번호 찾기</a> |
            <a href="">회원가입</a>
        </div>
        <script>
            function formCheck(frm) {
                 let msg ='';
     
                 if(frm.id.value.length==0) {
                     setMessage('id를 입력해주세요.', frm.id);
                     return false;
                 }
     
                 if(frm.pwd.value.length==0) {
                     setMessage('password를 입력해주세요.', frm.pwd);
                     return false;
                 }

                 return true;
            }
     
            function setMessage(msg, element){
                 document.getElementById("msg").innerHTML = ` ${'${msg}'}`;
     
                 if(element) {
                     element.select();
                 }
            }
        </script>
    </form>
</body>
</html>

 

LoginController.class

package com.fastcampus.ch2;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/login")
public class LoginController {
	
	@RequestMapping("/login")
	public String loginForm() {
		return "loginForm";
	}
}

아이디 기억 버튼을 쿠키를 사용해 구현할 것이다.

package com.fastcampus.ch2;

import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;

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

@Controller
@RequestMapping("/login")
public class LoginController {
	
	@GetMapping("/login")
	public String loginForm() {
		return "loginForm";
	}
	
	@PostMapping("/login")
	public String login(String id,String pwd,String rememberId) throws Exception {
		//1. 아이디와 패스워드 확인
		//2-1. 일치하지 않으면 loginForm으로 이동
		if (!loginCheck(id,pwd)) {
			String msg=URLEncoder.encode("id 또는 pwd가 일치하지 않습니다.","utf-8");
			
			return "redirect:/login/login?msg="+msg;
		}
		
		//2-2. 아이디와 패스워드가 일치하면 홈으로 이동
		return "redirect:/";
	}

	private boolean loginCheck(String id, String pwd) {
		
		return "asdf".equals(id) && "1234".equals(pwd);
	}
}

 

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <title>fastcampus</title>
    <link rel="stylesheet" href="<c:url value='/css/menu.css'/>">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>    
</head>
<body>
<div id="menu">
	<ul>
	    <li id="logo">fastcampus</li>
	    <li><a href="<c:url value='/'/>">Home</a></li>
	    <li><a href="<c:url value='/board/list'/>">Board</a></li>
	    <li><a href="<c:url value='/login/login'/>">login</a></li>    
	    <li><a href="<c:url value='/register/add'/>">Sign in</a></li>
	    <li><a href=""><i class="fas fa-search small"></i></a></li>
	</ul> 
</div>
<div style="text-align:center">
	<h1>This is HOME</h1>
	<h1>This is HOME</h1>
	<h1>This is HOME</h1>
</div>

 

HomeController.class

package com.fastcampus.ch2;

import java.text.DateFormat;
import java.util.Date;
import java.util.Locale;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller //1. 원격 호출 가능한 프로그램으로 등록
public class HomeController {
	@RequestMapping(value = "/", method = RequestMethod.GET)
	public String home() {
		return "index";
	}	
}

 

menu.css

* { 
    box-sizing: border-box; 
    margin : 0;
    padding: 0;
}

a { text-decoration: none;  }

ul {
    list-style-type: none;
    height: 48px;
    width: 100%;
    background-color: #30426E;
    display: flex;
}

ul > li {
    color: lightgray;
    height : 100%;
    width:90px;
    display:flex;
    align-items: center;
}

ul > li > a {
    color: lightgray;
    margin:auto;
    padding: 10px;
    font-size:20px;
    align-items: center;
}

ul > li > a:hover {
    color :white;
    border-bottom: 3px solid rgb(209, 209, 209);
}

#logo {
	color:white;
    font-size: 18px;
    padding-left:40px; 
    margin-right:auto;
    display: flex;
}

쿠키란?

이름과 값의 쌍으로 구성된 정보 / 아스키 문자만 가능

서버에서 생성 후 전송, 브라우저에 저장. -> 유효기간 이후 자동 삭제

서버에 요청시 domain, path가 일치하는 경우에만 자동 전송

name=value 쌍으로 저장

유효기간도 저장 

 

쿠키의 작동 과정

서버가 쿠키를 만들고 addCookie를 실행하면

웹서버 아래 그림처럼 쿠키와 응답 헤더가 만들어진다.

 

클라이언트에 쿠키가 저장되고,

클라이언트가 요청을 보내면 쿠키와 함께 요청을 보내게 되어있다. (그림의 코드는 요청 헤더)

웹 서버를 도서관으로 생각하면 된다.(도서관 회원증을 서버가 신규 발급 -> 회원증으로 출입)

 

쿠키는 클라이언트를 식별하기 위한 기술이다.

서버는 요청 오는 것에 대한 응답을 해주는데, 경우에 따라선 클라이언트를 구별해야할 때가 있다.

서버가 응답할 때 쿠키를 클라이언트에게 주고, 브라우저에 저장된다.

그럼 그 다음에 요청할 때는 쿠키를 함께 요청한다.

그렇다면 서버가 클라이언트를 식별하는 것이다.

쿠키의 생성

response.addCookie(cookie) 코드 한 문장으로 응답 헤더가 만들어진다.

 

쿠키의 삭제와 변경

유효기간을 0으로 설정한다는 것이 쿠키가 삭제된다는 것이다.

 

변경은

도메인, 경로, 유효기간 등 값들을 변경해준다.

 

"응답에 쿠키 추가" 코드를 삭제나 변경 시 꼭 넣어주어야 한다.

 

쿠키 읽어오기

request객체로 getCookies를 하면 된다.

 

쿠키가 2개 이상일 수 있으므로, 

쿠키가 배열이 된다.

 

요청이 오면,

브라우저가 자신이 가진 쿠키를 보내준다.

호스트와 경로를 확인하고,

일치하는 쿠키를 찾아 쿠키 헤더에 넣는다.

쿠키가 있으면

id를 입력해주고

아이디 기억에 체크가 되어있어야 한다.

        <input type="text" name="id" value="${cookie.id.value}" placeholder="이메일 입력" autofocus>
            <label><input type="checkbox" name="rememberId" ${empty cookie.id.value ? "":"checked"}> 아이디 기억</label> |

 

브라우저에서 직접 쿠키 만들기

 

Name은 id,

Value는 asdf로 쿠키를 만들면

자동으로 아이디가 넣어지고

아이디 기억 부분에 체크가 된다.

 

파라미터에 무엇이 넘어오는지 확인하기

@Controller
@RequestMapping("/login")
public class LoginController {
	
	@GetMapping("/login")
	public String loginForm() {
		return "loginForm";
	}
	
	@PostMapping("/login")
	public String login(String id,String pwd,String rememberId) throws Exception {
		
		System.out.println("id="+id);
		System.out.println("pwd="+pwd);
		System.out.println("rememberId="+rememberId);

String이기 때문에

Boolean 값으로 바꾸면

값이 있으면 true, 없으면 false로 스프링이 잘 바꾸어준다.

 

	@PostMapping("/login")
	public String login(String id,String pwd,boolean rememberId) throws Exception {
		
		System.out.println("id="+id);
		System.out.println("pwd="+pwd);
		System.out.println("rememberId="+rememberId);

코드로 쿠키 만들기 

	@PostMapping("/login")
	public String login(String id,String pwd,boolean rememberId,HttpServletResponse response) throws Exception {
		
		System.out.println("id="+id);
		System.out.println("pwd="+pwd);
		System.out.println("rememberId="+rememberId);
		
		//1. 아이디와 패스워드 확인
		//2-1. 일치하지 않으면 loginForm으로 이동
	
		if (!loginCheck(id,pwd)) {
			String msg=URLEncoder.encode("id 또는 pwd가 일치하지 않습니다.","utf-8");
			
			return "redirect:/login/login?msg="+msg;
		}
		
		//2-2. 아이디와 패스워드가 일치하면 홈으로 이동
		//	1. 쿠키를 생성
		Cookie cookie =new Cookie("id",id);
		//  2. 응답에 저장
		response.addCookie(cookie);
		//	3. 홈으로 이동
		
		
		return "redirect:/";
	}

'

자동으로 기억된다!

아이디 기억 체크박스에 표시가 되어있을 때만 쿠키를 만들도록 해보자

	@PostMapping("/login")
	public String login(String id,String pwd,boolean rememberId,HttpServletResponse response) throws Exception {
		
		System.out.println("id="+id);
		System.out.println("pwd="+pwd);
		System.out.println("rememberId="+rememberId);
		
		//1. 아이디와 패스워드 확인
		//2-1. 일치하지 않으면 loginForm으로 이동
	
		if (!loginCheck(id,pwd)) {
			String msg=URLEncoder.encode("id 또는 pwd가 일치하지 않습니다.","utf-8");
			
			return "redirect:/login/login?msg="+msg;
		}
		
		//2-2. 아이디와 패스워드가 일치하면 홈으로 이동
		
		if(rememberId) {
			//쿠키를 생성
			//	1. 쿠키를 생성
			Cookie cookie =new Cookie("id",id);
			//  2. 응답에 저장
			response.addCookie(cookie);
			
		}else {
			//쿠키를 삭제 
			Cookie cookie =new Cookie("id",id);
			cookie.setMaxAge(0);
			response.addCookie(cookie);
		}
		
		//	3. 홈으로 이동
		return "redirect:/";
	}

우선 있던 쿠키를 삭제해주고,

아이디 기억 체크박스를 해제해준 뒤 로그인을 하면

쿠키가 만들어지지 않는다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

http://bit.ly/3Y34pE0

 

패스트캠퍼스 [직장인 실무교육]

프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.

fastcampus.co.kr

 

'패캠 챌린지' 카테고리의 다른 글

패스트캠퍼스 챌린지 - 20일차 [스프링의 정석:남궁성과 끝까지 간다]  (0) 2023.03.11
패스트캠퍼스 챌린지 - 19일차 [스프링의 정석:남궁성과 끝까지 간다]  (0) 2023.03.10
패스트캠퍼스 챌린지 - 17일차 [스프링의 정석:남궁성과 끝까지 간다]  (0) 2023.03.08
패스트캠퍼스 챌린지 - 16일차 [스프링의 정석:남궁성과 끝까지 간다]  (0) 2023.03.07
패스트캠퍼스 챌린지 - 15일차 [스프링의 정석:남궁성과 끝까지 간다]  (0) 2023.03.06
profile

Burninghering's Blog

@개발자 김혜린

안녕하세요! 반갑습니다.

검색 태그

interface
IOC
자료형
멤버변수
static
패스트캠퍼스
상속
객체지향
자바
생성자 어노테이션
패캠인강후기
패스트캠퍼스후기
추상메서드
패캠챌린지
생성자
자바연산자
상수
직장인자기계발
수강료0원챌린지
스프링의정석:남궁성과끝까지간다
객체
인터페이스
DI
지역변수
다형성
오공완
정적변수
JVM
환급챌린지
직장인인강

티스토리툴바