자바(JAVA)/JSP 웹 프로그래밍 공부 (성낙현의 JSP 자바 웹 프로그래밍 참고)

JAVA/JSP 13. 쿠키(Cookie) - 로그인 아이디 저장(로그인 페이지 작성하기, 로그인 및 아이디 저장 기능 구현하기, 동작 확인

개발학생 2023. 6. 20. 14:38
반응형

3. 로그인 페이지 작성하기

  • 쿠키를 통해 로그인 아이디를 저장하는 기능
//로그인 페이지
//Webcontent/04Cookie/IdSaveMain.jsp
<%@ page import="utils.CookieManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String loginId = CookieManager.readCookie(request, "loginId");    //1.

//2.(if문까지)
String cookieCheck = "";
if (!loginId.equals("")) {    //3.
    cookieCheck = "checked";    //4.
}
%>
<html>
<head><title>Cookie - 아이디 저장하기</title></head>
<body>
    <h2>로그인 페이지</h2>
    <form action="IdSaveProcess.jsp" method="post">
    아이디 : <input type="text" name="user_id" value="<%= loginId %>" />    //5.
        <input type="checkbox" name="save_check" value="Y" <%= cookieCheck %> />    //6.
        아이디 저장하기
    <br />
    패스워드 : <input type="text" name="user_pw" />
    <br />
    <input type="submit" value="로그인하기" />
    </form>
</body>
</html>
  1. 앞에서 작성한 CookieManager 클래스 이용 - 이름이 “loginId”인 쿠키를 읽어와 loginId 변수에 저장해둠
  2. cookieCheck 변수의 값을 결정
  3. 1.에서 loginId에 빈 문자열 외의 문자열을 저장해뒀는지 확인 (=쿠키에 저장된 아이디가 있는지 확인)
  4. 쿠키에 저장된 아이디가 있다면, cookieCheck에 “checked”가 대입됨
  5. 쿠키에 저장된 아이디가 있다면 1.의 loginId의 값이 [아이디] 입력창의 기본값으로 쓰임
  6. [아이디 저장하기] 체크박스에 checked 속성 부여

 

4. 로그인 및 아이디 저장 기능 구현하기

  • 편의상, 사용자 인증은 하드코딩된 문자열과 비교해 수행(DB와 연동되는 건 X)
  • → ID: “must”, Password: “1234”
//WebContent/04Cookie/IdSaveProcess.jsp
<%@ page import="utils.CookieManager"%>
<%@ page import="utils.JSFunction"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>  
<%
//1.폼값 읽기
String user_id = request.getParameter("user_id"); 
String user_pw = request.getParameter("user_pw");
String save_check = request.getParameter("save_check");  

if ("must".equals(user_id) && "1234".equals(user_pw)) {    //2.사용자 인증
    // 로그인 성공
    if (save_check != null && save_check.equals("Y")) {    //3.[아이디 저장하기] 체크 확인 
        CookieManager.makeCookie(response, "loginId", user_id, 86400);    //4.쿠키 생성
    } 
    else {
        CookieManager.deleteCookie(response, "loginId");    //5.쿠키 삭제 
    }
    
    JSFunction.alertLocation("로그인에 성공했습니다.", "IdSaveMain.jsp", out);    //6. 
}
else {
    // 로그인 실패
    JSFunction.alertBack("로그인에 실패했습니다.", out);    //7.  
}
%>
  1. request 내장 객체를 통해 전송된 폼값을 받음
  2. 1.에서 받은 폼값 중 아이디와 패스워드를 하드코딩된 값과 비교
  3. 로그인 성공 시 [아이디 저장하기] 체크 여부 확인
  4. 로그인 성공 시 [아이디 저장하기] 체크되어 있으면 쿠키 생성
  5. 로그인 성공 시 [아이디 저장하기] 체크되어 있지 않으면 기존 쿠키(4.에서 생성된 쿠키) 삭제
  6. 로그인 성공 알림창을 띄워준 후, 메인 페이지(IdSaveMain.jsp)로 이동
  7. 로그인 실패 알림창을 띄워준 후, 이전 페이지로 돌아감

 

5. 동작 확인

1) [Run As] -> [Run On Server]로 IdSaveMain.jsp 실행

 

2) 실행 화면에서 아이디에 “must” 입력, 패스워드에 “1234” 입력,
    [아이디 저장하기] 체크박스 체크 후 [로그인하기] 버튼 클릭
    -> 로그인 성공 메시지가 뜸

 

3) 로그인 성공 알림창에서 [확인] 버튼을 클릭하면 다시 로그인 페이지로 이동
     -> 아이디가 미리 입력되어 있고, [아이디 저장하기] 체크박스가 체크되어 있음

 

4) [아이디 저장하기] 체크 해제 후 다시 한 번 로그인 - 2)와 같이 로그인 성공 메시지가 뜰 것

 

5) 로그인 성공 알림창에서 [확인] 버튼을 클릭하면 다시 로그인 페이지로 이동
     -> 아이디 입력란이 비어 있고, [아이디 저장하기] 체크박스가 체크되어 있지 않음

반응형