[Spring] 스프링 네이버 로그인 API 연동

Spring MVC 를 이용하여 네이버아이디로 로그인 적용하기

네이버 개발자 센터 !!!

↘↘↘↘↘↘↘↘(클릭 링크) 

네이버 로그인 -->>>>

다음 단계

로그인 시 표현 할 어플리케이션 이름 작성 

로그인 띄울 주소 & 로그인 완료  Callback.do (url)

▼▼▼▼▼▼

..........

Client ID 와 Client Secret  

사용하기 때문에 따로 적어 두길 !!

먼저 

프로젝트 Pom.xml  maven 설치 

추가 !!!!

.......

 package com.test.sts;

import java.io.IOException; LoginController.java

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.RequestParam;

import com.github.scribejava.core.model.OAuth2AccessToken;

/**

* Handles requests for the application home page.

*/

@Controller

public class LoginController {

    /* NaverLoginBO */

    private NaverLoginBO naverLoginBO;

    private String apiResult = null;

    

    @Autowired

    private void setNaverLoginBO(NaverLoginBO naverLoginBO) {

        this.naverLoginBO = naverLoginBO;

    }

    //로그인 첫 화면 요청 메소드

    @RequestMapping(value = "/users/naverlogin", method = { RequestMethod.GET, RequestMethod.POST })

    public String login(Model model, HttpSession session) {

        

        /* 네이버아이디로 인증 URL을 생성하기 위하여 naverLoginBO클래스의 getAuthorizationUrl메소드 호출 */

        String naverAuthUrl = naverLoginBO.getAuthorizationUrl(session);

        

        //https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=sE***************&

        //redirect_uri=http%3A%2F%2F211.63.89.90%3A8090%2Flogin_project%2Fcallback&state=e68c269c-5ba9-4c31-85da-54c16c658125

        System.out.println("네이버:" + naverAuthUrl);

        

        //네이버

        model.addAttribute("url", naverAuthUrl);

        /* 생성한 인증 URL을 View로 전달 */

        return "users/naverlogin";

    }

    //네이버 로그인 성공시 callback호출 메소드

    @RequestMapping(value = "/users/callback.do", method = { RequestMethod.GET, RequestMethod.POST })

    public String callback(Model model, @RequestParam String code, @RequestParam String state, HttpSession session)

            throws IOException {

        System.out.println("여기는 callback");

        OAuth2AccessToken oauthToken;

oauthToken = naverLoginBO.getAccessToken(session, code, state);

//로그인 사용자 정보를 읽어온다.

     apiResult = naverLoginBO.getUserProfile(oauthToken);

     System.out.println(naverLoginBO.getUserProfile(oauthToken).toString());

        model.addAttribute("result", apiResult);

        System.out.println("result"+apiResult);

/* 네이버 로그인 성공 페이지 View 호출 */

//      JSONObject jsonobj = jsonparse.stringToJson(apiResult, "response");

//      String snsId = jsonparse.JsonToString(jsonobj, "id");

//      String name = jsonparse.JsonToString(jsonobj, "name");

//

//      UserVO vo = new UserVO();

//      vo.setUser_snsId(snsId);

//      vo.setUser_name(name);

//

//      System.out.println(name);

//      try {

//          vo = service.naverLogin(vo);

//      } catch (Exception e) {

//          // TODO Auto-generated catch block

//          e.printStackTrace();

//      }

//      session.setAttribute("login",vo);

//      return new ModelAndView("user/loginPost", "result", vo);

        

        return "users/naverSuccess";

    }

}

........

package com.test.sts;                                           

import com.github.scribejava.core.builder.api.DefaultApi20;                 NaverLoginApi.java

public class NaverLoginApi extends DefaultApi20{

    

    protected NaverLoginApi(){

}

private static class InstanceHolder{

private static final NaverLoginApi INSTANCE = new NaverLoginApi();

}

public static NaverLoginApi instance(){

return InstanceHolder.INSTANCE;

}

    

    @Override

    public String getAccessTokenEndpoint() {

        

        return "https://nid.naver.com/oauth2.0/token?grant_type=authorization_code";

    }

    @Override

    protected String getAuthorizationBaseUrl() {

        // TODO Auto-generated method stub

        return"https://nid.naver.com/oauth2.0/authorize";

    }

}

...........

아까 

Client ID 와 Client Secret  작성

package com.test.sts;

import java.io.IOException;                                        NaverLoginBO.java

import java.util.UUID;

import javax.servlet.http.HttpSession;

import org.springframework.util.StringUtils;

import com.github.scribejava.core.builder.ServiceBuilder;

import com.github.scribejava.core.model.OAuth2AccessToken;

import com.github.scribejava.core.model.OAuthRequest;

import com.github.scribejava.core.model.Response;

import com.github.scribejava.core.model.Verb;

import com.github.scribejava.core.oauth.OAuth20Service;

public class NaverLoginBO {

/* 인증 요청문을 구성하는 파라미터 */

    //client_id: 애플리케이션 등록 후 발급받은 클라이언트 아이디

    //response_type: 인증 과정에 대한 구분값. code로 값이 고정돼 있습니다.

    //redirect_uri: 네이버 로그인 인증의 결과를 전달받을 콜백 URL(URL 인코딩). 애플리케이션을 등록할 때 Callback URL에 설정한 정보입니다.

    //state: 애플리케이션이 생성한 상태 토큰

