[자바스크립트] 네이버 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp, 로그아웃

실제 구현 예

네이버 로그인 API (OAuth 2.0)

 

 클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않습니다. 또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하기 때문에 부담되고요. 이런 문제를 해결하기 위해, 구글이나, 페이스북, 네이버 같은 큰 기업들이 로그인 연동 기능을 제공하고 있습니다. 그중 네이버 로그인을 구현해 보겠습니다.

 

 

네이버 로그인 API 사용을 위한 애플리케이션 설정

 

개발의 흐름은 먼저 네이버 개발자 사이트에서 애플리케이션을 세팅을 한 후 사이트 코드를 작성해 주면 됩니다.

 

먼저 아래 사이트에서 로그인을 진행해 줍니다.

https://developers.naver.com/apps/#/register?api=nvlogin 

 

TYPE1

*네이버 디벨로퍼를 처음 쓰신 분

약관 동의 -> 계정 정보 등록 -> 어플리케이션 등록 순으로 진행됩니다.

사용 API 선택을 

아래와 같이 '네아로(네이버 아이디로 로그인)' 선택.

맨 아래 로그인 오픈 API 서비스 환경을 PC웹으로 선택하면 아래와 같은 화면이 나옵니다.

 

 

TYPE 2

*네이버 디벨로퍼를 처음 안 쓰신 분은 아래 화면으로 바로 나옵니다.

 

로그인을 진행하게 되면 애플리케이션 등록 페이지가 나옵니다. 

(Callback URL은 로그인 성공 시 요청되는 URL입니다.)

 

 

등록이 완료되면,

 

 

 

내 애플리케이션 정보를 확인하실 수 있습니다.

 

 

코드 - javascript & jsp

 

<script src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.2.js" charset="utf-8"></script>

 

단순하게 해당 코드를 사용하고자 하는 html페이지나 jsp페이지에 붙여놓습니다.

 

 

<ul>
	<li>
      <!-- 아래와같이 아이디를 꼭 써준다. -->
      <a id="naverIdLogin_loginButton" href="javascript:void(0)">
          <span>네이버 로그인</span>
      </a>
	</li>
	<li onclick="naverLogout(); return false;">
      <a href="javascript:void(0)">
          <span>네이버 로그아웃</span>
      </a>
	</li>
</ul>

<!-- 네이버 스크립트 -->
<script 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: "80mdf88flkWWJT1f93Tz", //내 애플리케이션 정보에 cliendId를 입력해줍니다.
			callbackUrl: "http://localhost:8181/naverLogin", // 내 애플리케이션 API설정의 Callback URL 을 입력해줍니다.
			isPopup: false,
			callbackHandle: true
		}
	);	

naverLogin.init();

window.addEventListener('load', function () {
	naverLogin.getLoginStatus(function (status) {
		if (status) {
			var email = naverLogin.user.getEmail(); // 필수로 설정할것을 받아와 아래처럼 조건문을 줍니다.
    		
			console.log(naverLogin.user); 
    		
            if( email == undefined || email == null) {
				alert("이메일은 필수정보입니다. 정보제공을 동의해주세요.");
				naverLogin.reprompt();
				return;
			}
		} else {
			console.log("callback 처리에 실패하였습니다.");
		}
	});
});


var testPopUp;
function openPopUp() {
    testPopUp= window.open("https://nid.naver.com/nidlogin.logout", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,width=1,height=1");
}
function closePopUp(){
    testPopUp.close();
}

function naverLogout() {
	openPopUp();
	setTimeout(function() {
		closePopUp();
		}, 1000);
	
	
}
</script>

 

Login

먼저 버튼으로 활용할 태그 안에 id="naverIdLogin_loginButton"를 입력해줍니다. 해당 id로 된 버튼을 클릭하게 되면 자동으로 네이버 로그인 페이지로 이동하게 되며, 로그인 및 동의 후에 내가 설정한 callbackUrl로 이동합니다.(위 예제는 다시 해당 페이지로 이동하는 것으로 진행했습니다.)

naverLogin.getLoginStatus함수는 현재 로그인이 진행되었는지 체크하며, true이면 console.log에 사용자 정보를 뿌려줍니다.

만약 필수 정보가 누락됐다면 , 변수에 담아(email처럼) 조건문으로 다시 동의 항목으로 이동하게(naverLogin.reprompt() 함수) 처리해줍니다. 


Logout

네이버는 이용자 보호를 위해 정책상 네이버 이외의 서비스에서 로그아웃을 수행하는 것을 허락하지 않는다고 합니다. 네이버에서 제공하는 http://nid.naver.com/nidlogin.logout 해당 링크는 로그아웃을 도와주는 링크로, 팝업을 실행했다가 종료하는 것으로 변칙적으로 로그아웃을 처리했습니다. 혹시 더 좋은 방법이 있으면 댓글로 남겨주시면 진심으로 감사하겠습니다.

 

정리

 

 네이버 디벨로퍼 홈페이지에서 네이버 아이디 로그인 예제의 스크립트 버전이 1.0.3입니다. 하지만 네이버에서 제공해주는 최신 버전은 2.0.2이며, 최신 버전으로 적용했을 땐 홈페이지에 작성된 예제가 작동하지 않아 시행착오를 겪었습니다. 뿐만 아니라 로그아웃에 대한 설명이나 예제가 없으며, 네이버 디벨로퍼 포럼에서 이러한 불편함을 겪은 많은 이용자의 질문이 있었지만 답변이 따로 없는 걸 보았습니다. 조금 불편하게 개발했지만, 제가 찾지 못한 것일 수 있어 부족한 점이 많을 수 있으니 잘못된 점은 댓글로 남겨주시길 부탁드립니다. 

 

 

 

카카오 로그인 구현 방법

tyrannocoding.tistory.com/49

[자바스크립트] 카카오 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp

 

 

페이스북 로그인 구현 방법

tyrannocoding.tistory.com/50

[자바스크립트] 페이스북 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp

 

 

구글 로그인 구현 방법

https://tyrannocoding.tistory.com/51

[자바스크립트] 구글 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp