[NAVER] 네이버 아이디 로그인 (네아로) API 적용

https://developers.naver.com/products/login/api/

위 링크로 접속해서 네아로 오픈 API를 신청해야한다.

https://developers.naver.com/docs/login/api/

개발 가이드에 원하는 언어로 스크립트를 따간다.

필자는 자바스크립트로 적용을 했다.

HTML 

<div id="naver_id_login"></div> //원하는 곳에 넣으면 된다.
<script type="text/javascript"> 
   var naver_id_login = new naver_id_login("오픈 API 발급 아이디", "처리페이지 URL"); 
   var state = naver_id_login.getUniqState(); 
   naver_id_login.setButton("green", 10, 40); // 버튼의 이미지 변경이다 
   naver_id_login.setDomain("도메인 주소"); 
   naver_id_login.setState(state); 
   naver_id_login.setPopup(); 
   naver_id_login.init_naver_id_login(); 
</script>

처리 페이지

<script type="text/javascript"> 
    //변경하지말고 두도록 하자
    var naver_id_login = new naver_id_login("YOUR_CLIENT_ID", "YOUR_CALLBACK_URL"); 

    naver_id_login.get_naver_userprofile("naverSignInCallback()"); 
    function naverSignInCallback() {
        //넘어온 토큰 값이랑 네이버 메일을 전송받고 다시 넘겨줌 
       opener.setRegisterValue(naver_id_login.oauthParams.access_token, naver_id_login.getP  rofileData('email'), window); 
        //닉네임과 나이
        //naver_id_login.getProfileData('nickname')); 
       //(naver_id_login.getProfileData('age'));
    } 
</script>

필자는 로그인 적용 후에 나중에 네아로를 적용한 것이라서 아이디와 토큰을 재 전송해주는 것
처리 페이지에서 바로 처리해도 됨.

로그인 체크 페이지
function setRegisterValue(token, email, winObj){ 
     //네아로 페이지 닫기
     winObj.close();

     var form = document.register_write_form; 

     // 원하는 곳에 토큰과 메일 아이디 삽입
    $("#token").val(token); 
    $("#email").val(email); 
    
     // 삽입 후에 form 전송
     form.submit(); 
}