    private final static String CLIENT_ID = "//네이버API Client ID"; //네이버API Client ID

private final static String CLIENT_SECRET = " //네이버 Secret";                      

private final static String REDIRECT_URI = "http://localhost:8080/users/callback.do";

private final static String SESSION_STATE = "oauth_state";

/* 프로필 조회 API URL */

private final static String PROFILE_API_URL = "https://openapi.naver.com/v1/nid/me";/// Api 종류 기본 !!

/* 네이버 아이디로 인증 URL 생성 Method */

public String getAuthorizationUrl(HttpSession session) {

/* 세션 유효성 검증을 위하여 난수를 생성 */

String state = generateRandomString();

/* 생성한 난수 값을 session에 저장 */

setSession(session,state);

/* Scribe에서 제공하는 인증 URL 생성 기능을 이용하여 네아로 인증 URL 생성 */

OAuth20Service oauthService = new ServiceBuilder()

.apiKey(CLIENT_ID)

.apiSecret(CLIENT_SECRET)

.callback(REDIRECT_URI)

.state(state) //앞서 생성한 난수값을 인증 URL생성시 사용함

.build(NaverLoginApi.instance());

return oauthService.getAuthorizationUrl();

}

/* 네이버아이디로 Callback 처리 및 AccessToken 획득 Method */

public OAuth2AccessToken getAccessToken(HttpSession session, String code, String state) throws IOException{

/* Callback으로 전달받은 세선검증용 난수값과 세션에 저장되어있는 값이 일치하는지 확인 */

String sessionState = getSession(session);

if(StringUtils.pathEquals(sessionState, state)){

OAuth20Service oauthService = new ServiceBuilder()

.apiKey(CLIENT_ID)

.apiSecret(CLIENT_SECRET)

.callback(REDIRECT_URI)

.state(state)

.build(NaverLoginApi.instance());

/* Scribe에서 제공하는 AccessToken 획득 기능으로 네아로 Access Token을 획득 */

OAuth2AccessToken accessToken = oauthService.getAccessToken(code);

return accessToken;

}

return null;

}

/* 세션 유효성 검증을 위한 난수 생성기 */

private String generateRandomString() {

return UUID.randomUUID().toString();

}

/* http session에 데이터 저장 */

private void setSession(HttpSession session,String state){

session.setAttribute(SESSION_STATE, state);

}

/* http session에서 데이터 가져오기 */

private String getSession(HttpSession session){

return (String) session.getAttribute(SESSION_STATE);

}

/* Access Token을 이용하여 네이버 사용자 프로필 API를 호출 */

public String getUserProfile(OAuth2AccessToken oauthToken) throws IOException{

OAuth20Service oauthService =new ServiceBuilder()

.apiKey(CLIENT_ID)

.apiSecret(CLIENT_SECRET)

.callback(REDIRECT_URI).build(NaverLoginApi.instance());

OAuthRequest request = new OAuthRequest(Verb.GET, PROFILE_API_URL, oauthService);

oauthService.signRequest(oauthToken, request);

Response response = request.send();

return response.getBody();

}

}

뷰페이지!!!!

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>          

naverLogin.jsp                          

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>LoginTest</title>

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

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<style type="text/css">

html, div, body,h3{

  margin: 0;

  padding: 0;

}

h3{

  display: inline-block;

  padding: 0.6em;

}

</style>

</head>

<body>

<div style="background-color:#15a181; width: 100%; height: 50px;text-align: center; color: white; ">

<h3>SIST Login</h3></div>

<br>

<!-- 네이버 로그인 화면으로 이동 시키는 URL -->

<!-- 네이버 로그인 화면에서 ID, PW를 올바르게 입력하면 callback 메소드 실행 요청 -->

<div id="naver_id_login" style="text-align:center"><a href="${url}">

<img width="223" src="https://developers.naver.com/doc/review_201802/CK_bEFnWMeEBjXpQ5o8N_20180202_7aot50.png"/></a></div>

<br>

</body>

</html>

........

↙↙↙↙↙↙↙

callback.do

-->>naversuccess.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

  pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>           naverSuccess.jsp

<!doctype html>

<html lang="ko">

<head>

<script type="text/javascript"

  src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.2.js"

  charset="utf-8"></script>

<script type="text/javascript"

  src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<style type="text/css">

html, div, body, h3 {

  margin: 0;

  padding: 0;

}

h3 {

  display: inline-block;

  padding: 0.6em;

}

</style>

<script type="text/javascript">

  $(document).ready(function() {

    var name = ${result}.response.name;

    var email = ${result}.response.email;

    $("#name").html("환영합니다. "+name+"님");

    $("#email").html(email);

   });

  //location.href = "${pageContext.request.contextPath}/";

</script>

</head>

<body>

  <div

    style="background-color: #15a181; width: 100%; height: 50px; text-align: center; color: white;">

    <h3>Naver_Login Success</h3>

  </div>

  <br>

  <h2 style="text-align: center" id="name"></h2>

  <h4 style="text-align: center" id="email"></h4>

  <script>

$(function () {

$("body").hide();

$("body").fadeIn(1000); // 1초 뒤에 사라 지자

setTimeout(function(){$("body").fadeOut(1000);},1000);

setTimeout(function(){location.href= "${pageContext.request.contextPath}/"},2000);

// 2초 뒤에 메인 화면 으로 가자

})

</script>

</body>

</html>

그리고 servlet-context.xml에 설정 하기 

<context:component-scan base-package="com.test.sts" />

bean 자동 찾기 설정 

로그인 시작 

naverLogin.jsp  페이지 

결과 창 !!!!!