코딩항해기
[API] 네이버 로그인 api NaverLogin 본문
네이버 로그인도 개발자 문서에 내용과 오류 관련한 해결법이 잘 정리되어있는 편이다.
다만 주의할 점은 어플리케이션을 등록할 때 콜백 URL가 반영이 느리거나 수정하면 잘 반영되지 않는 편인 것 같아 새로 개설할 때 제대로 적어야 이유없는 오류를 막을 수 있는 것으로 보인다. 사전에 콜백 URL, 도메인 등을 미리 정해두는 것이 좋다.
(네이버는 포트번호 포함해서 적어야한다)
API 신청하기
https://developers.naver.com/products/login/api/api.md
네이버 로그인 - INTRO
환영합니다 네이버 로그인의 올바른 적용방법을 알아볼까요? 네이버 로그인을 통해 신규 회원을 늘리고, 기존 회원은 간편하게 로그인하게 하려면 제대로 적용하는 것이 중요합니다! 이에 올바
developers.naver.com
해당 페이지에서 API 이용신청과 개발 가이드를 확인할 수 있다. 먼저 오픈 API 이용신청부터 진행하도록 하겠다.
그럼 바로 네이버로그인 api 신청이 추가된 애플리케이션 등록창이 뜬다.
먼저 이름을 작성하고, 네이버 로그인 했을 때 받아올 정보를 체크한다.
그리고 서비스 환경에서 PC 웹을 골라준다. 이때 콜백 URL이 될 수 있는 모든 URL을 적고, 서비스 URL에는 도메인을 작성하면된다. 이 때 처음 등록할 때 잘 등록해야 후에 이유없는 오류로 고생하지 않을 수 있다.
안 그럼 샤머니즘 믿게 됨
심사, 추가 테스트 아이디를 등록하지 않아도 개발자 본인의 아이디는 로그인이 가능하므로, 추가 등록은 하지 않아도 된다. 애플리케이션 설정이 끝나면 클라이언트 ID를 얻을 수 있다.
튜토리얼 확인하기
https://developers.naver.com/docs/login/web/web.md
Web 애플리케이션 - LOGIN
네이버 로그인은 서버 사이드 언어인 PHP나 Java로 개발한 웹 애플리케이션에도 적용할 수 있습니다. 또한 프런트엔드에서 사용하는 JavaScript를 사용해도 적용할 수 있습니다. API 호출 예제 예제
developers.naver.com
튜토리얼 Web 애플리케이션에 들어가면, 다양한 타입의 샘플 코드를 제공하고 있다.
그 중 Javascript로 진행할 예정인데, 먼저 코드를 확인해보면 login부분과 callback부분이 나눠져있는 것을 확인할 수 있다.
(JSP타입도 따로 샘플코드가 있긴한데 해당 타입도 JSP파일에 바로 넣어서 적용 가능하다.)
네이버 로그인 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>
callback URL을 로그인 페이지로 작성해 한 페이지로 작성하는 것도 가능할 것 같아 한 번 그렇게 구성해보았었는데,
그냥 로그인 할 때, 일반적인 상황에서는 문제가 발생하지 않지만 자동로그인으로 로그인 창 로딩 없이 바로 로그인이 완료된 상태에서 alert창을 띄우거나 모종의 이유로 해당 페이지가 바로 닫히지 않는 상태가 되면 로그인 창 화면이 나와버려서 별도의 빈페이지로 가져가는 것이 나을 것 같아 분리한 상태로 진행할 예정이다.
naver_id_login.setButton("white", 2,40);
진행하기 전에 앞서 이 부분을 수정하면 로그인 버튼의 모양을 바꿀 수 있는 것으로 보인다.
다만 구글 OAuth처럼 자동 태그 생성이나 태그 설명 페이지를 제공하지 않는 것 같다.
(일러스트레이터(ai)파일은 제공하고 있다.)
https://developers.naver.com/docs/login/bi/bi.md
로그인 버튼 사용 가이드 - LOGIN
네이버 로그인은 애플리케이션에 사용할 수 있는 네이버 로그인 버튼 기본 이미지를 제공합니다. 애플리케이션의 상황에 맞게 버튼 이미지의 디자인을 변경할 수 있지만 네이버 고유의 아이덴
developers.naver.com
white라고 적힌 부분이 색상 구분이고, 2가 적인 부분을 1로 바꿀 수도 있는데, 이 부분이 버튼의 종류를 정하는 것도 같다.
자세한 설명을 찾게 된다면 관련 설명을 추가하도록 하겠다.
예제
지난 번 정리했던 구글 로그인에 네이버를 추가했다. 네이버는 버튼 설정을 스크립트에서 진행하기 때문에 html태그는 하나 밖에 없다.
HTML부분 (JSP진행)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta charset="utf-8" />
<!-- 구글 로그인 JavaScript -->
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script type="text/javascript" src="js/loginGoogleAPI.js" defer></script>
<!-- 네이버 로그인 -->
<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
<!-- 네이버 로그인 외부 Js연결 defer를 작성하거나 window.onlaod 등의 처리 필요 -->
<script type="text/javascript" src="js/naverLogin.js" defer></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
section{display:flex;}
div{margin : 5px;}
</style>
</head>
<body>
<section id="content">
<section>
<%-- 구글 로그인 버튼 시작--%>
<div id="g_id_onload"
data-client_id="클라이언트 ID"
data-context="signin"
data-ux_mode="popup"
data-callback="handleCredentialResponse"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="icon"
data-shape="circle"
data-theme="outline"
data-text="signin_with"
data-size="large">
</div>
<%--구글 로그인 버튼 끝 --%>
<!-- 네이버 로그인 버튼 노출 영역 -->
<div id="naver_id_login"></div>
<!-- //네이버 로그인 버튼 노출 영역 -->
</section>
</section>
</body>
</html>
콜백 페이지 (JSP , 네이버 튜토리얼 적용)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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("hcTxahuo34mlruwlJ53w", "http://localhost:8088/apiTest/callback.jsp");
// 접근 토큰 값 출력
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>
이 때 age를 허용하지 않았기 때문에 undefined로 뜨는 것을 확인할 수 있었다. 허용한 정보는 제대로 뜬다.
로그인 페이지 외부 Js (네이버 튜토리얼 적용)
console.log('naverLogin');
//네이버 로그인 기본 설정
var naver_id_login = new naver_id_login("클라이언트 ID", "http://localhost:8088/apiTest/callback.jsp");
var state = naver_id_login.getUniqState();
naver_id_login.setButton("white", 1,40);
naver_id_login.setDomain("http://localhost:8088/apiTest/login.jsp");
naver_id_login.setState(state);
naver_id_login.setPopup();
naver_id_login.init_naver_id_login();
화면
오류 해결하기
https://help.naver.com/service/23029/category/5867?lang=ko
서비스 설정 오류 문제 : 네이버 로그인 고객센터
네이버 서비스 이용에 필요한 고객센터 도움말을 확인해 보세요. 검색과 스마트봇으로 더욱 쉽고 빠르게 궁금한 점을 해결할 수 있습니다.
help.naver.com
해당 페이지에 자세히 정리되어있다.
그런데, 진행할 때 로그인 할 수 없습니다. 에러가 발생한 적이 있었는데, 이 때 콜백 URL을 수정했는데도 불구하고 정상 진행이 되지 않는 적이 있었다.
일단 결론은 이 오류는 콜백 URL이 잘못되어서 발생한 오류가 맞다.
그런데 애플리케이션의 콜백 URL 수정이 바로 반영되지 않아서,,, 오류가 지속되었던 것으로 보인다...
성질 급한 한국인은 애플리케이션을 제대로 다시 만드는 것이 좋다^^ 연습도 하고...
'기타 > API' 카테고리의 다른 글
| [API] CKEditor5 간단하게 살펴보기 (클래식, 기본기능) (0) | 2024.09.14 |
|---|---|
| [API] CKEditor5 샘플 코드 다운로드하기 (0) | 2024.09.13 |
| [API] 카카오 지도 api KakaoMap (0) | 2024.09.11 |
| [API] 구글 로그인 API (구글 OAuth 2.0 웹 로그인) (0) | 2024.09.11 |
| [API] JAVA - 동적크롤링 (셀레니움4 Selenium +WebDriverManager) (5) | 2024.09.02 |
