Cookie

안녕하세요. owenCho 입니다. 오늘 포스팅은 cookie를 이용한 아이디 저장기능 입니다.

쿠키를 사용해서 아이디 저장 기능을 구현하려고 한다. checkbox를 클릭 후 로그인 시, 사용자의 아이디가 브라우저에 저장되어 다음에 로그인할때 cookie의 값인 사용자 아이디가 자동으로 입력된다. checkbox 해제 후 로그인 시에는 브라우저에 저장되어 있는 cookie 값인 userid를 삭제한다.

<div class="login-inp-area">
    <h1 class="login-logo">
    <ul class="login-inp">
        <li><input type="text" name="userId" placeholder="아이디"><?li>
        <li><input type="password" name="password" placeholder="비밀번호"><?li>
    </ul>
    <br>
    <input type="checkbox" name="idchk">&nbsp;아이디 저장
    <a href="#none" class="btn-login" id="loginbuttion">로그인</a>
</div>

---

브라우져 쿠키 존재유무를 기준으로 두 가지 케이스로 크게 분류했다. 로그인 버튼을 클릭했을때, 브라우져에 내가 원하는 쿠키(tokenId)가 있는지 확인해보자.

< login.jsp >

/*
    key, value 형태로 되어있는 cookie 값들중 원하는 key 추출
    document.cookie로 쿠키를 추출하면 이런 형태이다.
    "name=oeschger; userId=john; SameSite=None"
    이 중 userId의 value인 john을 추출해보자
*/
    function getCookie(cName){
        cName = cName + '=';
        var cookieData = document.cookie;
        var start = cookieData.indexOf(cName);
        var cValue = '';
        if(start != -1){
            start += cName.length;
            var end = cookieData.indexOf(';',start);
            if(end == -1){
                end = cookieData.length;
            }
            cValue = cookieData.substring(start,end);
        }
        return unescape(cVlaue);
    }

    $(document).ready(function(){
        //cookie data들중에 원하는 value 값 추출
        var cookieId = getCookie("tokenId");
        
        //cookieId가 있으면 복호화해서 아이디 자동 삽입
        if(cookieId){
            tokeId(cookieId);
            $('input[name=idchk]').prop('checked',true);
        }
    });

CASE A) 브라우져에 저장되어 있는 쿠키(아이디)가 없을때.

• 아이디 입력 → 아이디저장 체크박스 체크 유무 → 로그인버튼 클릭 → controller에 체크박스 체크 유무정보 및 userId 전달 → userId 암호화 → 암호화된 쿠키 저장

< loginController.java >

/*
    jsp딴에서 login 버튼 클릭시, ajax로 아이디, 비밀번호,
    아이디저장 checkbox 체크유무 등 여러 정보를 넘겨준다.
    checkbox가 true일때 : userId 암호화, cookie 생명연장, cookie 등록 
    checkbox가 false일때 : cookie 삭제
*/
    String checkbox = request.getParameter("checkbox");
    // userId 암호화 (아래 cryptoutil.java 참고)
    String userIdEncrypt = CryptoUtil.encrypt(userInfo.get("userId").toString());
    if(checkbox.equals("true")){
        //cookie 생성
        Cookie cookie = new Cookie("tokenId", userIdEncrypt);
        //cookie 생명주기 (초/분/시/일)
        cookie.setMaxAge(60*60*24*7);
        //설정한 cookie 정보 추가
        response.addCookie(cookie);
    }else{
        //cookie 초기화
        Cookie cookie = new Cookie("tokenId", "");
        //cookie 생명주기 0 -> 삭제
        cookie.setMaxAge(0);
        //설정한 cookie 정보 추가
        response.addCookie(cookie);
    }

< CryptoUtil.java >

@Component
public class CryptoUtil{
    private static String KEY;
    private static String IV;
    private static String CHARSET;
    
    //보안을 위해 설정파일에서 value 어노테이션으로 호출
    @Value("#{prop['설정에 저장한key name']}")
    public void setKey(String value){
        KEY = value;
        IV = KEY.substring(0, 16);
        CHARSET = "UTF-8";
    }

    //string 복호화
    public static String decrypt(String str){
        try{
            Cipher c = Cipher.getInstance("AES/CBC/PKCS5Padding");
            c.init(Cipher.DECRYPT_MODE
                    , new SecretKeySpec(KEY.getBytes(), "AES")
                    , new IvParameterSpec(IV.getBytes(CHARSET)));
            byte[] byteStr = Base64.decodeBase64(str.getBytes());
            
            return new String(c.doFinal(byteStr), CHARSET);
        }catch(Exception e){
            e.printStackTrace();
            return "";
        }
    }

    //string 암호화
    public static String encrypt(String str) throws Excepton{
        Cipher c = Cipher.getInstance("AES/CBC/PKCS5Padding");
        c.init(Cipher.DECRYPT_MODE
                , new SecretKeySpec(KEY.getBytes(), "AES")
                , new IvParameterSpec(IV.getBytes(CHARSET)));
        byte[] byteStr = c.doFinal(str.getBytes(CHARSET));
        return new String(Base64.encodeBase64(byteStr), CHARSET)
    }

}

CASE B) 브라우저에 저장되어 있는 쿠기(아이디)가 있을때.

• 브라우져 쿠키들중 암호화된 userId 추출 → 암호화된 userId 쿠키 복호화 → 복호화된 userId를 아이디 input창에 삽입

< login.jsp >

/*
    브라우져에 저장되어있는 암호화된 userId를 복호화해주기 위해
    ajax로 controller에 날려서 처리한다.
*/
    fucntion tokenId(cookieId){
        $.ajax(){
            datatype : "json",
            type     : "post",
            url      : "url"
            data     : {"tokenId":cookieId},
            success  : function(data){
                $("input[name=userId]").val(data.tokenId);
                if(data.tokenId == null || data.tokenId == '') {
                    $("input[name=idchk]").prop('checked', false);
                }
            }
        })
    }

< loginController.java >

/*
    jsp에서 가져온 암호화된 userId를 복호화해서
    userId input창에 삽입
*/
@RequestMapping("/url")
public ModelAndView tokenId(@RequestParam Map<String, Object> params){
    ModelAndView mv = new ModelAndView();
    String userIdEncrypt = (String)params.get("tokenId");
    // 암호화된 userId 복호화
    String userIdDecrypt = CryptoUtil.decrypt(userIdEncrypt);

    Map<String, Object> map = new HashMap<String, Object>();
    map.put("userIdDecrypt", userIdDecrypt);

    mv.addObject("tokenId", map.get("userIdDecrypt"));
    mv.setViewName("jsonView");
    return mv;
}