본문 바로가기
스터디/JAVA

[JSP]Cookie와 Session 에 정보 저장하기(feat. 로그인 정보)

by SeO.V 2023. 4. 27.

JSP 를 배우면서 Cookie와 Session에 대해 점검하면서 JSP에서 처리되는 방식에 배우면서 이걸 한꺼번에 같이 해보고 싶다는 욕심에 쿠키와 세션을 같이 다루는 걸 만들어 봤다. 좀 괴랄하긴 하다(..

 

 

조건

1. 로그인 정보인 userId와 userPwd 는 세션에 저장한다. 다만 로그아웃 시에는 세션에서 삭제한다.

2. 닉네임 정보인 userNickName은 쿠키에 저장한다. 쿠키의 저장 여부는 checkbox에 체크하면 저장을, 해제하면 쿠키에서 삭제한다.

3. index.jsp 에서는 로그인 여부를 확인한다.

    3-1. 로그인이 되어있지 않으면 로그인을 유도하는 loginForm.jsp 으로 이동하도록 한다.

    3-2. 로그인이 되어있다면 환영하는 출력문과 함께 오늘의 날짜와 요일, 그리고 닉네임이 저장되었다면 userNickName을, 저장되어있지 않다면 userId를 출력한다.

4. loginForm.jsp 에서는 먼저 쿠키가 저장이 되어 있다면 userNickName 이 있는 input=text에 저장된 값을 보여준다. 로그인 정보들은 로그아웃하면 세션에서 삭제되므로 항상 비어있다. 그리고 input=checkbox에 닉네임 저장 여부를 체크할 수 있다. 로그인 submit 버튼을 누르면 process.jsp로 넘어간다.

5. process.jsp 에서 로그인 시에는 userId와 userPassword는 세션으로 저장하도록 한다. 또한 쿠키의 저장 여부를 확인하기 위해 request.getParameter("checkSaveNickname") 의 null 혹은 "" 값을 체크하고 체크 해제면 쿠키 삭제를, 체크가 되어있으면 쿠키를 저장한다. 그리고 다시 index.jsp 로 리다이렉트 한다.

6.  index.jsp에서 로그아웃을 누르면 logout.jsp로 이동하며 logout.jsp에서는 세션을 모두 삭제한다. 그리고 역시 index.jsp로 리다이렉트 한다.

 

index.jsp

더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %><%-- Locale, Date --%> 
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.time.LocalDate" %>
<%@ page import="java.time.format.DateTimeFormatter" %>
<%@ page import="java.time.format.TextStyle" %>
<% request.setCharacterEncoding("UTF-8"); %>
<% 
// 오늘 날짜 안내
LocalDate date = LocalDate.now();
DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy년 MM월 dd일");
String formattedDate = formatter.format(date);
String dayOfWeek = date.getDayOfWeek().getDisplayName(TextStyle.FULL, Locale.KOREAN);

%>
<%
// 사용자가 로그인되어 있는지 확인 & 쿠키에서 userNickName 확인
String savedId = (String) session.getAttribute("userId");
String userNickName = "";
Cookie[] cookies = request.getCookies();
if(cookies != null){ // cookie를 확인하면서 userNickName 여부 확인
	for (Cookie c : cookies){	
		if(c.getName().equals("userNickName")){
			userNickName = c.getValue();
		}
	}
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<title>Index Page</title>
</head>
<body>
<section class="section main container-fluid">
	<div class="conainer-fluid">
		<% if(savedId == null){ %>
		<h2 class="mt-3 mb-3 pb-3 border-bottom text-center">안내</h2>
		<div class="container">
			<p class="text-center">회원 전용 페이지 입니다.<br/>로그인 하시기 바랍니다.<strong></strong></p>
			<p class="text-center"><a href="loginForm.jsp">{ 로그인 }</a></p>
		</div>
		<%} else{ 
		%>
		<h2 class="mt-3 mb-3 pb-3 border-bottom text-center">환영합니다. <%=savedId %>님!</h2>
		<p class="text-center">오늘 날짜는 <%=formattedDate %> 이며, 오늘은 <%=dayOfWeek %> 입니다.</p>
		<p><%= (userNickName != null && !userNickName.equals("")) ? "Nickname : "+userNickName : "ID : "+savedId %> 님. <a href="./logout.jsp">로그아웃</a>하시겠습니까?</p>
		<%} %>
	</div>
</section>
</body>
</html>

 

loginForm.jsp

더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %>
<%

// 사용자가 이미 로그인 되어 있는 경우 index.jsp로 이동
String savedId = (String) session.getAttribute("userId");
String savedPwd = (String) session.getAttribute("userPwd");
if (savedId != null) {
    response.sendRedirect("index.jsp");
    return;
}
%>
<%
//쿠키에서 값을 읽어옴 -> 쿠키 저장 되어있을 경우
Cookie[] cookies = request.getCookies();
String cookieNickName = "";
String cookieCheckBox = "";
for(Cookie c : cookies){
	if(c.getName().equals("userNickName")){
		cookieNickName = c.getValue();
	}
	if(c.getName().equals("checkSaveNickname")){
		cookieCheckBox = "checked";
	}
}

%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<title>Index Page</title>
</head>
<body>
<section class="section main container-fluid">
	<div class="conainer-fluid">
		<h2 class="mt-3 mb-3 pb-3 border-bottom text-center">로그인</h2>
		<form action="process.jsp" method="POST" name="loginForm" class="loginBox row w-75 m-auto" >
			<div class="row">
				<div class="col">
					<div class="col-10 mb-3 g-3 align-items-center">
						<label for="userId" class="col-sm-2 col-form-label">아이디</label>
						<div class="col-sm-10">
							<input type="text" name="userId" value="<%=(savedId == ""  || savedId == null ? "" : savedId)%>" id="userId" class="form-control"  required>
						</div>
					</div>
					<div class="col-10 mb-3 g-3 align-items-center">
						<label for="userPassword" class="col-sm-2 col-form-label">비밀번호</label>
						<div class="col-sm-10">
							<input type="password" name="userPassword" value="<%=(savedPwd == "" || savedPwd == null ? "" : savedPwd)%>" id="userPassword" class="form-control" required>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col">
					<div class="col-10 mb-3 g-3 align-items-center">
						<label for="userNickName" class="col-sm-2 col-form-label">닉네임</label>
						<div class="col-sm-10">
							<input type="text" name="userNickName" value="<%=(cookieNickName == "" ? "" : cookieNickName ) %>" id="userNickName" class="form-control"  required>
						</div>
					</div>
				</div>
				<div class="col">
					<div class="col-2 mb-3 g-3 align-items-center">
						<div class="form-check">
							<input type="checkbox" name="checkSaveNickname" value="true" <%=(cookieCheckBox == "" ? "" : cookieCheckBox) %> class="form-check-input" id="checkSaveNickname">
						  	<label for="checkSaveNickname" class="col-form-label">닉네임 저장</label>
						</div>
					</div>
				</div>
			</div>
			<p class="text-center">
				<button type="submit" class="btn btn-primary">로그인</button>
				<button type="reset" class="btn btn-success">취소</button>
			</p>
		</form>
	</div>
</section>
</body>
</html>

 

 

process.jsp

더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %>
<%
//로그인 시 loginForm 에서 세션에 userId, userPassword 저장
String userId = request.getParameter("userId");
String userPwd = request.getParameter("userPassword");
session.setAttribute("userId", userId);
session.setAttribute("userPassword", userPwd);

//조건 checkBox에 check시, Cookie에는 userNickName 을 저장한다.
System.out.println("Cookie list");
Cookie[] cookies = request.getCookies();
for (Cookie c : cookies){
	System.out.println("c.getName() : "+c.getName()+" | c.getValue() : "+c.getValue());	
}

if(request.getParameter("checkSaveNickname") == null || request.getParameter("checkSaveNickname") == "") { // 체크 해제 시 쿠키 삭제
	Cookie userNicknameCookie = new Cookie("userNickName", "");
  	userNicknameCookie.setMaxAge(0); // 쿠키 삭제
  	response.addCookie(userNicknameCookie);

  	Cookie checkSaveNicknameCookie = new Cookie("checkSaveNickname", "");
  	checkSaveNicknameCookie.setMaxAge(0); // 쿠키 삭제
  	response.addCookie(checkSaveNicknameCookie);
  
} else { // 닉네임 저장 시 쿠키 생성 & 저장
	Cookie userNicknameCookie = new Cookie("userNickName", request.getParameter("userNickName"));
  	userNicknameCookie.setMaxAge(60*60*24*30); // 쿠키 유효 기간 30일
  	response.addCookie(userNicknameCookie);

  	Cookie checkSaveNicknameCookie = new Cookie("checkSaveNickname", "true");
  	checkSaveNicknameCookie.setMaxAge(60*60*24*30); // 쿠키 유효 기간 30일
  	response.addCookie(checkSaveNicknameCookie);
  
}
%>
<%
System.out.println("\nloginForm.jsp Start!\n");
// 사용자가 이미 로그인 되어 있는 경우 index.jsp로 이동
String savedId = (String) session.getAttribute("userId");
String savedPwd = (String) session.getAttribute("userPwd");
if (savedId != null) {
    response.sendRedirect("index.jsp");
    return;
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

 

logout.jsp

더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
// 세션에서 userId, userPwd 가져오기
String userId = (String)session.getAttribute("userId");
String userPwd = (String)session.getAttribute("userPwd");
// 세션 초기화
session.invalidate();
// index.jsp로 리다이렉트
response.sendRedirect("index.jsp");
System.out.println("session.invalidate()!");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<title>Logout</title>
</head>
<body>
<p><%= userId %> 님, 로그아웃 되었습니다.</p>
</body>
</html>

 

 

처음엔 index.jsp 에서 한 번에 다 하려고 했는데 리다이렉트 및 response 와 request 부분으로 꼬이더라.. 욕심내지 말자.

'스터디 > JAVA' 카테고리의 다른 글

Eclipse에서 MySQL 연동하기  (0) 2023.05.25
[JSP]오늘 날짜 정보 출력하기 여러가지 방법  (0) 2023.04.27