스프링 - 네이버 로그인 구현 (네이버 아이디로 로그인)

1. https://developers.naver.com/docs/login/api/ (네이버 개발 관련 홈페이지) 로 접속하고, 오픈 API이용 신청

ㄱ. 사용 API에 전부다 체크

ㄴ. 서비스 URL (네이버 로그인 버튼이 있는 URL 주소) , Callback URL (로그인 한후 결과페이지 URL 주소)를 적어넣고,

애플리케이션 정보에서 Client ID와 Client Secret 를 메모장에 따로 적어놓기 (이따 사용함)

2. '네이버 아이디로 로그인하기 버튼'이 있는 페이지에서 다음의 코드를 추가 (나같은 경우는 login.jsp)

<center>
<script type = "text/javascript" src = "https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
 
<div id = "naver_id_login"></div>
 
<script type="text/javascript">
 
         var naver_id_login = new naver_id_login("DphfmDygX4WFkf8nghMJ", "http://localhost:8090/hansub_project/login_result");    // Client ID, CallBack URL 삽입
                                            // 단 'localhost'가 포함된 CallBack URL
         var state = naver_id_login.getUniqState();
        
         naver_id_login.setButton("white", 4, 40);
         naver_id_login.setDomain("http://localhost:8090/hansub_project/login");    //  URL
         naver_id_login.setState(state);
         naver_id_login.setPopup();
         naver_id_login.init_naver_id_login();
 
</script>
</center>

위와 같이 위에서 말한 4가지 정보중, Client ID, 서비스 URL, CallBack URL을 찾아서 삽입한다.

(주의할 점은, '127.0.0.1' 이 아닌, 'localhost' 가 포함된 CallBack URL을 넣는다는 것입니다.)

3. 로그인 후 처리 페이지 (login_result.jsp 페이지)

<script type="text/javascript">
        var naver_id_login = new naver_id_login("DphfmDygX4WFkf8nghMJ", "http://localhost:8090/hansub_project/login_result"); // 역시 마찬가지로 'localhost'가 포함된 CallBack URL
        
        // 접근 토큰 값 출력
        alert(naver_id_login.oauthParams.access_token);
        
        // 네이버 사용자 프로필 조회
        naver_id_login.get_naver_userprofile("naverSignInCallback()");
        
        // 네이버 사용자 프로필 조회 이후 프로필 정보를 처리할 callback function
        function naverSignInCallback() {
            alert(naver_id_login.getProfileData('email'));
            alert(naver_id_login.getProfileData('nickname'));
            alert(naver_id_login.getProfileData('age'));
        }
    </script>

위와 비슷하게 Client ID, CallBack URL을 찾아 삽입하면 되는데, CallBack URL은 위와 같이 'localhost' 가 포함된 주소를 삽입한다.

주석에 보이는 접근 토큰 (access token)으로 로그인한 회원의 '프로필 조회' 를 비롯한 여러가지 다른 오픈 API를 호출할 수 있다.

4. 컨트롤러는 위의 두가지 페이지로 가게 해주게 설정하면 된다.

    @RequestMapping(value="login", method=RequestMethod.GET)
    public String loginGET() {
        
        return "user/login";
    }
    
    @RequestMapping(value="loginPostNaver", method=RequestMethod.GET)
    public String loginPOSTNaver(HttpSession session) {
        
        return "user/loginPostNaver";
    }

출처

https://thiago6.tistory.com/44