#1 네이버 개발자 센터에 접속
네이버 개발자 센터에 접속한 후 로그인을 하고 오픈 API 이용 신청을 합니다.
다음은 네이버 아이디로 로그인 오픈 API 신청 페이지입니다.
하단의 [오픈 API 이용 신청]을 눌러 다음으로 진행합니다.
https://developers.naver.com/products/login/api/api.md
#2 애플리케이션 등록 (API 이용신청)
자신에게 맞는 형태로 이름과 로그인 제공 정보를 선택.
서비스 환경 설정 등을 진행해 줍니다.
서비스 URL은 자신의 홈페이지 주소를, 로그인 Callback URL은 이후에 생성할 callback페이지를 연결할 주소입니다.
모든 설정을 완료하고 등록을 하면 Client ID와 Client Secret 코드가 등록된 페이지가 나타납니다.
이 코드들은 이후에 API를 사용하기위한 인증키처럼 사용됩니다.
#3 로그인 페이지 작성
Documents > 네이버 로그인 > 튜토리얼 페이지에서 언어별 API 호출 예제를 확인할 수 있습니다.
https://developers.naver.com/docs/login/web/web.md
네이버 로그인 JavaScript 예제는 2개의 파일로 구성되어 있습니다. (naverlogin.html, callback.html)
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>
#4 작동 테스트
APIExamNaverLogin.html의 코드에서
"YOUR_CLIENT_ID", "YOUR_CALLBACK_URL", "YOUR_SERVICE_URL"이라고 되어있는 부분과
callback.html에서
"YOUR_CLIENT_ID", "YOUR_CALLBACK_URL" 총 5곳을 자신에 정보로 변경해 줍니다.
*이때 callback주소는.html까지 입력합니다.
홈페이지에 업로드 한 후 로그인 버튼을 눌러보면 로그인 페이지가 나타나는데,
로그인을 하고나면 경고창이 4번 정도 발생합니다. 이 경고창이 나와야 정상적으로 콜백까지 연결이 잘 되었다는 뜻입니다.
(위 자바스크립 코드를 확인해보면 callback.html에 email, nickname, age를 받아와 alert으로 출력하도록 되어있습니다)
#5 간편하게 버튼 이미지 변경하기
로그인 페이지의 javascript 코드 중 naver_id_login.setButton("white", 2,40); 항목을 수정하는 것으로 특정 스타일로 쉽게 변경할 수 있습니다.
첫번째 값은 "white"와 "green"으로 색상을,
두번째 값은 1, 2, 3으로 각각 아이콘형, 축약형, 완성형으로,
세번째 값은 아이콘의 높이를 설정하여 크기를 조절해 줍니다.