-
[피식짐]네이버 로그인 API사용해보기프로젝트/피식짐 2021. 11. 14. 19:04
https://developers.naver.com/apps/#/register?api=nvlogin
애플리케이션 - NAVER Developers
developers.naver.com
여기서 시작하면된다.
여기서 필수에 표시안한거는 뒤에 코드로 정보를 불러올때 undefined로 나온다.
이렇게 등록을 해줬다.
애플리케이션 이름에 프로젝트 명을 적었고, 나는 웹 프로젝트를 진행하는 것이기 때문에
환경추가에 PC웹을 적어줬고,
아직 서버를 돌리는게 아니라 URL은 로컬호스트:포트번호를 적어줬다.
콜백URL에는 콜백함수를 넣은 html파일경로를 적어줬다.
그럼 ClientID와 ClientSecret이 나온다.
사실 ClientSecret은 로그인을 수행하는데에는 필요가 없고,
ClientID와 설장한 콜백URL을 알고있어야한다.
https://developers.naver.com/docs/login/api/api.md
네이버 로그인 API 명세 - LOGIN
'네이버 로그인 API는 네이버 로그인 인증 요청 API, 접근 토큰 발급/갱신/삭제 요청API로 구성되어 있습니다. 네이버 로그인 인증 요청 API는 여러분의 웹 또는 앱에 네이버 로그인 화면을 띄우는 AP
developers.naver.com
나는 스프링 환경에서 아래와 같은 html파일 두개를 생성해서 진행했다. (스프링을 사용했기에 내장 톰캣서버가 들어있어서 구동이 가능했다)
위 API명세 링크를 타고 들어가면 코드들이 나오는데 나는 JavaScript코드를 사용했다.
요 코드를 사용했고, 빨간 박스 안의 값만 변경해줬다.
실제사용코드 (index.html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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> <title>Document</title> </head> <body> <br><br> <!-- 네이버 로그인 버튼 노출 영역 --> <div id="naver_id_login"></div> <!-- //네이버 로그인 버튼 노출 영역 --> <script type="text/javascript"> var naver_id_login = new naver_id_login("pU42VRX2ZAi3vBdfTWmG", "http://localhost:8080/callback.html"); var state = naver_id_login.getUniqState(); naver_id_login.setButton("white", 2,40); naver_id_login.setDomain("http://localhost:8080/"); naver_id_login.setState(state); naver_id_login.init_naver_id_login(); </script> </body> </html>실제사용코드(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("pU42VRX2ZAi3vBdfTWmG", "http://localhost:8080/callback.html"); // 접근 토큰 값 출력 alert(naver_id_login.oauthParams.access_token); // 네이버 사용자 프로필 조회 naver_id_login.get_naver_userprofile("naverSignInCallback()"); // 네이버 사용자 프로필 조회 이후 프로필 정보를 처리할 callback function function naverSignInCallback() { console.log(naver_id_login.getProfileData('id')); console.log(naver_id_login.getProfileData('gender')); console.log(naver_id_login.getProfileData('name')); console.log(naver_id_login.getProfileData('age')); console.log(naver_id_login.getProfileData('mobile')); } </script> </body> </html>여기서 변경한 사항은, naverSignInCallback 함수이다.
alert()로 되어있는애들을 console.log()로 변경하여 콘솔로 값을 확인했다.
그리고 한가지 추가적으로 말할 것은 mobile정보를 얻고 싶으면, 좀 더 복잡한 과정을 거쳐야한다.
그냥 편하게 안된다고 생각하면 된다.
++) 위에서도 언급했지만 애플리케이션 등록할 때 '필수' 표시를 안한 정보는 불러올 수 없다.
'필수'로 얻어올 정보는 언제든지 바꿀 수 있으니 걱정말고!
반응형'프로젝트 > 피식짐' 카테고리의 다른 글
[피식짐]자바 개인프로젝트 시작 - 피그마, ERD설계 (0) 2021.11.13