[Javascript] Naver 로그인 버튼 커스텀하기

[Javascript] Naver 로그인 버튼 커스텀하기

 

요새 웹사이트 구축 프로젝트를 맡고 있는 와중에 핫한 SNS를 통한 간편 회원가입 / 로그인 기능을 구현하고 있다.

네이버, 카카오, 구글 세 가지 플랫폼을 적용하는 게 목푠데 첫 번째부터 난관에 봉착했다.

네이버 녀석들 쓰기가 굉장히 까다롭다는 점...!

 

심지어 네이버 측에서 제공하는 가이드, 샘플코드는 구버전 라이브러리를 사용하고 있다. (1.0.3)

https://developers.naver.com/docs/login/web/web.md

Web 애플리케이션 - LOGIN

내가 지금 적용한 최신버전은 무려 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

 

 

로그인 버튼 사용 가이드 

네이버 아이디로 로그인은 애플리케이션에 사용할 수 있는 네이버 로그인 버튼 기본 이미지를 제공합니다. 애플리케이션의 상황에 맞게 버튼 이미지의 디자인을 변경할 수 있지만 네이버 고유의 아이덴티티를 유지할 수 있도록 이 가이드에 제시된 디자인을 최대한 유지하는 것을 권장합니다.

https://developers.naver.com/docs/login/bi/bi.md

로그인 버튼 사용 가이드 - LOGIN

 

변경할 수 있다고 했으면서 막아버린 당신들은 대체...^^