네이버 로그인 API /javascript - neibeo logeu-in API /javascript

Question

네이버 아이디로 로그인은 서버 사이드 언어인 PHP나 Java로 개발한 웹 애플리케이션에도 적용할 수 있습니다. 또한 프런트엔드에서 사용하는 JavaScript를 사용해도 적용할 수 있습니다. API 호출 예

목차 Show

2.4 로고 이미지, 애플리케이션 이름 확인
오픈 API 이용 신청
등록 확인
3. 아이콘 다운
4. 다운 없이 아이콘 바꾸기

developers.naver.com

내가 지금 적용한 최신버전은 무려 2.0.2.... 부들....

결국 라이브러리 소스를 뜯어서 분석하는 초유의 사태가 발생 중이다...

따라서 분석하며 내가 까먹을까봐, 그리고 혹여나 다른 사람에게 미약하게 도움을 줄 수 있을까 해서 카테고리를 신설했다.

오늘의 첫 이슈는 바로 네이버 로그인 버튼이 커스텀이 안된다는 것....!

내가 만든 button 태그 혹은 a태그에 네이버 로그인 팝업창을 오픈할 수 있도록 클릭 이벤트를 만드는 것인데

네이버 라이브러리가 하는 짓을 보아하니 id값이 naverIdLogin 컴포넌트에 a 태그를 달고 그 안에 img 태그를 달아 버튼을 만들어 버린다.

따라서 html을 이렇게만 만들고 라이브러리를 적용한 뒤에

<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">
	var clientId = "내클라이언트ID"
    var callbackUrl = "내콜백URL"
    
    ...
    
	var naverLogin = new naver.LoginWithNaverId({
		 clientId: clientId,
		 callbackUrl: callbackUrl,
		 isPopup: true,
		 loginButton: {color: "green", type: 3, height: 50}		 
	});
</script>

DOM 작업이 끝나고 소스를 보면

...
<div id="naverIdLogin">
	<a id="naverIdLogin_loginButton" href="#">
		<img src="https://static.nid.naver.com/oauth/big_g.PNG?version=js-2.0.1" height="50">
	</a>
</div>
...

이렇게 만들어진다는 것..^^

해결법은 아주 간단하다.

naverIdLogin 이라는 id값을 가지는 태그를 display:none 해버리는 것이다.

그리고 Jquery를 이용해 내가 커스텀할 새로운 태그를 붙여서 클릭 이벤트 시 naverIdLogin의 자식 element 클릭이벤트로 연결만 하면 된다.

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

...

<!-- sns login -->
  ...
  <div id="naverIdLogin" style="display: none;"></div>
  <a href="#" id="naverLogin" class="btn sns-naver" title="새창">네이버로 로그인</a>
  <a href="#" id="kakaoLogin" class="btn sns-kakao" title="새창">카카오로 회원가입</a>
  <a href="#" id="googleLogin" class="btn sns-google" title="새창">구글 회원가입</a>
  ...
<!-- //sns login -->

<script type="text/javascript">
	
    ...
	var naverLogin = new naver.LoginWithNaverId({
		 clientId: clientId,
		 callbackUrl: callbackUrl,
		 isPopup: true,
		 loginButton: {color: "green", type: 3, height: 50}
		 
	});
	
	naverLogin.init(); //initialize Naver Login Button
	 
	$(document).on("click", "#naverLogin", function(){ 
		var btnNaverLogin = document.getElementById("naverIdLogin").firstChild;
		btnNaverLogin.click();
	});
	 
	...
</script>

간단하지만 고생하실 분이 있을까 이렇게 남겨놓는다.

참고로 네이버 디벨로퍼 개발문서를 확인해보면 이렇게 말한다.

2.4 로고 이미지, 애플리케이션 이름 확인

애플리케이션에 등록된 로고 이미지와 애플리케이션 이름이 정상적인지 확인합니다. 로고 이미지가 없거나 네이버가 연상되는 로고를 등록한 경우, 애플리케이션 이름이 네이버를 연상시키거나 비정상적인 경우(예: 애플리케이션 이름을 ‘네이버 로그인’ 또는 ‘로그인’ 등으로 입력) 사전 검수에서 반려됩니다.

로고 이미지와 애플리케이션 이름은 ‘네아로 정보제공동의 화면’에 노출되어 서비스의 브랜드를 나타내는 항목이며, 이용자 입장에서는 정보 제공 동의 전에 자신의 정보가 어떤 사업자에게 전달될 예정인지 식별할 수 있도록 돕는 중요한 정보입니다.

따라서 애플리케이션 설정 시 로고 이미지와 이름은 반드시 서비스 브랜드를 대표할 수 이미지와 이름으로 입력해 주세요.

https://developers.naver.com/docs/login/verify/verify.md#2-4-%EB%A1%9C%EA%B3%A0-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98-%EC%9D%B4%EB%A6%84-%ED%99%95%EC%9D%B8

네아로 사전 검수 가이드 - LOGIN

네아로 사전 검수 가이드 사전 검수가 어렵다면 이것만은 꼭 확인해 주세요 확인 항목 설명 1. 서비스 운영에 반드시 필요한 정보의 조회 권한만 선택했나요? ‘이용자 고유 식별자’ 외에 추가

developers.naver.com

로그인 버튼 사용 가이드

