네이버 간편로그인 기능 추가

어플이나 웹사이트에서 네이버나 다른 sns로 간편 회원가입 및 로그인 기능이 있는것을 많이 보셨을 것입니다.
해당 기관(https://developers.naver.com/products/login/api/api.md)에 api 신청 후 어떻게 사용 하면 되는지 간단하게 정리 해 보겠습니다.

login.html

<script th:inline="javascript">
    /*<![CDATA[*/ 
        var naver_id_login = new naver_id_login(/*[[${naverClientId}]]*/, /*[[${naverCallBackUrl}]]*/);
        var state = naver_id_login.getUniqState();
        naver_id_login.setButton("green", 1,60);
        naver_id_login.setDomain(/*[[${naverServiceUrl}]]*/);
        naver_id_login.setState(state);
        //naver_id_login.setPopup();
        naver_id_login.init_naver_id_login();
    /*]]>*/
</script>

clientId와 callBackUrl은 dev, prod 구분하여 사용하기 위해 properties에 작성 하였습니다.

 

callback.html

<script th:inline="javascript">
    /*<![CDATA[*/
        var naver_id_login = new naver_id_login(/*[[${naverClientId}]]*/, /*[[${naverCallBackUrl}]]*/);
        // 접근 토큰 값 출력
        console.log(naver_id_login.oauthParams.access_token);
        // 네이버 사용자 프로필 조회
        naver_id_login.get_naver_userprofile("naverSignInCallback()");
        // 네이버 사용자 프로필 조회 이후 프로필 정보를 처리할 callback function

        function naverSignInCallback() {
            console.log("naver_id_login.getProfileData('email')", naver_id_login.getProfileData('email'));
            console.log("contextPath",contextPath);
            console.log(result_code);
            console.log(session_max_inactive_interval);
            console.log(timeoutHandle);

            form_naver.action = contextPath + '/cert/naver1';
            form_naver.submit();
        }
      /*]]>*/
</script>

 

logout 기능 추가

function naverLogout() {
	openPopUp();
	setTimeout(function() {
		closePopUp();
		}, 1000);
}