지난편에서 네이버 로그인 API 사용을 위한 애플리케이션 생성에 대해 간단하게나마 알아 보았다. 이번 편에서는 팝업을 이용한 로그인 방식에 대해 알아 보도록 하자 

 

네아로 로그인 요청 시 필요한 정보는 네아로 개발가이드에도 자세히 나와있으니 함께 보면서 참고하도록 하자 

 

네이버 로그인 개발가이드 - 로그인 URL 
 
네이버 로그인 개발가이드 - LOGIN
네이버 로그인 개발가이드 - LOGIN
developers.naver.com/docs/login/devguide/devguide.md#3-4-2-%EB%84%A4%EC%9D%B4%EB%B2%84-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%97%B0%EB%8F%99-url-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0

 

 

네아로 로그인 - 팝업방식에 따른 샘플소스

네아로에서는 개발을 쉽게 하기위해 샘플소스를 제공하는데 해당 방식은 네아로 버튼까지 생성해서 주기 때문에 그대로 가져와서 사이트에 맞게  사용하면된다. 

(샘플참고: https://developers.naver.com/docs/login/api/api.md)

 

 

로그인(login.php)
<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>네이버 로그인</title>
  <script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
  
  <div id="naver_id_login"></div>

  <div class="wrap">
      <h1>네이버 로그인 응답데이터</h1>

      <table class="result">
      </table>
  </div>

  <script type="text/javascript">

  	/*세팅 사이트에 맞게 설정하세요*/
  	var clientID = 'naver-developers-t0001'; // 네아로 클라이언트 아이디
  	var callbackURL = 'http://test.redinfo.co.kr/naver/auth/callback.php'; // 네아로에서 설정한 CallBack URL 
  	var siteURL = 'http://test.redinfo.co.kr';  // 네아로에서 설정한 사이트 URL 

  	var naver_id_login = new naver_id_login(clientID, callbackURL);
  	var state = naver_id_login.getUniqState();
  	naver_id_login.setButton("white", 2,40);
  	naver_id_login.setDomain(siteURL);
  	naver_id_login.setState(state);
  	naver_id_login.setPopup();
  	naver_id_login.init_naver_id_login();
  </script>
	</body>
</html>

 

콜백(callback.php)
<!doctype html>
<html lang="ko">
<head>
  <title>네이버 로그인 콜백</title>
  <script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>

  <script type="text/javascript">
    /*세팅 사이트에 맞게 설정하세요*/
    var clientID = 'naver-developers-t0001'; // 네아로 클라이언트 아이디
    var callbackURL = 'http://test.redinfo.co.kr/naver/auth/callback.php'; // 네아로에서 설정한 CallBack URL 
    var siteURL = 'http://test.redinfo.co.kr';  // 네아로에서 설정한 사이트 URL 
    var resKey = {
      'id' : '동일인 식별 정보',
      'nickname' : '사용자 별명',
      'name' : '사용자 이름',
      'email' : '사용자 메일 주소',
      'gender' : '성별(F: 여성,M: 남성, U: 확인불가 )',
      'age' : '사용자 연령대',
      'birthday' : '사용자 생일(MM-DD 형식)',
      'profile_image' : '사용자 프로필 사진 URL',
      'birthyear' : '출생연도',
      'mobile' : '휴대전화번호',
    }

    var naver_id_login = new naver_id_login(clientID, callbackURL);

    try{
      $('.result',opener.document).append('<tr><th>접근권한 인증코드(access_token)</th><td>'+naver_id_login.oauthParams.access_token+'</td></tr>');

      // 네이버 사용자 프로필 조회
      naver_id_login.get_naver_userprofile("naverSignInCallback()");

      // 네이버 사용자 프로필 조회 이후 프로필 정보를 처리할 callback function
    }catch(e){
      alert('네이버 로그인 인증에 실패하였습니다.');
      window.self.close();
    }

    function naverSignInCallback() {
      $.each(resKey, function(key,des){
        var value = naver_id_login.getProfileData(key);
        if( typeof value == 'undefined'){ value = '알수없음'; }
        $('.result',opener.document).append('<tr><th>'+des+'('+key+')</th><td>'+value+'</td></tr>');        
      });

      window.self.close();
    }
  </script>
</body>
</html>

 

위의 샘플소스를 통해 로그인을 하게 되면 정상적으로 로그인에 성공할 시 아래와 같은 화면을 볼 수 있다.