네이버 아이디로 로그인은 Javascript를 이용해 구현하였다. 네이버 아이디로 로그인을 시작하기 전에 먼저 네이버 개발자 사이트에 어플리케이션을 등록해주어야한다.

애플리케이션 등록을 한다.

네이버 개발자 사이트

Application > 애플리케이션 등록 (사용API - 네아로 선택)

네이버 아이디로 로그인 샘플코드를 적용한다.

(네이버 로그인 JavaScript 예제는 2개의 파일로 구성되어 있습니다.)

로그인버튼이 노출되는 로그인 페이지

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript" src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.2.js" charset="utf-8"></script>

<!-- 네이버아이디로로그인 버튼 노출 영역 -->
<div id="naverIdLogin"></div>

<script type="text/javascript">
	/* 네이버아이디로로그인 초기화 Script */
	var naverLogin = new naver.LoginWithNaverId(
		{
			clientId: "${SYSTEM_NAVER_CLIENTID}",
			callbackUrl: "${SYSTEM_JSP_SITEURL}/login/snsNaverlogin", /* 애플리케이션에 등록한 callbackURL */
			isPopup: false, /* 팝업을 통한 연동처리 여부 */
			loginButton: {color: "green", type: 1, height: 60} /* 로그인 버튼의 타입을 지정 */
		}
	);
	
	/* 설정정보를 초기화하고 연동을 준비 */
	naverLogin.init();
	
</script>
  • 네이버 아이디 로그인 버튼 사용 가능한 Option
    버튼 색상 : white, green
    크기 : 1(버튼형), 2(작은 배너), 3(큰 배너)
    배너 및 버튼 높이 : 사용자 지정값

로그인버튼 클릭 시 callback처리되는 페이지

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!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.2.js" charset="utf-8"></script>

	<!-- (2) LoginWithNaverId Javscript 설정 정보 및 초기화 -->
	<script>
		var naverLogin = new naver.LoginWithNaverId(
			{
				clientId: "${SYSTEM_NAVER_CLIENTID}",
				callbackUrl: "${SYSTEM_JSP_SITEURL}/login/snsNaverlogin",
				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 phone = naverLogin.user.getMobile();
					if( phone == undefined || phone == null) {
						alert("휴대폰번호는 필수정보입니다. 정보제공을 동의해주세요.");
						/* (5-1) 사용자 정보 재동의를 위하여 다시 네아로 동의페이지로 이동함 */
						naverLogin.reprompt();
						return;
					}
					/* 인증이 완료된후 해당 페이지로 이동. 본인 페이지로 수정해야한다. */
					window.location.replace("${SYSTEM_JSP_SITEURL}/login/snsLoginWithPhone?snsType=N&phone=" + phone);
				} else {
					console.log("callback 처리에 실패하였습니다.");
				}
			});
		});
	</script>
</body>

</html>

결과화면

네이버로그인