본문 바로가기
Web/JavaScript

[JavaScript] 네이버 아이디로 로그인(네아로) 커스텀 버튼 구현

by HyunS_ 2021. 6. 28.
  • 네아로 SDK 에서 제공되는 샘프르 소스는 아래의 id와 연동 되어 있습니다.
<div id="naverIdLogin"></div>
  • 새로 생성하는 커스텀 버튼에 위의 ID를 입력하게 되면 커스텀 이미지가 사라지고 네이버 기본 이미지만 출력됩니다.
  • 커스텀 버튼을 사용하려면 아래와 같이 변경하면 됩니다.
<div id="naverIdLogin" style="display:none;"></div> <!-- 아래 커스텀 버튼 동작을 위해 필요.-->
<div class="social-login">
	<a href="#no" title="네이버ID로 로그인" class="naver-login" id="naverLogin"><i class="xi-naver"></i>네이버ID로 로그인</a> <!-- 커스텀 버튼-->
</div>
<!-- 네이버 로그인 입니다. -->
<script type="text/javascript">

    var naverLogin = new naver.LoginWithNaverId( {
        //clientId: "liqZ0CnaKtssP4JUaEmM",
        clientId: "vNk9GNWDj9nGmw8aXJpZ", // 내꺼
        callbackUrl: "http://susanmool.com/comuser/member/login/naver/callback.asp",
        isPopup: false, /* 팝업을 통한 연동처리 여부 */
        loginButton: {color: "green", type: 3, height: 62} /* 로그인 버튼의 타입을 지정 */
    } ); /* 설정정보를 초기화하고 연동을 준비 */
    naverLogin.init();


    // 네이버 로그인 소스에서 추가되는 부분
    $(document).on("click", "#naverLogin", function(){
        var naverLogin = document.getElementById("naverIdLogin").firstChild;
        naverLogin.click();
    });

</script>
728x90

댓글