쿠키(3) : 쿠키를 사용한 로그인 상태 유지

de_sj_awa·2021년 5월 21일

1. 쿠키를 사용한 로그인 상태 유지

웹 사이트의 기본 기능 중 하나는 로그인/로그아웃 기능이다. 웹 브라우저에서 페이스북이나 메일 서비스를 사용할 때 가장 먼저 하는 것이 로그인이다. 로그인하지 않은 상태에서 접근하면 로그인하도록 유도하는데, 이는 로그인했는지 여부를 확인할 수 있는 방법이 필요하다는 것을 뜻한다. 로그인 상태를 확인할 때 가장 많이 사용하는 방법이 바로 쿠키를 이용하는 것이다.

쿠키를 이용하면 다음과 같은 방법으로 로그인 상태를 유지할 수 있다.

로그인에 성공하면 특정 이름을 갖는 쿠키를 생성한다.
해당 쿠키가 존재하면 로그인한 상태라고 판단한다.
로그아웃하면 해당 쿠키를 삭제한다.

예를 들어, 로그인에 성공하면 "AUTH"라는 쿠키를 생성하고, "AUTH" 쿠키가 존재하면 로그인한 상태라고 인식하는 것이다.

2. 로그인 처리

쿠키를 이용해서 로그인 상태를 확인하는 코드를 만들기 전에 간단한 로그인 폼을 보여주는 JSP 코드를 작성하자. 아래 예제 코드는 간단한 로그인 폼을 생성해주는 JSP 코드이다.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>로그인폼</title>
</head>
<body>

<form action="<%=request.getContextPath()%>/member/login.jsp" method="post">
아이디 <input type="text" name="id" size="10">
암호 <input type="password" name="password" size="10">
<input type="submit" value="로그인">
</form>

</body>
</html>

loginForm.jsp를 실행하면 아래와 같은 결과가 출력된다.

[로그인] 버튼을 누르면 login.jsp로 입력한 데이터를 전송한다. 여기서는 쿠키를 이용한 로그인 기법을 익힐 것이므로 아이디와 암호가 같으면 로그인에 성공한다고 가정할 것이다. login.jsp는 아래 예제 코드와 같다.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="util.Cookies" %>
<%
    String id = request.getParameter("id");
    String password = request.getParameter("password");

    if(id.equals(password)){
        // ID와 암호가 같으면 로그인에 성공한 것으로 판단
        response.addCookie(Cookies.createCookie("AUTH", id, "/", -1));
%>
<html>
<head>
    <title>로그인 성공</title>
</head>
<body>

로그인에 성공했습니다.

</body>
</html>
<%
    }else { // 로그인 실패시
%>
<script>
alert("로그인에 실패하였습니다.");
history.go(-1);
</script>
<%
    }
%>

로그인에 실패하면 아래와 같은 화면을 출력한다.

3. 로그인 여부 판단

로그인에 성공했음을 나타내는 쿠키를 생성한 이후, 웹 브라우저는 요청을 보낼 때마다 쿠키를 전송한다. 그러므로 로그인에 성공할 때 생성되는 쿠키가 존재하는지 확인하면 현재 로그인했는지 여부를 판단할 수 있다. 따라서 로그인 여부를 판단하는 코드는 다음과 같은 형태를 띠게 된다.

Cookies cookie = new Cookies(request);
String id = cookies.getValue("AUTH");
if(id != null){
    // 로그인 한 경우의 처리
    ...
}else{
    // 로그인 하지 않은 경우의 처리
    ...
}

위의 login.jsp에서 생성한 AUTH 쿠키를 사용해서 로그인 여부를 확인하는 JSP 페이지는 아래 예제 코드와 같이 작성할 수 있다.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="util.Cookies" %>
<%
    Cookies cookies = new Cookies(request);
%>
<html>
<head>
    <title>로그인여부 검사</title>
</head>
<body>
<%
    if(cookies.exists("AUTH")) {
%>
아이디 "<%=cookies.getValue("AUTH")%>"로 로그인 한 상태
<%
    } else {
%>
로그인 하지 않은 상태
<%
    }
%>
</body>
</html>

loginCheck.jsp는 AUTH 쿠키가 존재하면 로그인을 했다고 판단한다. 아래와 같이 로그인한 상태에서 loginCheck.jsp를 실행하면 아래와 같은 화면을 볼 수 있을 것이다.

로그인하지 않은 상태, 즉 AUTH 쿠키가 없는 상태에서 loginCheck.jsp를 실행하면 다음과 같은 결과 화면이 출력된다.

예제에서 사용한 AUTH 쿠키는 로그인한 아이디를 값으로 가졌는데, 이는 어디까지나 쿠키의 사용 예를 보여주기 위해 그런 것이다. 아이디를 평문 형태로 쿠키 값으로 사용하면 보안에 큰 문제가 생긴다. 웹 브라우저는 자체적으로 개발도구를 제공하고 있는데 이 개발도구를 사용하면 쿠키 값을 쉽게 변경할 수 있기 때문에, 쿠키 값을 변경해서 서버에 전송할 수 있다. 즉, 다른 아이디로 서버에 접근할 수 있게 되는 것이다. 이런 이유로 쿠키에 아이디를 저장할 때에는 평문으로 저장하지 않고 다양한 암호화 방식을 혼합해서 사용한다.

4. 로그아웃 처리

로그인에 성공하면 쿠키를 생성하므로, 로그아웃을 처리하려면 쿠키를 삭제하면 된다. 이 장의 예제는 "AUTH" 쿠키를 사용하므로 아래 예제 코드와 같이 AUTH 쿠키의 유효시간을 0으로 지정하면 된다.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="util.Cookies" %>
<%
    response.addCookie(Cookies.createCookie("AUTH", "", "/", 0));
%>
<html>
<head>
    <title>로그아웃</title>
</head>
<body>

로그아웃하였습니다.

</body>
</html>

로그인한 상태라면 logout.jsp를 실행한 후 loginCheck.jsp를 실행해보자. logout.jsp를 실행하면 AUTH 쿠키를 삭제하므로, 다음과 같은 화면이 출력될 것이다.

참고

최범균의 JSP2.3 웹 프로그래밍

de_sj_awa

이것저것 관심많은 개발자.

이전 포스트

쿠키(2) : 쿠키 처리를 위한 유틸리티 클래스

다음 포스트

세션(1) : session 기본 객체

1개의 댓글

Denia

2022년 10월 25일

덕분에 좋은 내용 보고 갑니다.
감사합니다.

답글 달기