유혁의 개발 스토리

[Spring MVC] Java 네이버 로그인 연동 완벽정리(네아로) 본문

Spring

[Spring MVC] Java 네이버 로그인 연동 완벽정리(네아로)

유혁. 2018. 4. 18. 16:27

 

 

1. 네이버 로그인 목적

 

  요즘 회원가입 페이지에 네이버 아이디로 로그인 , 구글 아이디로 로그인, 페이스북 등등 개인정보를 연동하여 로그인 하는 방식이 늘고 있다. 장점은 새로운 페이지마다 회원가입을 하지 않고 진행 할 수 있는 장점이 있다. 하나의 아이디로 여러 홈페이지를 이용한다는게 개인정보 관리도 편하고 좋다고 생각한다. 필자도 홈페이지를 제작하는데 회원가입을 받는 페이지를 제작중이다. 로그인 방식을 구글로그인 방식을 쓰려했으나 국내는 네이버가 널리 알려져 있고 대부분의 사람들이 네이버 아이디가 존재한다. 네이버 아이디로 로그인 연동을 통해 개인정보를 수집하고 관리하기 위해 네이버 API를 사용 해 연동해보겠다.

 

 

2. 개발환경

 

  저는 Spring MVC 를 이용해 웹을 개발 중입니다. HTML은 jsp입니다. 네이버 API 연동방법이 홈페이지에 게시되어 있으나, 어느 API를 사용하던 처음에 접하기가 좀 어렵습니다. 네이버 로그인 연동 관련해서 깔끔하게 정리해서 이해쉽도록 설명해 많은 분들이 도움되셨으면 합니다.

 

 

 

3. 연동방법

 

- 네이버 개발자 센터 가입하기

 

  네이버 개발자 센터에 가입을 합니다. 네이버 아이디가 있으면 됩니다. 구글 API, Daum API와 사용법은 비슷합니다. https://developers.naver.com/main/ 에 접속하면 네이버 아이디로 로그인 창이 있습니다. 클릭합니다.

 

 

 

 

네이버 아이디로 로그인에 대한 간단한 설명들이 있습니다. 오픈 API를 신청을 클릭합니다.

 

 

 

 

 

 

로그인 이후 애플리케이션 등록 신청 항목이 나오는데 첫번째항목으로 애플리케이션 이름을 적어줍니다. 전 프로젝트 관련 이름으로 설정했습니다. 사용 API항목 보시면 우리는 네아로(네이버 아이디로 로그인) 이부분만 필요하므로 네아로를 추가해주고 체크박스만 보면 됩니다. 원하는 정보를 선택 해줍니다.

 

 

 

PC Web을 기준으로 하겠습니다.

환경을 선택해주면 서비스 URL, CallBack URL 을 입력해주어야하는데, 서비스 URL은 네이버로그인을 할 페이지 대표 URL을 입력하시면되고, CallBack은 네이버로그인에 대한 응답을 줄 URL을 입력하시면 됩니다.

 

 

 

 

등록이되면 정보들을 확인 가능합니다. Client ID 이따 필요한 항목이므로 기억해둡시다.

 

 

 

 

개요 옆에 API설정 부분 들어가보시면 로고를 추가하는 부분이 생겼습니다. 이미지를 추가해줍시다.

 

여기까지 환경설정이 끝났습니다.

 

 

 

 - Spring Controller 설정

 

 

우선 웹페이지를 보여주기위해 테스트로그인 컨트롤러를 만들어줍니다.

 

 

<html><body> 추가해 주셔야합니다. 태그 이용하다보니 삭제되네요 https://developers.naver.com/docs/login/api/  <- JSP 클릭하시면 소스 나옵니다.

 

naverlogin.jsp

 

수정해 주어야 할 부분은 YOUR_CLIENT_ID, YOUR_CALLBACK_URL 을 수정해주면 됩니다. 초반부에 Client id값은 생성하자마자 나온 값입니다. CallBack은 콜백받을 주소를 입력하시면 됩니다. 초기 생성 때 설정했던 주소입니다.

 

callback.jsp

 

 

만드는 김에 결과를 받을 페이지도 만들어줍니다. 여기에도 Client ID, Client secret, CallBack URL 이 필요하므로 추가해줍니다. 시크릿은 개요부분 클라이언트 아이디 밑에 있습니다.

 

 

컨트롤러에다 결과를 보여줄 페이지를 추가해줍니다.

 

여기까지 결과를 봅시다.

 

 

이런 값이 페이지에 보여질겁니다. API문서를 보면 이런 내용입니다.

 

 

 

개인정보를 얻기위해 우리가 써야할것은 access_token 입니다. 이 값을 기억합시다. 이따 복사할겁니다.

 

 

3번줄에 access_token 값을 넣어줍니다. expires_in이 3600으로 설정되어있어 이 토큰값은 1시간동안 유효합니다. 1시간뒤에는 토큰을 재발급 받아야합니다.

 

자 이제 호출해봅시다. ~~~personalInfo 주소를 치고 들어갑니다.

 

void형입니다. 404 에러 나오는게 맞습니다.! 에러아닙니다.

 

 

 

서버에서 값을 출력합니다. 개인정보라 블라인드 처리했지만 이렇게 개인정보를 받아 올 수 있습니다.

 

연동이 완료되었습니다.