[NAVER][NAVER LOGIN] 네이버 로그인 (네아로) for Java
1. Application Register
https://developers.naver.com/apps/#/register
애플리케이션 - NAVER Developers
developers.naver.com
네이버의 API를 사용하기 위해서 애플리케이션 등록을 하여야한다.
애플리케이션 이름과 사용할 API를 선택 하고 네이버 로그인의 경우
로그인할 경우 네이버로부터 받아올 정보를 로그인하는 사용자가 선택하게끔 하는데
거기서 필수 값과 선택값을 지정하는 것이다.
나같은 경우 회원이름, 이메일 주소, 성별을 필수로 하였고 출생연도를 사용자가 선택하게끔 하였다.
서비스 환경의 경우 나는 Spring Boot로 하여 작업할것이기 때문에 Web 으로 지정하였으며
서비스 URL 과 네이버 로그인 CallBack URL을 선택해야한다.
지금은 개발환경이기 때문에 localhost로 잡아놓았다. Callback URL의 경우 밑에서 다시 말하겠다.
애플리케이션 정보에 Client ID와 Client Secret이 발급된다.
2. Example Code
테스트 환경은 Spring Boot 로 간단하게 하였고 Rest 통신을 위한 라이브러리는 Spring WebClient를 사용하였다.
Spring 에서 RestTemplate 라이브러리도 있으나 Spring5 부터는 권장하지 않는다고한다.
View의 템플릿 엔진은 Thymeleaf 로 사용하였다.
전체적인 코드는 길어지므로 아래의 github repo 링크를 참고하면 된다.
https://github.com/TaehyunGong/APILIB/tree/master/Naver
GitHub - TaehyunGong/APILIB
Contribute to TaehyunGong/APILIB development by creating an account on GitHub.
github.com
우선 resources/templates/index.html 파일을 생성하고 버튼을 하나 만들었다.
네이버 로그인 이미지 파일은 아래 링크에서 받아볼수 있다.
https://developers.naver.com/docs/login/bi/bi.md
로그인 버튼 사용 가이드 - LOGIN
네이버 로그인은 애플리케이션에 사용할 수 있는 네이버 로그인 버튼 기본 이미지를 제공합니다. 애플리케이션의 상황에 맞게 버튼 이미지의 디자인을 변경할 수 있지만 네이버 고유의 아이덴
developers.naver.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<h1>Index Page</h1>
<!-- Naver Login Image & Button -->
<button onclick="showLoginPopup();"><img width="200" height="50" src="images/btnG_완성형.png"></button>
</body>
<script>
// 네이버 로그인을 위한 팝업창 생성
function showLoginPopup(){
let uri = 'https://nid.naver.com/oauth2.0/authorize?' +
'response_type=code' + // 인증과정에 대한 내부 구분값 code 로 전공 (고정값)
'&client_id=7GIne8NXVpOnxoKv9ecI' + // 발급받은 client_id 를 입력
'&state=NAVER_LOGIN_TEST' + // CORS 를 방지하기 위한 특정 토큰값(임의값 사용)
'&redirect_uri=http://localhost:8080/NaverLoginCallback'; // 어플케이션에서 등록했던 CallBack URL를 입력
// 사용자가 사용하기 편하게끔 팝업창으로 띄어준다.
window.open(uri, "Naver Login Test PopupScreen", "width=450, height=600");
}
</script>
</html>네이버 로그인 개발가이드 - LOGIN
네이버 로그인 개발가이드 1. 개요 4,200만 네이버 회원을 여러분의 사용자로! 네이버 회원이라면, 여러분의 사이트를 간편하게 이용할 수 있습니다. 전 국민 모두가 가지고 있는 네이버 아이디
developers.naver.com
위 HTML 에서 javascript 쪽 코드에 주석을 달아두었지만 각 필요한 value로 요청을 보내야한다.
서버를 실행시켜 Login 버튼을 누르면 Naver Login 페이지가 나오면 로그인시
이전에 어플리케이션에서 필수, 선택 값을 선택하라며 창이 나오는 것을 확인할 수 있다.
그 이후 Naver API로 부터 등록해놓았던 Callback URL에 응답을 받게 된다.
@Controller
public class NaverLogin {
@Autowired
private NaverLoginService service;
@GetMapping("/")
public String index(){
return "index";
}
@GetMapping("/NaverLoginCallback")
public @ResponseBody String NaverLoginCallback(@RequestParam Map<String, String> resValue){
// code 를 받아오면 code 를 사용하여 access_token를 발급받는다.
final NaverLoginVo naverLoginVo = service.requestNaverLoginAcceccToken(resValue, "authorization_code");
// access_token를 사용하여 사용자의 고유 id값을 가져온다.
final NaverLoginProfile naverLoginProfile = service.requestNaverLoginProfile(naverLoginVo);
return naverLoginProfile.toString();
}
}
그러면 이제 Callback URL을 핸들링 처리를 해주어야해서 위와같이 @Controller 단에 추가해주었다.
그럼 Naver로부터 Callback URL 으로 요청이 들어오게 되면 code와 이전에 입력했던 임의의 state 값을 파라미터로 받게된다.
이제 그 code와 state 를 가지오 access_tokin을 발급 받아야한다.
// code 를 받아오면 code 를 사용하여 access_token를 발급받는다.
final NaverLoginVo naverLoginVo = service.requestNaverLoginAccessToken(resValue, "authorization_code"); /**
* @description Naver 로그인을 위하여 Access_tokin을 발급받음
* @param resValue
* 1) code: 토큰 발급용 1회용 코드
* 2) state: CORS 를 방지하기 위한 임의의 토큰
* @param grant_type
* 1) 발급:'authorization_code'
* 2) 갱신:'refresh_token'
* 3) 삭제: 'delete'
* @return
*/
public NaverLoginVo requestNaverLoginAccessToken(Map<String, String> resValue, String grant_type){
final String uri = UriComponentsBuilder
.fromUriString("https://nid.naver.com")
.path("/oauth2.0/token")
.queryParam("grant_type", grant_type)
.queryParam("client_id", this.client_id)
.queryParam("client_secret", this.client_secret)
.queryParam("code", resValue.get("code"))
.queryParam("state", resValue.get("state"))
.queryParam("refresh_token", resValue.get("refresh_token")) // Access_token 갱신시 사용
.build()
.encode()
.toUriString();
return webClient
.get()
.uri(uri)
.retrieve()
.bodyToMono(NaverLoginVo.class)
.block();
}네이버 로그인 개발가이드 - LOGIN
네이버 로그인 개발가이드 1. 개요 4,200만 네이버 회원을 여러분의 사용자로! 네이버 회원이라면, 여러분의 사이트를 간편하게 이용할 수 있습니다. 전 국민 모두가 가지고 있는 네이버 아이디
developers.naver.com
Service 단에 requestNaverLoginAccessToken 메소드를 호출하였는데 매개변수로 Map과 "authorization_code" 문자열을 주입하였다.
Map은 Naver로 부터 건네 받은 code와 state가 담겨 있을것이며 "authorization_code" 은 새로 발급받기 위한 구분자이다. 자세한 구분자들은 위의 링크에 나와있으며
가이드에 적혀있는 방식대로 필요한 값들을 쿼리스트링으로 주어 받아낸다.
// access_token를 사용하여 사용자의 고유 id값을 가져온다.
final NaverLoginProfile naverLoginProfile = service.requestNaverLoginProfile(naverLoginVo); // ----- 프로필 API 호출 (Unique한 id 값을 가져오기 위함) -----
public NaverLoginProfile requestNaverLoginProfile(NaverLoginVo naverLoginVo){
final String profileUri = UriComponentsBuilder
.fromUriString("https://openapi.naver.com")
.path("/v1/nid/me")
.build()
.encode()
.toUriString();
return webClient
.get()
.uri(profileUri)
.header("Authorization", "Bearer " + naverLoginVo.getAccess_token())
.retrieve()
.bodyToMono(NaverLoginProfileResponse.class)
.block()
.getResponse(); // NaverLoginProfile 은 건네준다.
}그렇게 하여 access_token를 발급받게 된다면 발급받은 token을 사용하여 naver API로 부터 고유한 값을 DB에 해당 회원으로 회원가입이나 로그인시키기 위해서 받아와야한다.
그러면 나는 @Controller 에서 Callback 핸들링을 @ResponseBody 어노테이션을 사용하여 결과값만 조회하게되어
위와같이 출력되기 된다.
DB에 해당 id의 값을 비교하여 로그인된 회원인지 회원가입시켜야할 회원인지 구분하며 사용하면 될것 같다.