[spring] Oauth2 (1) - 네이버 로그인 SDK를 사용하여 로그인 기능 구현(네아로)

애플리케이션 등록

네이버 로그인 api를 사용하기 위해서는 먼저 애플리케이션을 등록해줘야 한다.

애플리케이션 이름 / 제공 받을 정보를 선택하고 서비스 환경을 입력한 후 등록하기 버튼을 클릭한다.

 

 

 

네이버 개발자센터 내애플리케이션 정보

 

네이버 아이디로 로그인(네아로) 개발

1. HTML, javaScripts 소스

 

먼저, 로그인 페이지를 만든 후 아래 스크립트를 추가한다.

<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

 

네이버 로그인을 호출 할 영역에 버튼을 추가하고, 스크립트 소스도 아래와 같이 작성한다.

 

<div class="flex">
    <div id="naver_id_login"></div>
</div>

<script>

    var naver_id_login = new naver_id_login(
        "",  //clientId
        "http://localhost:8080/api/auth" //callback url
    );

    var state = naver_id_login.getUniqState();

    naver_id_login.setButton("white", 2,40);
    naver_id_login.setDomain("http://localhost:8080"); //service url
    naver_id_login.setState(state);
    naver_id_login.setPopup();
    naver_id_login.init_naver_id_login();
</script>

 

그럼, 아래의 이미지처럼 네이버 로그인 버튼이 생성된다.

네이버 아이디로 로그인 버튼 생성

 

로그인이 완료됐을 때 이동할 callback.html 페이지도 필요하다.

 

<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
<script src="../../js/jquery-3.5.1.min.js"></script>

<script>

    var naver_id_login = new naver_id_login(
        "",  //clientId
        "http://localhost:8080/home" //callback url
    );

    // 접근 토큰 값 출력
    console.log(naver_id_login.oauthParams.access_token);
    // 네이버 사용자 프로필 조회
    naver_id_login.get_naver_userprofile("naverSignInCallback()");

    // 네이버 사용자 프로필 조회 이후 프로필 정보를 처리할 callback function
    // 네이버 사용자 프로필 조회 이후 프로필 정보를 처리할 callback function
            function naverSignInCallback() {
                console.log(naver_id_login.getProfileData('email'));

                /**
                 * 애플리케이션 등록 시 신청한 정보들에 대해 받아와서 
                 * Controller로 넘겨주고 DB에 저장하는 로직이 필요하다.
                 */
                $.ajax({
                    type:'post',
                    url:'/login',
                    data:{
                        id : naver_id_login.getProfileData('id'),
                    },
                    success:function(res){
                        //성공하면 자식창 팝업은 닫아주고 부모창 함수를 호출하여 페이지를 이동시켜 준다
                        opener.locationFunction();
                        window.close();
                    },
                    error : function(err){
                        //에러처리
                    }
                })
            }

</script>

 

http://localhost:8080/api/auth#access_token=AAAANTXvRnGQhWy1D9GVRBZdXAlDlQBuU4qCIjqJJ1FH3xmRGbKnvEAdb7ADSb-tigvnPcdmScYDZjSegMQrFO5AUdM&state=4d0fe568-a8c4-4e4f-9930-ec4046b436b7&token_type=bearer&expires_in=3600

 

 

SDK를 사용하면 쉽고 간편하게 개발을 할 수 있다.

 

 

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

네이버 로그인 - INTRO