ETC - 2021. 3. 10.

네이버로 로그인하기 API

안녕하세요 TriplexLab 입니다 :)

오늘은 자바스크립트로 네이버 로그인하는 방법에 대해서 살펴보도록 하겠습니다.

NAVER Developers

네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음

developers.naver.com

네이버 아이디로 로그인 클릭

오픈 API 이용 신청 클릭

처음 네이버 개발사이트에 접속하면 위와 같은 화면이 보입니다.

약관동의, 계정 정보 등록, 애플리케이션 등록 3단계 진행을 해주세요

애플리케이션 단계에서 서비스 URL
이라는 항목이 있는데 이곳에 실제 운영하고 있는 사이트 주소를 입력해주세요
(저는 테스트용이라서 localhost:5500/naver_login.html를 사용합니다)

그리고 바로 밑에
네이버아이디로 로그인 Callback URL 도 마찬가지로
실제 운영하고 있는 사이트 주소를 입력해주세요
(저는 테스트용이라서 localhost:5500/naver_callback.html를 사용합니다)

naver_login.html, naver_callback.html 경로를 잘 기억해주세요.
등록하기 버튼 클릭

그리고 네이버 developers 개발자 공식 사이트에서
개발 가이드 문서를 보면

다양한 언어들로 구현할수 있는데 선택 사항입니다.
저같은 경우에는 JavaScript를 좋아해서 JavaScript로 진행했습니다.

2. JavaScript로 네이버 아이디로 로그인 적용하기

'2. JavaScript로 네이버 아이디로 로그인 적용하기' 버튼을 클릭하면 해당 샘플코드 영역으로 이동합니다.
샘플 코드를 본인 로컬 에디터에 복사해서 테스트를 해보시면 됩니다.

2.3. 인증 시작하기

그리고 콜백 처리를 위해 콜백 페이지에 설정하는 코드부분도 찾으셔서 같이 테스트를 해보시면 됩니다.
(콜백 처리 예시 코드는 하단에 '2.3. 인증 사작하기 제목으로 있습니다.')

바로 시작해봅시다.

<html lang="ko">
<head>
<script type="text/javascript" src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js" charset="utf-8"></script>
</head>
<body>
<!-- 네이버아이디로로그인 버튼 노출 영역 -->
<div id="naverIdLogin"></div>
<!-- //네이버아이디로로그인 버튼 노출 영역 -->

<!-- 네이버아디디로로그인 초기화 Script -->
<script type="text/javascript">
	var naverLogin = new naver.LoginWithNaverId(
		{
			clientId: "개발자센터에 등록한 ClientID",
			callbackUrl: "개발자센터에 등록한 callback Url",
			isPopup: false, /* 팝업을 통한 연동처리 여부 */
			loginButton: {color: "green", type: 3, height: 60} /* 로그인 버튼의 타입을 지정 */
		}
	);
	
	/* 설정정보를 초기화하고 연동을 준비 */
	naverLogin.init();
	
</script>
<!-- // 네이버아이디로로그인 초기화 Script -->
</body>
</html>

소스 전체를 복붙해야 합니다.

clientId: "개발자센터에 등록한 ClientID"
callbackUrl: "개발자센터에 등록한 callback Url"
를 본인의 아이디와, URL로 바꿔주셔야 합니다.
개요라는 탭를 클릭하면 확인할수 있습니다.

clientId는 위에 사진처럼 여기에서 가져오면 되고요,
callbackUrl는 위에서 localhost:5500/naver_callback.html 파일이 있는 경로를 작성해주시면 됩니다.

다음은 콜백 처리를 위한 인증 코드 입니다.

<!DOCTYPE html>
<html lang="kr">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>NaverLoginSDK</title>
</head>

<body>

	callback 처리중입니다. 이 페이지에서는 callback을 처리하고 바로 main으로 redirect하기때문에 이 메시지가 보이면 안됩니다.

	<!-- (1) LoginWithNaverId Javscript SDK -->
	<script type="text/javascript" src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js" charset="utf-8"></script>


	<!-- (2) LoginWithNaverId Javscript 설정 정보 및 초기화 -->
	<script>
		var naverLogin = new naver.LoginWithNaverId(
			{
				clientId: "{YOUR_CLIENT_ID}",
				callbackUrl: "{YOUR_REDIRECT_URL}",
				isPopup: false,
				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처리 시점에 체크 */
					var email = naverLogin.user.getEmail();
					console.log(email); // 사용자 이메일 정보를 받을수 있습니다.
            		console.log(naverLogin.user); //사용자 정보를 받을수 있습니다.
                    if( email == undefined || email == null) {
						alert("이메일은 필수정보입니다. 정보제공을 동의해주세요.");
						/* (5-1) 사용자 정보 재동의를 위하여 다시 네아로 동의페이지로 이동함 */
						naverLogin.reprompt();
						return;
					}

					window.location.replace("http://" + window.location.hostname + ( (location.port==""||location.port==undefined)?"":":" + location.port) + "/sample/main.html");
				} else {
					console.log("callback 처리에 실패하였습니다.");
				}
			});
		});
	</script>
</body>

</html>

콜백 인증 처리 코드에서도 동일하게clientId, callbackUrl를 변경해주시면 되고요
콜백 인증 처리(사용자가 로그인 하면) 사용자 정보를 받으수 있습니다.

console.log(email); // 사용자 이메일 정보를 받을수 있습니다.
console.log(naverLogin.user); //사용자 정보를 받을수 있습니다.

👉실행 결과 화면

네이버 아이디로 로그인 버튼 클릭후
아래와 같은 화면이 보입니다.

동의하기 클릭하면 로그인이 된것 입니다.
그리고 미리 만들어 놓은 메인 페이지로 리다이렉트 됩니다.

👉로그 아웃

마지막으로 로그 아웃 할수 있는 방법에대해서 설명 드리면
네이버에서는 로그 아웃를 사용자가 직접 구현해야 한다고 합니다.

로그아웃을 하기 위해서는 접근한 토큰을 삭제를 해야 합니다.
'6.1.4. 접근 토큰 삭제 요청'에 있는 주소를 복사합니다.

그리고 client_id , client_secret , access_token들을 본인거에 맞에 변경합니다.

그리고 변경을 다 하셨다면 주소창에 붙여놓고, 엔터키를 누르면 토큰이 사라집니다.
그러면 다시 첨부터 네이버로 로그인 절차를 진행할수 있습니다.
(실무에서는 데이터를 바인딩 시켜서 동적으로 데이터 값들이 바뀌게 하면 됩니다.)

위에서 진행한 코드를 공유해 드립니다. 다운받아서 한번 연습해 보세요~
아래코드는 테스트 할때 무리가 없는 코드 이고, 테스트 하실때 본인 client_id , client_secret , access_token 정보만 잘 넣시면 됩니다.

👉파일 공유

위에서 작업한 코드 파일로 제공합니다. 궁금하시면 다운로드 받아가세요 😄😄👍🔥

naver_login.zip

0.00MB

저작자표시

Contents

새소식

인기 검색어

네이버로 로그인하기 API