12. 네이버 로그인 완료

네이버 로그인 하기 전 알아두어야 할 점

OAuth2-Client 라이브러리를 사용하였다.

기본적으로 Provider라고 있다. OAuth2-Client를 제공해주는 제공자이다.

기본적으로 스프링은 구글, 페이스북, 트위터 이런 것들을 기본 제공자로 제공을 해준다.

기본제공자에 당연히 네이버나 카톡은 없다.

왜냐하면 각 나라마다 대형 포탈사이트들이 있을 텐데 OAuth2-Client에 다 넣어놓을 수 없다.

각 포털사이트들마다 OAuth2-Client 즉 OAuth2를 사용할 떄 던져주는 getAttribute값이 이 정보가 다양하기 때문에 어떤 데서는 id:1234 담아줄 수도 있고 sub에 1234를 담아줄 수 도 있다.

(ex) facebook은 id에 1234 google은 sub에 1234를 담아줬다.)

각 나라별 포탈사이트에서 getAttribute에 어떤 정보를 담아서 주는지 알 수 없기 때문에 전부다 OAuth2-Client에서 만들어 놓을 수 없고 대표적으로 구글, 페북, 트위터만 Provider에서 제공을 해준다.

그러면 네이버는 기본 Provider가 아니기 때문에 Provider를 등록을 따로 해줘야한다.

그러므로 등록을 해보러가자

 

application.properties - oauth - naver login 설정

#oauth - naver login
spring.security.oauth2.client.registration.naver.client-id=클라이언트ID
spring.security.oauth2.client.registration.naver.client-secret=클라이언트시크릿
spring.security.oauth2.client.registration.naver.redirect-uri=http://localhost:8080/login/oauth2/code/naver
spring.security.oauth2.client.registration.naver.authorization-grant-type=authorization_code
spring.security.oauth2.client.registration.naver.scope=name,email,profile_image
spring.security.oauth2.client.registration.naver.client-name=Naver

authorization-grant-type

스프링 시큐리티가 OAuth를 사용할 떄 OAuth는 여러 가지 방식이 있다. 우리가 사용하는 방식은 코드를 부여받는 방식이다.

1. authorization_code 방식
2. JWT 방식(토큰 방식)
3. JWT + OAuth2.0 방식(토큰 방식)

---

참고링크

https://blog.naver.com/getinthere/222064999924

redirect-uri

기본 제공자들은 안적어줘도 원래 그렇게 설정이 되어있기 때문에 따로 적어주지않았지만

네이버는 기본 제공자에 속하지 않으므로 적어준다.

또한 기본 제공자라고 해서 다르게 설정을 하고 싶어 따로 적어준다면

원래 제공되는 부분과 충돌이 나서 오작동을 할 수 있다.

⇒ 원래 제동되기 때문에 위와 같이 설정이 되어있는 것이지만

spring.security.oauth2.client.registration.google.redirect-uri=http://localhost:8080/login/oauth2/code/google

 

다르게 적용하기 위해 아래와 같이 설정파일(application.properties, application.yml)에 적는다면 오작동이 일어날 수 있다.

spring.security.oauth2.client.registration.google.redirect-uri=http://localhost:8080/code/google

 

추가로 oauth2로그인시 http://localhost:8080/login/oauth2/code/ (고정url)+포털사이트명 인데

위에서는 그 부분 동일하게 가기위해 spring.security.oauth2.client.registration.naver.redirect-uri=**<http://localhost:8080/login/oauth2/code/naver**> 고정url+naver를 적어주었다. 꼭 고정url+naver라 적지않고 내 맘대로 적어도 된다.

 

네이버 개발자 센터 - 애플리케이션 등록

 

 

application.properties - oauth - naver login - 클라이언트ID,시크릿 넣어주기, Provider 설정

클라이언트ID를 넣어주세요. 클라이언트시크릿를 넣어주세요. 부분에 네이버에서 받은 클라이언트ID,시크릿을 넣어준다.

#oauth - naver login
spring.security.oauth2.client.registration.naver.client-id=클라이언트ID를 넣어주세요.
spring.security.oauth2.client.registration.naver.client-secret=클라이언트시크릿를 넣어주세요.
spring.security.oauth2.client.registration.naver.redirect-uri=http://localhost:8080/login/oauth2/code/naver
spring.security.oauth2.client.registration.naver.authorization-grant-type=authorization_code
spring.security.oauth2.client.registration.naver.scope=name,email,profile_image
spring.security.oauth2.client.registration.naver.client-name=Naver

 

결과

네이버로그인을 시도하면 오류가 난다.
why? 스프링에서 기본적으로 등록된 Provider가 아니기 때문에 Provider 설정도 추가로 해줘야한다.

 

코드 추가

spring.security.oauth2.client.provider.naver.user-name-attribute=response #회원정보를 json으로 받는데 reponse라는 키값으로 리턴 해준다.

개발가이드 문서를 통해 확인가능!