네이버 아이디로 로그인은 애플리케이션에 사용할 수 있는 네이버 로그인 버튼 기본 이미지를 제공합니다. 애플리케이션의 상황에 맞게 버튼 이미지의 디자인을 변경할 수 있지만 네이버 고유

예전 프로젝트의 로그인은 화면 간의 전환에서 id 관련 정보를 전달해서 유지하는 식으로 했었는데, 흔히 쓰이는 방법은 아니고 보안적으로도 아주 아주 취약해서 단순히 로그인 유지라는 기능만을 위해 적용했던 방법입니다.

이 부분이 항상 거슬렸는데 이번에 수정해보겠습니다.

1. 등록

오픈 API 이용 신청

https://developers.naver.com/products/login/api/api.md

링크로 이동해 페이지 하단의 [오픈 API 이용 신청]을 클릭합니다.

로그인이 안 되어 있었다면 네이버 로그인 창이 뜹니다. 로그인 해주세요!

약관 동의, 계정 정보 등록

잘 읽어보시고 동의 후 클릭, 클릭하고 애플리케이션 등록으로 넘어갑니다.

애플리케이션 등록

우선 애플리케이션 이름을 적고, 하나씩 채워갑니다.

사용 API

사용 API에선 사용하고자 했던 [네이버 아이디로 로그인]을 선택한 후 제공 정보에 대해 선택합니다.

전 이메일, 이름은 필수로 하고, 생일, 성별, 출생연도는 추가로 하였습니다.

로그인 오픈 API 서비스 환경

저는 [PC 웹]을 선택했습니다.

아직 배포 전이고 테스트 용이니 로컬 서버를 잘 입력해줍니다.

서비스 URL은 ‘네이버 아이디로 로그인하는 버튼’이 있는 페이지의 주소를 입력하시면 되고,

Callback URL은 네이버 아이디로 로그인한 뒤 다시 돌아 올 페이지의 주소를 입력해야합니다. 팝업 창에서 뜨는 페이지 입니다!

여기까지 했으면 [등록하기]!

등록 확인

내 애플리케이션에 잘 등록 되었습니다.

Client ID와 Client Secret은 로그인 오픈 API를 이용하기 위해 필요합니다. 다음을 참조해 주세요.

https://developers.naver.com/docs/login/api/api.md의 내용을 보기 쉽게 정리한 것입니다.

2. 코드

https://developers.naver.com/docs/login/api/api.md 여기에 들어가시면 API 호출 예제를 보실 수 있습니다.

JavaScript의 코드를 복사해서 일단 테스트를 진행해보았습니다. 아래에 스크린 샷을 첨부했습니다. 실제 코드는 바로 위 링크에서 볼 수 있으니 참고해주세요.

두 개의 파일을 추가해야 하는데 이름은 편한대로 해주세요.

저는 다음처럼 지었고, 이건 위에 적었던 서비스 URL과 callback URL과 동일합니다. 같게 해주세요!

naverLogin.html

callback.html

복사를 해왔다면 수정이 필요합니다.

YOUR_CLIENT_ID: 위에서 애플리케이션 등록하고 받은 Client ID를 복사해서 따옴표 사이에 붙여넣어 주세요.
YOUR_CALLBACK_URL: 입력했던 callback URL을 복사해서 따옴표 사이에 붙여넣어 주세요.
YOUR_SERVICE_URL: 입력했던 서비스 URL을 복사해서 따옴표 사이에 붙여넣어 주세요.

naverLogin.html, callback.html 두 개 다 수정해야 합니다.

하고 로컬 서버를 재시작 해주었습니다.

http://localhost:8080/naverLogin

아직 테스트 코드 자체라 아무 것도 없습니다.

로그인 버튼을 누르면 다음 팝업 창이 뜹니다. 현재 로그인 하지 않은 상태라면 네이버 로그인 창이 뜰 것입니다.

등록할 때 설정했던 필수 제공 항목, 추가 제공 항목 잘 나옵니다.

동의하기 누르면 팝업 창에서 Callback URL을 호출합니다.

http://localhost:8080/callback

복사해 온 코드를 확인해보면, alert로 이런 저런 것들을 띄우는데 잘 나오면 성공된 겁니다.

잘 나오네요.

성공입니다!

이제 저 페이지들을 어떻게 기존 프로젝트에 응용할지는 각자의 몫이겠죠!

3. 아이콘 다운

https://developers.naver.com/docs/login/bi/bi.md에서 로그인 버튼 아이콘을 다운 받을 수 있습니다.

다른 아이콘을 써도 되지만 네이버에서 권장하는 공식 디자인 특히 녹색을 권장하니 그것을 사용하도록 합시다.

4. 다운 없이 아이콘 바꾸기

naverLogin.html

var naver_id_login = new naver_id_login("CLIENT_ID", "CALLBACK_URL");
var state = naver_id_login.getUniqState();
naver_id_login.setButton("white", 2, 40);
naver_id_login.setDomain("SERVICE_URL");
naver_id_login.setState(state);
naver_id_login.setPopup();
naver_id_login.init_naver_id_login();

여기서 setButton 부분을 보면 “white”라는 부분이 있는데 버튼의 설정을 위한 파라미터 같길래 <head> 부분의 https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js 문서를 확인해 보기로 했습니다.

네이버 로그인 API React 네이버 로그인 네이버 로그인 테스트