뉴히의 개발 로그
javascript로 네이버 소셜 로그인 구현하기 1 (로그인) 본문
네이버 개발자 센터 > application > 애플리케이션 등록
api 이용신청
애플리케이션 이름 넣고 사용할 API 선택 (네이버 로그인)
사이트에 필요하지 않은 정보까지 사용체크하면 검수시에 반려나니 사이트에서 보여지는 필요 정보들만 선택
서비스 URL 에 웹사이트 주소,
callback URL에 로그인 완료후 보여질 페이지 URL 등록
모두 넣고 등록하세요!
그리고
login 페이지와 callback 페이지 작업
https://developers.naver.com/docs/login/web/web.md
Web 애플리케이션 - LOGIN
네이버 로그인은 서버 사이드 언어인 PHP나 Java로 개발한 웹 애플리케이션에도 적용할 수 있습니다. 또한 프런트엔드에서 사용하는 JavaScript를 사용해도 적용할 수 있습니다. API 호출 예제 예제
developers.naver.com
네이버 개잘자 센터 documents > 네이버 로그인 > 튜토리얼에 자세히 나와있습니다.
그대로 파일 복붙해서 api신청후 생성된 Client ID랑 url만 잘 넣어주시면 됩니다.
login인증을 하면 로그인 정보를 callback URL로 보내줘 자동으로 로그인 정보를 받아올 수 있습니다.
SDK의 naver_id_login.getAccessToken() 함수를 통해 AccessToken 정보를 발급받을 수 있으며 발급받은 정보는 별도로 저장하여 이후 오픈 API호출 시 사용하도록 합니다.
NaverLogin.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="https://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"); //상태 토큰 비교를 위한 domain 설정
naver_id_login.setState(state);
naver_id_login.setPopup(); //Popup형태의 인증 진행
naver_id_login.init_naver_id_login();
</script>
</html>
네이버 로그인 버튼 사용 가능한 Option
버튼 색상 : white, green
크기 : 1(버튼형), 2(작은 배너), 3(큰 배너)
배너 및 버튼 높이 : 사용자 지정값
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="https://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() {
// naver_id_login.getProfileData('프로필항목명');
// 프로필 항목은 개발가이드를 참고하시기 바랍니다.
const email = naver_id_login.getProfileData('email');
const nickname = naver_id_login.getProfileData('nickname');
const name = naver_id_login.getProfileData('name');
const age = naver_id_login.getProfileData('age');
const gender = naver_id_login.getProfileData('gender');
const birthday = naver_id_login.getProfileData('birthday');
const mobile = naver_id_login.getProfileData('mobile');
let body = $('body');
body.append('로그인 성공!');
body.append('<h4>이름:'+name+'</h4>');
body.append('<h4>닉네임:'+nickname+'</h4>');
body.append('<h4>이메일:'+email+'</h4>');
body.append('<h4>나이:'+age+'</h4>');
body.append('<h4>성별:'+gender+'</h4>');
body.append('<h4>생일:'+birthday+'</h4>');
body.append('<h4>전화번호:'+mobile+'</h4>');
// 세션이나 로컬스토리지에 유저 정보 저장
localStorage.setItem("name", name);
sessionStorage.setItem("name", name);
}
</script>
</body>
</html>
네이버에서는 alert로 데이터를 제공하는 코드를 샘플로 제공하고 있고
확인을 위해 body에 띄워줍니다.
javascript로 네이버 로그인 소셜 로그인 구현하기2 (로그아웃)
https://newheee.tistory.com/136
'Javascript' 카테고리의 다른 글
| javascript로 네이버 로그인 소셜 로그인 구현하기2 (로그아웃) (0) | 2024.04.30 |
|---|---|
| javascript addEventListner Err 오류해결 (0) | 2023.06.05 |
| document read function을 순수 바닐라 자바스크립트로 (0) | 2023.05.27 |
| [Javascript] jQuery 'append()'를 바닐라자바스크립트로 작성해보기 - jQuery append() in Pure/Vanilla Javascript (0) | 2023.05.19 |
