네이버 로그인
소셜 로그인 기능 중에 프로젝트에서 네이버 로그인 기능을 사용하기로 했다. 공식 문서를 보면 꽤 자세하게 나온 편인데, 그 중에서도 JS를 통해서 구현해보기로 했다.
DB에 넣어서 회원 관리를 해볼 예정인데 그 과정까지 기록해봐야겠다.
application 등록
네이버 개발자 사이트의 애플리케이션 등록 페이지로 이동하면 네이버 로그인을 사용할 서비스를 등록할 수 있다.
본인은 프로젝트를 위해서 localhost로 등록해주었다.
등록을 완료하면 client ID로 고유값을 받을 수 있다.
멤버 관리
등록한 애플리케이션 항목에 들어가서 관리자ID와 테스터ID를 등록하면 로그인 서비스를 테스트해볼 수 있다. 정식 심사를 받지 않을 프로젝트이기 때문에 조원들의 네이버 ID를 등록해주었다.
JS를 통한 사용자 정보 조회
네이버 공식 튜토리얼에는 JS와 JSP, PHP, Node.js 등 다양한 언어를 통해서 네이버 로그인 개발 방법을 기술하고 있다.
가장 간단한 방식인 JS를 통한 로그인 구현을 해보았다.
아래 공식문서를 보자.
크게 두 가지를 구현하면 된다.
-
버튼과 callback 링크를 설정하는 코드가 1번이다.
script파일을 잘 이식해주고
js 코드 내에 발급받은 client ID와 callback주소, 서비스 주소를 기입하면 된다. -
callback 주소 내에서 js를 통해 정보를 받아오는 부분이 2번이다. 마찬가지로 cilent ID와 callback주소를 잘 기입하면 로그인한 사용자의 정보가 받아와진다. 이를 바탕으로 dp 가입 및 로그인 처리를 해주면 된다.
1. APIExamNaverLogin.html
<!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>
<!-- //네이버 로그인 버튼 노출 영역 -->
<script type="text/javascript">
var naver_id_login = new naver_id_login("YOUR_CLIENT_ID", "YOUR_CALLBACK_URL");
var state = naver_id_login.getUniqState();
naver_id_login.setButton("white", 2,40);
naver_id_login.setDomain("YOUR_SERVICE_URL");
naver_id_login.setState(state);
naver_id_login.setPopup();
naver_id_login.init_naver_id_login();
</script>
</html>
2. callback.html
<!doctype html>
<html lang="ko">
<head>
<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 naver_id_login = new naver_id_login("YOUR_CLIENT_ID", "YOUR_CALLBACK_URL");
// 접근 토큰 값 출력
alert(naver_id_login.oauthParams.access_token);
// 네이버 사용자 프로필 조회
naver_id_login.get_naver_userprofile("naverSignInCallback()");
// 네이버 사용자 프로필 조회 이후 프로필 정보를 처리할 callback function
function naverSignInCallback() {
alert(naver_id_login.getProfileData('email'));
alert(naver_id_login.getProfileData('nickname'));
alert(naver_id_login.getProfileData('age'));
}
</script>
</body>
</html>
공부와 일상