Chapter05. CRUD 프로젝트 / 아이디 기억하기 ( 쿠키 활용 )

<< 학습 목표 >>

1. 쿠키를 활용해 아이디 기억하기 기능을 구현할 수 있다.

2. JS 를 활용해 웹 페이지에서 쿠키를 활용할 수 있다.

---

예전에는 대부분의 웹 사이트에서 로그인을 할 때 [ 아이디 기억하기 ] 가 있었음

아이디 기억하기 를 체크 한 후 로그인에 성공하면 다음에 다시 그 사이트에 로그인할 때 아이디 부분이 자동으로 채워져있었음

요즘은 아이디 기억하기 대신 [ 로그인 상태 유지 ] 로 바뀌는 추세임

( 로그인 상태 유지에 대한 얘기는 다음 글, https://codingaja.tistory.com/60, 에서 하겠음 )

 

서블릿으로 [ 로그인 상태 유지 ] 를 구현하기에는 한계가 뚜렷하기 때문에 [ 아이디 기억하기 ] 까지만 구현하자

 

먼저 아이디 기억하기 를 구현하려면 로그인 화면에서 아이디 기억하기 체크 버튼이 있어야함

사용자가 원치 않는데 아이디가 기억된다면 공공 장소(피씨방, 학교 컴퓨터)에서 로그인을 할 때 사용자에게 불편함을 줄 수 있기 때문에...

 

회원 가입 페이지(WEB-INF  폴더 -> member 폴더 -> login.html) 에 로그인 버튼 앞에 다음과 같이 아이디 기억하기 체크 박스를 추가하자

그 후 로그인 버튼을 눌렀을 때 서버로 remeberId 체크 여부를 함께 전달하자

<< 해당 부분만 캡쳐한 이미지 >>

 

이제 로그인 서블릿(member패키지 -> memberLogin 서블릿)에 아이디 기억하기 체크 값을 받도록 코드를 추가하자

( 코드가 길어 doPost 부분만 짤라왔음 )

// ...

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	// 파라미터 검증
	String id = ParameterUtil.getString(request, "id");
	String pw = ParameterUtil.getString(request, "pw");
	String rememberIdTemp = ParameterUtil.getString(request, "rememberId");
	
	if(!ParameterUtil.isId(id)) {
		response.setStatus(400);
		return ;
	} else if(!ParameterUtil.isPw(pw)) {
		response.setStatus(400);
		return ;
	} else if(!ParameterUtil.isRememberId(rememberIdTemp)) {
		response.setStatus(400);
		return ;
	}
	
	boolean rememberId = rememberIdTemp == null ? false : Boolean.valueOf(rememberIdTemp);
	
	CryptoUtil cu = new CryptoUtil();
	pw = cu.onewayEncryption(pw);
	
	MemberDto member = new MemberDto(id, pw, null, null);
	
	MemberService service = new MemberService();
	boolean result = service.correctIdNPw(member);
	
	if(result) {
		if(rememberId) {
			Cookie cookie = new Cookie("userId", id);
			cookie.setMaxAge(60 * 60 * 24 * 30);
			response.addCookie(cookie);
		}
	} else {
		response.setStatus(400);
	}
}

// ...

 

rememberId 파라미터 검증을 하기 위한 코드를 넣자

( util패키지 -> ParameterUtil 클래스 / 코드가 너무 길어 isRememberId 메서드만 짤라왔음 )

// ...

public static boolean isRememberId(String rememberId) {
	return rememberId == null || rememberId.equals("true");
}

 

코드를 설명하면...

파라미터 검증을 하기 위해 우선 전달 받은 값을 꺼냄(1)

그 후 rememberId 파라미터 값을 검증함(2)

로그인에 성공한 다음 사용자가 아이디 기억하기를 체크했다면(3) 쿠키에 저장할 아이디를 담아 반환(4)

---

여기까지 아이디 기억하기를 추가한 로그인 과정의 흐름을 살펴보자

아이디 기억하기를 체크하고 로그인 요청을 했을 때의 상황임

 

아직 아이디 기억하기가 완성되지 않았음

아이디 기억하기를 체크하고 로그인에 성공한 후 다음번에 접속했을 때 로그인 페이지에 아이디가 기입되있어야함

 

이제 로그인 페이지가 동적으로 바뀌어야함

동적인 페이지를 만드는 방법

1. JS를 사용

2. Servlet을 사용

3. JSP를 사용

여기서 우린 아직 JSP를 배우지 않았으므로 1, 2번을 사용해 동적인 로그인 페이지를 만들 수 있음

가장 간단한 방법은 1번임

 

<< 1. JS를 사용 >>

JS를 사용해 동적인 로그인 페이지를 만들려면 JS에서 이름이 userId 쿠키가 있는지 확인을 함

userId 쿠키가 있다면 해당 쿠키 값을 꺼내 아이디 입력란에 아이디를 표시하고 아이디 기억하기 체크 박스를 체크해야함

userId 쿠키가 없다면 현재 상태 그대로 아이디가 비어있고 아이디 기억하기가 체크 되어있지 않은 상태로 두면 됨

 

JS에서 쿠키를 사용하려면 Cookie 라이브러리를 추가해야함

Cookie 라이브러리를 추가하고 위에 설명한 과정을 구현한 코드를 보자

아래 코드는 로그인 페이지(WEB-INF 폴더 -> member 폴더 -> login.html)에 추가하면 됨

( 코드가 너무 길어 바꿔야하는 부분만 캡쳐 )

// ...

<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>

<script>
	let value = Cookies.get('userId');
	if(value != undefined) {
		$("#id").val(value);
		$("#rememberId").prop("checked", true);
	}
	
	$("button[role='submit']").on("click", function() {
		let id = $("#id").val();
		let pw = $("#pw").val();
		let rememberId = $("#rememberId").prop("checked");
		
		$.ajax({
			url: $("form").attr("action"),
			type: $("form").attr("method"),
			data: {"id": id, "pw": pw, "rememberId": rememberId},
			success: function() {
				location.href = "/member";
			},
			error: function() {
				alert("아이디 또는 비밀번호를 확인해주세요.");
			}
		});
	});
</script>

// ...

 

위에 설명했듯

JS 라이브러리를 추가(1)하고 userId 쿠키를 꺼냄(2)

userId 쿠키가 있다면 아이디 입력란에 아이디를 표시하고 아이디 기억하기 체크 박스를 체크함(3)

 

이제 서버를 시작하고 로그인을 할 때 [ 아이디 기억하기 ] 체크하지 않고 로그인을 해본 다음 로그인 페이지로 가보자

그 다음 [ 아이디 기억하기 ] 를 체크한 뒤 로그인을 해본 다음 로그인 페이지로 가보자

---

Servlet을 사용한 동적 페이지는 중요하지 않으므로 패쓰~!