지난편에서 네이버 로그인 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>
위의 샘플소스를 통해 로그인을 하게 되면 정상적으로 로그인에 성공할 시 아래와 같은 화면을 볼 수 있다.
Comment