네이버 로그인 세번째로는 로그아웃을 하는 버튼을 만들어 보려고 합니다.
컨트롤러 수정
1편에서 적었던 콜백 구간에 추가를 해주겠습니다.
// 네이버 Callback호출 메소드
@RequestMapping(value = "naverLoginCallback.do")
public String naverCallback(ModelMap model,@RequestParam String code, @RequestParam String state, HttpSession session) throws IOException {
/* 네아로 인증이 성공적으로 완료되면 code 파라미터가 전달되며 이를 통해 access token을 발급 */
OAuth2AccessToken oauthToken = naverLoginBO.getAccessToken(session, code, state);
String apiResult = naverLoginBO.getUserProfile(oauthToken);
System.out.println("Naver login success");
model.addAttribute("result", apiResult);
return "main/main.tiles";
}
oauthToken이라는 토큰 생성
NaverLoginBO 수정
public class NaverLoginBO {
private final static String CLIENT_ID = "자신의 CLIENT_ID";
private final static String CLIENT_SECRET = "자신의 CLIENT_SECRET";
private final static String REDIRECT_URI = "자신이 작성한 로그인 성공시 url";
/* 프로필 조회 API URL */
private final static String PROFILE_API_URL = "https://openapi.naver.com/v1/nid/me";
public String generateState()
{
//난수 생성
SecureRandom random = new SecureRandom();
return new BigInteger(130, random).toString(32);
}
/* 네아로 인증 URL 생성 Method */
public String getAuthorizationUrl(HttpSession session) {
String state = generateState();
session.setAttribute("state", state);
/* Scribe에서 제공하는 인증 URL 생성 기능을 이용하여 네아로 인증 URL 생성 */
OAuth20Service oauthService = new ServiceBuilder()
.apiKey(CLIENT_ID)
.apiSecret(CLIENT_SECRET)
.callback(REDIRECT_URI)
.state(state)
.build(NaverLoginApi.instance());
return oauthService.getAuthorizationUrl();
}
/* 네아로 Callback 처리 및 AccessToken 획득 Method */
public OAuth2AccessToken getAccessToken(HttpSession session, String code, String state) throws IOException{
/* Callback으로 전달받은 세선검증용 난수값과 세션에 저장되어있는 값이 일치하는지 확인 */
String sessionState = (String)session.getAttribute("state");
if(StringUtils.equals(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;
}
/* 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();
}
}
페이지에서 뿌리기
먼저 토큰을 토대로 프로필 정보를 가져오게 되면 JSON형식으로 오게 된다. 먼저 변환을 해준 후 사용해야하지만 저는 보여주는 것에 의의를 두고 진행했습니다.
<div class="padd">
<h6>네이버 로그인 성공 화면</h6>
<hr />
<div id="resultCode" style="text-align:center"></div>
<div id="message" style="text-align:center"></div>
<div id="nickname" style="text-align:center"></div>
<div id="image" style="text-align:center"><img src=""></img</div>
<div id="age" style="text-align:center"></div>
<div id="gender" style="text-align:center"></div>
<div id="id" style="text-align:center"></div>
<div id="name" style="text-align:center"></div>
<div id="birthday" style="text-align:center"></div>
<a href="https://nid.naver.com/oauth2.0/token?grant_type=delete&client_id=${id}&client_secret=${pw}&access_token=${token}&service_provider=NAVER">로그아웃</a>
</div>
<script>
$(document).ready(function(){
var obj = JSON.parse('${result}');
$("#resultCode").text("결과코드 : " + obj.resultcode);
$("#message").text("결과메시지 : " + obj.message);
$("#age").text("나이 : " + obj.response.age);
$("#name").text("이름 : " + obj.response.name);
$("#birthday").text("생일 : " + obj.response.birthday);
$("#enc_id").text("무슨 아이디 : " + obj.response.enc_id);
$("#gender").text("성별 : " + obj.response.gender);
$("#id").text("아이디 : " + obj.response.id);
$("#name").text("이름 : " + obj.response.name);
$("#nickname").text("닉네임 : " + obj.response.nickname);
$("#image").children("img").attr("src", obj.response.profile_image);
});
</script>