- 네이버 아이디로 로그인 구현 시 네이버 개발자센터에서 네이버 아이디로 로그인 - INTRO (naver.com) 에서 웹사이트를 등록 후 클라이언트 ID를 발급 받아야 합니다.
- 발급 완료 후 아래의 코드를 작성합니다.
[login.html]: 로그인 페이지 입니다.
<script type="text/javascript" src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.2.js" charset="utf-8"></script>
<script type="text/javascript">
var naverLogin = new naver.LoginWithNaverId( {
clientId: "클라이언트 id",
callbackUrl: "콜백URL",
isPopup: false, /* 팝업을 통한 연동처리 여부 */
loginButton: {color: "green", type: 3, height: 62} /* 로그인 버튼의 타입을 지정 */
} ); /* 설정정보를 초기화하고 연동을 준비 */
naverLogin.init();
</script>
[callback.html]: 콜백 페이지 입니다.
<script type="text/javascript" src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.2.js" charset="utf-8"></script>
<script>
var naverLogin = new naver.LoginWithNaverId(
{
clientId: "클라이언트 ID", // 내꺼
callbackUrl: "콜백URL",
isPopup: true,
callbackHandle: true
/* callback 페이지가 분리되었을 경우에 callback 페이지에서는 callback처리를 해줄수 있도록 설정합니다. */
}
);
/* (3) 네아로 로그인 정보를 초기화하기 위하여 init을 호출 */
naverLogin.init();
/* (4) Callback의 처리. 정상적으로 Callback 처리가 완료될 경우 main page로 redirect(또는 Popup close) */
window.addEventListener('load', function () {
naverLogin.getLoginStatus(function (status) {
if (status) {
/* (5) 필수적으로 받아야하는 프로필 정보가 있다면 callback처리 시점에 체크 */
// 유저 아이디, 이메일 주소, 이름을 Session에 저장하였습니다.
sessionStorage.setItem("user_info",naverLogin.user.id);
sessionStorage.setItem("naver_email", naverLogin.user.getEmail());
sessionStorage.setItem("naver_name", naverLogin.user.getName());
// 네이버 로그인과 카카오 로그인을 구분하기 위해 별도의 세션을 저장합니다.
sessionStorage.setItem("kinds","naver");
// 회원가입 혹은 로그인 시 처리하기 위한 페이지 입니다. 예를 들어 DB
/* 인증이 완료된후 /sample/main.html 페이지로 이동하라는것이다. 본인 페이로 수정해야한다. */
location.href = "/comuser/member/join/?flag=WRITE";
} else {
console.log("callback 처리에 실패하였습니다.");
}
});
});
</script>
- 네이버 로그아웃은 직접 만들어야 한다고 나옵니다.
- 유저 아이디를 세션에 저장하였기에 네이버 로그아웃은 세션을 지우는 것으로 처리하였습니다.
[logout.html]: 로그아웃 페이지 입니다.
function Logout(){
sessionStorage.clear();
}
728x90
'Web > JavaScript' 카테고리의 다른 글
[JavaScript] 네이버 아이디로 로그인(네아로) 커스텀 버튼 구현 (0) | 2021.06.28 |
---|---|
[JavaScript] 카카오 아이디로 로그인, 로그아웃 구현 (0) | 2021.06.27 |
DataTable 에서 SELECT 라벨 제거 (0) | 2020.12.02 |
[JavaScript] 숫자 입력 시 천단위로 콤마 출력하기. (0) | 2020.06.23 |
[JavaScript] 값 입력 할 때 숫자만 입력되도록 하기. (0) | 2020.06.23 |
댓글