# provider
spring.security.oauth2.client.provider.naver.authorization-uri=https://nid.naver.com/oauth2.0/authorize
spring.security.oauth2.client.provider.naver.token-uri=https://nid.naver.com/oauth2.0/token
spring.security.oauth2.client.provider.naver.user-info-uri=https://openapi.naver.com/v1/nid/me
spring.security.oauth2.client.provider.naver.user-name-attribute=response
#회원정보를 json으로 받는데 reponse라는 키값으로 리턴 해준다.

 

 

loginForm.html - 네이버 로그인 링크 추가

네이버 로그인 버튼을 클릭하면 href=”/oauth2/authorization/naver” 로 되어있는데 요청시 application.properties에서 설정한 redirect-uri 가 호출이 되는 것을 확인 가능

spring.security.oauth2.client.registration.naver.redirect-uri=http://localhost:8080/login/oauth2/code/naver

    <a href="/oauth2/authorization/google">구글 로그인</a>
    <a href="/oauth2/authorization/facebook">페이스북 로그인</a>
    <a href="/oauth2/authorization/naver">네이버 로그인</a>
    <a href="/joinForm">회원가입을 아직 하지 않으셨나요?</a>

 

PrincipalOauth2UserService.java - naver로 로그인 할 경우 추가

• 네이버로 로그인 할 경우를 추가하고 NaverUserInfo 인터페이스를 만들어 네이버 로그인 시 우리가 원하는 정보를 가져오도록 한다.
• NaverUserInfo 인터페이스는 FacebookUserInfo 인터페이스를 복사하여 붙여주고 수정한다.

        // 회원가입을 강제로 진행
        OAuth2UserInfo oAuth2UserInfo = null;
        if(userRequest.getClientRegistration().getRegistrationId().equals("google")){
            System.out.println("구글 로그인 요청");
            oAuth2UserInfo = new GoogleUserInfo(oAuth2User.getAttributes());
        }else if(userRequest.getClientRegistration().getRegistrationId().equals("facebook")){
            System.out.println("페이스북 로그인 요청");
            oAuth2UserInfo = new FacebookUserInfo(oAuth2User.getAttributes());
        }else if(userRequest.getClientRegistration().getRegistrationId().equals("naver")){
            System.out.println("네이버 로그인 요청");
            oAuth2UserInfo = new NaverUserInfo(oAuth2User.getAttributes());
        }else{
            System.out.println("우리는 구글과 페이스북, 네이버만 지원");
        }

 

NaverUserInfo.java 생성 및 코드 수정

• NaverUserInfo 인터페이스는 FacebookUserInfo 인터페이스를 복사하여 붙여주고 수정하면된다.
• 단, FacebookUserInfo 인터페이스와 다른 부분은 동일하나 getProvider() 부분만 naver로 변경해준다.

package com.cos.security1.config.oauth.provider;

import java.util.Map;

public class NaverUserInfo implements OAuth2UserInfo{

    private Map<String,Object> attributes; // oauth2User.getAttributes()

    public NaverUserInfo(Map<String,Object> attributes){
        this.attributes = attributes;
    }

    @Override
    public String getProviderId() {
        return (String) attributes.get("id");
    }

    @Override
    public String getProvider() {
        return "naver";
    }

    @Override
    public String getEmail() {
        return (String) attributes.get("email");
    }

    @Override
    public String getName() {
        return (String) attributes.get("name");
    }
}

 

결과

네이버로그인을 시도하면 정보를 가져온것은 확인되나 안에 response라고 해서 다시 배열로 담아서 가져오는 것이 확인된다.

⇒ 그러면 response 값을 꺼내와야한다는 것을 알 수 있다.

 

PrincipalOauth2UserService.java - 네이버 로그인일 때 if문 수정

• oAuth2User.getAttributes().get("response") getAttribute에서 response 부분을 꺼내오면된다.
• 추가로 getAttribute() return 타입이 Map이 되어야 한다.

 

정리하자면

        }else if(userRequest.getClientRegistration().getRegistrationId().equals("naver")){
            System.out.println("네이버 로그인 요청");
            oAuth2UserInfo = new NaverUserInfo(oAuth2User.getAttributes());
        }

 

oAuth2User.getAttributes() 을 정보를 가져왔는지 먼저 보면 아래와 같이 나온다.

 

메모장에 보기 편하게 보자면 아래와 같이 나오는건데

여기서 response는 application.properties 에서 설정한 키 값을 가져오는 것이다.

spring.security.oauth2.client.provider.naver.user-name-attribute=response

 

그러면 response 키에서 값 중 response값을 가져와야한다는 것을 확인 가능한데 어떻게 가져오냐하면 oAuth2User.getAttributes().get("response") get()에 “response”을 넣어줌으로써 가져올 수 있다.

        }else if(userRequest.getClientRegistration().getRegistrationId().equals("naver")){
            System.out.println("네이버 로그인 요청");
            oAuth2UserInfo = new NaverUserInfo((Map) oAuth2User.getAttributes().get("response"));
        }

 

결국엔 PrincipalDetails타입으로 소셜 로그인가능!