본문 바로가기
Web/JavaScript

[JavaScript] 네이버 아이디로 로그인(네아로) 로그아웃 구현

by HyunS_ 2021. 6. 27.
  1. 네이버 아이디로 로그인 구현 시 네이버 개발자센터에서 네이버 아이디로 로그인 - INTRO (naver.com) 에서 웹사이트를 등록 후 클라이언트 ID를 발급 받아야 합니다.
  2. 발급 완료 후 아래의 코드를 작성합니다.

[login.html]: 로그인 페이지 입니다.

<script type="text/javascript" src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.2.js" charset="utf-8"></script>
<script type="text/javascript">
    var naverLogin = new naver.LoginWithNaverId( {
        clientId: "클라이언트 id",
        callbackUrl: "콜백URL",
        isPopup: false, /* 팝업을 통한 연동처리 여부 */
        loginButton: {color: "green", type: 3, height: 62} /* 로그인 버튼의 타입을 지정 */
    } ); /* 설정정보를 초기화하고 연동을 준비 */
    naverLogin.init();
</script>

[callback.html]: 콜백 페이지 입니다.

<script type="text/javascript" src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.2.js" charset="utf-8"></script>
<script>
    var naverLogin = new naver.LoginWithNaverId(
        {
            clientId: "클라이언트 ID", // 내꺼
            callbackUrl: "콜백URL",
            isPopup: true,
            callbackHandle: true
            /* callback 페이지가 분리되었을 경우에 callback 페이지에서는 callback처리를 해줄수 있도록 설정합니다. */
        }
    );

    /* (3) 네아로 로그인 정보를 초기화하기 위하여 init을 호출 */
    naverLogin.init();

    /* (4) Callback의 처리. 정상적으로 Callback 처리가 완료될 경우 main page로 redirect(또는 Popup close) */
    window.addEventListener('load', function () {
        naverLogin.getLoginStatus(function (status) {
            if (status) {
                /* (5) 필수적으로 받아야하는 프로필 정보가 있다면 callback처리 시점에 체크 */

                // 유저 아이디, 이메일 주소, 이름을 Session에 저장하였습니다.
                   sessionStorage.setItem("user_info",naverLogin.user.id);
                sessionStorage.setItem("naver_email", naverLogin.user.getEmail());
                sessionStorage.setItem("naver_name", naverLogin.user.getName());

                // 네이버 로그인과 카카오 로그인을 구분하기 위해 별도의 세션을 저장합니다.
                sessionStorage.setItem("kinds","naver");

                // 회원가입 혹은 로그인 시 처리하기 위한 페이지 입니다. 예를 들어 DB
                /* 인증이 완료된후 /sample/main.html 페이지로 이동하라는것이다. 본인 페이로 수정해야한다. */
                location.href = "/comuser/member/join/?flag=WRITE";
                } else {
                console.log("callback 처리에 실패하였습니다.");
            }
        });
    });
</script>
  1. 네이버 로그아웃은 직접 만들어야 한다고 나옵니다.
    1. 유저 아이디를 세션에 저장하였기에 네이버 로그아웃은 세션을 지우는 것으로 처리하였습니다.

[logout.html]: 로그아웃 페이지 입니다.

function Logout(){
    sessionStorage.clear();
}
728x90

댓글