SpringbootSecurity/Springboot로 네이버 로그인 해보기 (yml에서 provider 설정하기)

저번 포스팅에서 이어갑니다.

 

provider

OAuth2-Client라는 라이브러리를 사용하고 있는데 OAuthClient를 재공해 주는 provider 있는데 Spring은 구글, 페이스북, 트위터 등등을 제공해준다.

그럼 당연히 네이버나 카카오같은 각 나라마다의 포털사이트를 Spring을 다 제공해주기엔 너무 많기 때문에 대표적인 것만 있는 것이다. 

그럼 이런 각 나라마다 포털사이트의 api를 사용하려면 그 포털사이트의 문서를 봐야 사용할 수 있다.

그럼 naverAPI를 받아오기 전에 yml설정부터 하면서 이해해야할 개념이 있다.

기본적으로 스프링 시큐리티가 OAuth2로그인을 사용할 때 OAuth2를 사용하기 위한 여러 가지 방식이 있다. Code방식 Client CredentialGrantType방식(리 엑트, 자바스크립트로 서버 구현할 때 쓰는 방식)

현제 프로젝트에서는 code방식을 사용해서 구현해 왔기 때문에 authorization_code를 사용했다.

그리고 Naver는 redirect-uri설정을 해 줘야 하는 이유 또한 provier를 스프링으로부터 제공받지 못하기 때문이다.

Naver는 uri가 google이나 facebook처럼 고정이 아니지만 규칙성을 위해서 통일시켰다.

이제 api를 받아오자

 

NaverAPI이용신청

 

https://developers.naver.com/main/

NAVER Developers

왼쪽은 데이터를 받을 파라미터를 선택하는 데이터,

오른쪽에 서비스 url은 말 그대로 서비스  url이고 Callback URL은 위 yml에서 설정해준 redirect-uri값을 적어주면 된다. 이런 방식이기 때문에 naver uri는 고정이 아니라고 한 것이다. 

등록을 완료하면 id/pw를 준다.

여기까지 하고 서버 저장을 하면 오류가 나는데 이제껏 잘 되었다면 아마 다음과 같은 오류일 것이다.

naver는 provider(제공자)가 아니기 때문에 오류를 발생시키는 것이다. 기본적으로 naver는 oauth2-client가 들고 있는 provider가 아니라는 뜻.

그래서 provider를 등록시켜야 한다.

https://developers.naver.com/docs/login/devguide/devguide.md#2-2-1-%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8

네이버아이디로그인 개발가이드 - LOGIN

네이버가 제공해주는 해당 문서를 잘 보면 provider설정 시에 필요한 uri를 문서에서 제공을 해준다.

 

provider에서 필요한 uri

provider설정까지 완료

그럼 위와 같이 provider를 설정해주면 어떤 식으로 발동을 하는지 알아보자

loginForm에 위와 같은 식으로 주소를 만들어놓으면(저 주소 형식은 oauth2-client에서 규칙으로 정해 놓은 것이기 때문에 바꿀 수 없다.) 저 a태그에 설정된 하이퍼링크를 타면 

provider설정에 authorization-uri에 주소를 타고 넘어가게 되는 것이다.

위 사진에서 getAttributes값을 보면 Attributes안에 프로필 정보가 있는 것이 아닌 Attributes안에 response가 회원의 정보를 들고 있다.

 

우리가 다뤄야 할 데이터

- getAttributes {resultcode=00, message=success,response={id=3 rz4 Hnh8 iBHYWUdfLX2 Ruf3 n2 QHBr4 Gf6 sMuU0 vzH7 Q, email=, name=}}

그리고 오류가 난 이유는 콘솔을 보면 우리가 찍어놓은 로그에 response값은 잘 들어온 것을 확인할 수 있는데 서버에서 값을 받지 못한다.

그 이유는 

구글과 페이스북만 지원하도록 해놨기때문

그렇기 때문에 설정을 바꿔줘야 한다. 

 

네이버 oauth설정

naver로그인 같은 경우는 attrubute에 값을 바로 받는 것이 아닌 attrubute안에 있는 response의 데이터가 우리가 필요한 회원의 프로필이기 때문에 위와 같이 설정해줬다. 그리고 생성자의 매개변수로 response의 값을 넣어줬다.

이렇게 설정해주면 

우리가 남긴 로그에 따라서 회원가입이 아주 잘 된 것을 볼 수 있다

db에도 null 값없이 데이터를 다 잘 받아냈다.

 

여기까지 oauth로그인을 해봤는데 여기까지 한 것이 무엇이냐면

springboot로 기본 로그인 + OAuth 2.0 로그인 = 통합해서 구현을 한 것이다.

그럼 이 서버를 통해서 웹 애플리케이션을 구현하면 되는 것이다.

그래서 이 프로젝트는 리 엑트에 컴포넌트처럼 내 깃에 박아놓고 유용하게 쓸 것이다.

 

https://github.com/fj2008/SpringbootSecurity

GitHub - fj2008/SpringbootSecurity