[자동로그인]session&cookie 활용 자동로그인 구현 예제 로직 및 과정 vol.1

    $("#signIn-btn").click(function() {

            //자동로그인 반환할 변수
            const autoLogin = $('input[name=autoLogin]').is(":checked");
			
            console.log("auto : "+autoLogin);
			
            const userInfo = {
                    autoLogin : autoLogin
            };
			
            $.ajax({
                type: "POST",
                url: "/user/loginCheck",
                headers: {
	                "Content-Type": "application/json"
	            },
                data: JSON.stringify(userInfo),
                dataType : "text",
                success: function(data) {

                }
            });
			
    });

체크박스에 접근하여 논리값을 리턴해보도록 합니다.

id가 아닌 태그속성으로 지목하는 새로운방법입니다.

 $('input[name=autoLogin]').is(":checked");

is함수는 상태여부를 판단하여 논리값을 리턴합니다. 
select option에서는 :selected, radio나 체크박스는 :checked

선택자로 지목한 태그가 인풋 태그이면서 네임속성 값이 autoLogin인 애가 체크 되었는지 되었다면 true 되있지않다면 false 리턴받게됩니다

 

 

 

@PostMapping("/loginCheck")
public String loginCheck(@RequestBody UserVO inputInfo
	,HttpSession session,HttpServletResponse response) {
    

ajax로 넘겨받은 JSON데이터를 UserVO의 inputInfo 객체타입으로 받기 때문에 

public class UserVO{
    private boolean autoLogin;
	
    public boolean isAutoLogin() {
        return autoLogin;
    }
    public void setAutoLogin(boolean autoLogin) {
        this.autoLogin = autoLogin;
    }
}

UserVO클래스에 JSON에서 지정한 키와 일치하는 이름의 필드를 만들어줍니다.

이때 넘겨받은 타입이 true와 false이므로 타입을 boolean형으로 지정해줍니다.

 

 

아래는 자동로그인 구현 로직입니다.

 /*자동로그인 체크시 처리*/
if(inputInfo.isAutoLogin() == true) {
    //loginCookie라는 키로 세션아이디를 담아 쿠키를 생성합니다.
    Cookie loginCookie = new Cookie("loginCookie",session.getId()); 
    loginCookie.setPath("/");//쿠키의 저장경로는 기본 uri 경로 홈페이지 시작uri
    long limitTime = 60*60*24*90; //90일의 시간을 저장
    loginCookie.setMaxAge((int) limitTime);//초단위로 쿠키유지시간 설정
    //쿠키는 클라이언트에 보낼떄 응답객체에 담아서 보냅니다.
    response.addCookie(loginCookie);//response에 쿠키를담아 클라이언트에게 보냅니다.
    session.setAttribute("login", user);
    System.out.println("loginSuccess");
    result ="loginSuccess";
}

 

 

new연산자를 사용해 Cookie를 생성하며,

    Cookie loginCookie = new Cookie("loginCookie",session.getId()); 

쿠키안에 "loginCookie"라는 이름으로 sessionID값을 넣은 loginCookie 변수명을 가진 쿠키를 생성합니다.

loginCookie.setPath("/");

쿠키의 저장경로는 홈페이지의 시작 프로젝트의 path uri로 지정했으며 쿠키의 유효기간을 변수에 담아줍니다.

 

    long limitTime = 60*60*24*90;

이때 초단위로 담아야 하므로 초단위로 90일을 연산 계산하여 limitTime 변수에 담아줍니다.

    loginCookie.setMaxAge((int) limitTime);

유효기간을 담은 변수 limitTime을 setMaxAge()메서드를 호출하여 쿠키에 담아줌으로써 쿠키 유지기간을 설정해줍니다.

 

쿠키는 클라이언트에 보낼때 응답객체에 담아 보내야하므로

response.addCookie(loginCookie);

response객체를 통해 addCookie()메서드를 호출하여 response객체에 쿠키를 담아줍니다.

 

 

 

 

자동로그인을 체크하여 로그인을 한 후

F12개발툴을 열고 application탭의 좌측 카테고리에서 Storage의 Cookies를 눌러봅니다. 

JSESSIONID 라는 이름의 쿠키가 있습니다. 브라우저 실행시에 지정되는 세션아이디 또한 세션아이디를 담을 쿠키에 보관합니다. 이 세션아이디값을 담는 쿠키는 브라우저가 종료되면 새로운 세션을 생성해 내므로 새로운 값으로 변합니다.

loginCookie라는 쿠키도 존재합니다. 바로 이 쿠키가 세션아이디를 담아 로컬에 저장시킬 로컬 저장용 쿠키입니다.

바로옆칸의 숫자와 문자로 이루어진 긴 문자열이  sessionID값이며 지금 현재 자동로그인된 sessionID를 로컬쿠키에 고정시켜놓는것 입니다.

 

 

이제 브라우저를 종료한 후 다시 페이지로 돌아오면 로그인이 유지되어있으며

쿠키와 세션의 값이 달라져있습니다.

세션쿠키는 브라우저가 종료되면 아이디값이 변하지만 로컬저장용 자동로그인 쿠키는 이전의 자동로그인으로 인해 Cookie값이 로컬에 저장되어있기 때문에 변함이 없어집니다.

 

 

 

 

현재 로직에서는 세션아이디를 쿠키에 저장하며 이때, DB에 동시에 저장해야 하지만 DB에 저장하는 로직은 아직 구현하지 않았습니다.

만약 추가적인 로직이 들어가게된다면 세션아이디를 쿠키에 저장할때 동시에 DB에도 세션아이디를 저장할 컬럼에 저장해주는 로직이 추가될 것이며,

쿠키와 DB의 유효성을 검증해주는 로직은 추후 공통검증 역할을 해주는 인터셉터에서 처리하게될 것 입니다.

 

 

 

 

 

비밀번호 암호화 로직과 자동로그인을 합친 로그인 로직입니다.

@PostMapping("/loginCheck")
public String loginCheck(@RequestBody UserVO inputInfo
	,HttpSession session,HttpServletResponse response
			) {
    String result = null;
    UserVO user = service.selectOne(inputInfo.getAccount());
    BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();		
    if(user == null) {
        System.out.println("idFail");
        result = "idFail";
    }else {
        if(encoder.matches(inputInfo.getPassword(), user.getPassword())) {
            /*자동로그인 체크시 처리*/
            if(inputInfo.isAutoLogin() == true) {
                //loginCookie라는 키로 세션아이디를 담아 쿠키를 생성합니다.
                Cookie loginCookie = new Cookie("loginCookie",session.getId()); 
                loginCookie.setPath("/");//쿠키의 저장경로는 기본 uri 경로 홈페이지 시작uri
                long limitTime = 60*60*24*90; //90일의 시간을 저장
                loginCookie.setMaxAge((int) limitTime);//초단위로 쿠키유지시간 설정
                //쿠키는 클라이언트에 보낼떄 응답객체에 담아서 보냅니다.
                response.addCookie(loginCookie);//response에 쿠키를담아 클라이언트에게 보냅니다.
                session.setAttribute("login", user);
                System.out.println("loginSuccess");
                result ="loginSuccess";
            }
            session.setAttribute("login", user);//로그인에 성공하면 login이름으로 회원정보를 모두 담아버립니다. 
            //login이라는 데이터는 세션에 들어가는 시점이 로그인에 성공을 했을때의 시점에만 들어가게됩니다.
            System.out.println("loginSuccess");
            result ="loginSuccess";				
        }else {
            System.out.println("pwFail");
            result = "pwFail";
        }
    }
	    	
    return result;
}