[Security] OAuth2.0 네이버, 카카오 로그인 기능 추가

이번 포스팅에서는 지난 포스팅에 이어 OAuth2.0을 이용해 네이버와 카카오 로그인 기능을 추가해봅시다.

 

Spring Security에서는 Google, Twitter, Facebook과 같은 글로벌하게 사용되는 플랫폼에 한해서는 Provider를 지원하지만 네이버와 카카오와 같이 특정 나라에 한해서는 Provider를 별도로 지원하지 않습니다.

 

따라서 네이버, 카카오 소셜 로그인 기능을 추가하기 위해서는 애플리케이션 부가정보에 provider를 별도로 추가해 주어야 합니다.

 

Naver 로그인 API 발급 및 설정

Naver는 아래 네이버 개발자 사이트에서 API를 발급받고, Authorization URI 와 Token 발급 URI를 확인할 수 있습니다. 

사전 준비 사항 - Open API 가이드

 

Authorization URI , token_uri

user-info-uri

user-name-attribute

applicaiton.yml에 추가

provider:
  naver:
    authorization-uri: https://nid.naver.com/oauth2.0/authorize
    token-uri: https://nid.naver.com/oauth2.0/token
    user-info-uri: https://openapi.naver.com/v1/nid/me
    user-name-attribute: response

• 네이버는 Spring Security가 별도로 provider를 제공하지 않기 때문에 위 링크의 문서를 보고 별도로 만들어 줍시다.
• Naver에서는 요청 정보를 response 키에 담아서 리턴해준다고 하니, user-name-attribute를 response로 설정해줍시다.

naver:
  client-id: zmffkdldjsxmdkdleldlqslekfkawnlTjsej
  client-secret: qlalfdlqslekfkawnl
  scope:
    - name
    - email
  client-name: Naver
  authorization-grant-type: authorization_code
  redirect-uri : http://localhost:8080/login/oauth2/code/naver

• 위 링크에서 발급받은 클라이언트 아이디와 시크릿 키, 받아올 스코프, 클라이언트 이름, 코드를 발급받을 리다이렉트 URI를 지정해줍시다.
• authorization-grant-type : OAuth2.0 소셜 로그인 방식은 여러가지가 있지만, 구글과 마찬가지로 authorization_code 방식을 사용하므로 authorization_code로 지정해줍니다.

 

loginForm에 추가

<a href="/oauth2/authorization/naver">네이버 로그인</a>

• 이 href에서 /oauth2/authorization/{registrationId} 는 Spring Security에서 정해둔 양식이기 때문에 반드시 위의 형식에 맞춰주어야 application.yml에 설정해준 Authorization URI로 이동합니다. 위 형식은 꼭 지키도록 합시다.

---

Kakao 로그인 API 발급 및 설정

카카오는 아래 카카오 개발자 사이트를 통해 API를 발급받고, Authorizaiton URI와 Token 발급 URI를 확인할 수 있습니다.

Kakao Developers

authorization-uri : kapi -> kauth

token-uri

user-info-uri

application.yml에 추가

provider:
  kakao:
    authorization-uri: https://kauth.kakao.com/oauth/authorize
    token-uri: https://kauth.kakao.com/oauth/token
    user-info-uri: https://kapi.kakao.com/v2/user/me
    user-name-attribute: id

• 카카오또한 Spring Security가 별도로 provider를 제공하지 않기 때문에 위 링크의 문서를 보고 별도로 만들어 줍시다.
• 카카오에서는 요청 정보를 id 키에 담아서 리턴합니다. user-name-attribute를 id로 설정해줍시다.

kakao:
client-id: 55d6f3e6d86d66049f210faad338113f
client-secret: DzTWAOL22KXwKyZiaecjivShsBnQxSL7
scope:
  - profile_nickname
  - account_email
client-name: Kakao
redirect-uri: http://localhost:8080/login/oauth2/code/kakao
authorization-grant-type: authorization_code
client-authentication-method: POST

• 위 링크에서 발급받은 클라이언트 아이디와 시크릿 키, 받아올 스코프, 클라이언트 이름, 코드를 발급받을 리다이렉트 URI를 지정해줍시다.
• authorization-grant-type : OAuth2.0 소셜 로그인 방식은 여러가지가 있지만, 구글 네이버와 마찬가지로 authorization_code 방식을 사용하므로 authorization_code로 지정해줍니다.
• 주의할 점 : 카카오는 client-authentication-method를 반드시 POST로 지정해주어야 합니다.

 

loginForm에 추가

<a href="/oauth2/authorization/naver">네이버 로그인</a>

• 이 href에서 /oauth2/authorization/{registrationId} 는 Spring Security에서 정해둔 양식이기 때문에 반드시 위의 형식에 맞춰주어야 application.yml에 설정해준 Authorization URI로 이동합니다. 위 형식은 꼭 지키도록 합시다.

 

로그인 이후 후처리 서비스는 기존의 구글 로그인 후처리 서비스 클래스를 커스텀해서 구글,네이버, 카카오 모두 한 곳에서 처리하도록 리펙토링해봅시다.

---

PrincipalOauth2userService 리펙토링

우선 PrincipalOauth2userService에서 DB에 소셜 로그인 사용자 정보를 삽입하기 위해야 하는데, 플랫폼마다 Attribute의 name이 다르기 때문에 DB에 저장할 속성들을 공통 인터페이스로 하나 만들어 두고 플랫폼에 따라 구현체를 만들어서 각 플랫폼이 던져주는 attribute name에 맞게 수정해봅시다.

 

OAuth 사용자 정보 공통 인터페이스

// OAuth2.0 제공자들 마다 응답해주는 속성값이 달라서 공통으로 만들어준다.
public interface OAuth2UserInfo {
    String getProviderId();
    String getProvider();
    String getEmail();
    String getName();
}

 

- GoogleUserInfo

public class GoogleUserInfo implements OAuth2UserInfo {

    private Map<String, Object> attributes;

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

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

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

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

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

• 구글은 Provider Id는 sub, 이메일은 email, 이름은 name 의 attribute-name으로 리턴합니다.

- NaverUserInfo

public class NaverUserInfo implements OAuth2UserInfo {

    private Map<String, Object> attributes;
    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");
    }
}

• 네이버는 Provider id를 id, 이메일을 email, 이름을 name 의 attribute-name으로 리턴합니다.

- KakaoUserInfo

public class KakaoUserInfo implements OAuth2UserInfo {

    private Map<String, Object> attributes;

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

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

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

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

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

• 카카오는 id를 Long 타입으로, 이메일을 account_email로, 이름을 profile_nickname으로 리턴합니다.

- PrincipalOauth2UserService 리펙토링

@Service
@RequiredArgsConstructor
@Slf4j
public class PrincipalOauth2UserService extends DefaultOAuth2UserService {

    private final UserRepository userRepository;

    // 구글로 부터 받은 userRequest에 대한 후처리 함수
    // 함수 종료시 @AuthenticationPrincipal 어노테이션이 만들어짐.
    @Override
    public OAuth2User loadUser(OAuth2UserRequest userRequest) throws OAuth2AuthenticationException {

        OAuth2User oAuth2User = super.loadUser(userRequest);
        OAuth2UserInfo oAuth2UserInfo = null;

        if (userRequest.getClientRegistration().getRegistrationId().equals("google")) {
            oAuth2UserInfo = new GoogleUserInfo(oAuth2User.getAttributes());
        } else if (userRequest.getClientRegistration().getRegistrationId().equals("naver")) {
            oAuth2UserInfo = new NaverUserInfo((Map)oAuth2User.getAttributes().get("response"));
        } else if (userRequest.getClientRegistration().getRegistrationId().equals("kakao")) {
            oAuth2UserInfo = new KakaoUserInfo(oAuth2User.getAttributes());
        } else {
            log.info("지원하지 않는 소셜입니다.");
        }

        Optional<User> userEntity = userRepository.findByProviderAndProviderId(oAuth2UserInfo.getProvider(), oAuth2UserInfo.getProviderId());

        User user;
        if (userEntity.isPresent()) {
            user = userEntity.get();
            user.setEmail(oAuth2UserInfo.getEmail());
            userRepository.save(user);
        } else {
            user = User.builder()
                    .username(oAuth2UserInfo.getProvider() + "_" + oAuth2UserInfo.getProviderId())
                    .email(oAuth2UserInfo.getEmail())
                    .provider(oAuth2UserInfo.getProvider())
                    .providerId(oAuth2UserInfo.getProviderId())
                    .role("ROLE_USER")
                    .build();
            userRepository.save(user);
        }

        return new PrincipalDetails(user, oAuth2User.getAttributes());
    }
}

• 1. super.loadUser(userRequest) 를 통해 OAuth2.0 소셜 로그인 사용자에 대한 정보를 받아와 oAuth2user에 저장합니다.
• 2-1. 만약 받아온 정보의 Registration_ID가 "google"이면 GoogleUserInfo 생성
• 2-2. 만약 받아온 정보의 Registration_ID가 "naver"이면 NaverUserInfo 생성
• 2-3. 만약 받아온 정보의 Registration_ID가 "kakao"면 KakaoUserInfo 생성 
• 3. 받아온 정보(2에서 생성한 Info)를 토대로 Provider와 Provider ID로 DB에서 검색합니다 ( Spring Data JPA 쿼리 생성 )
  • 검색 -> 결과 없음 -> (2에서 생성한 Info를 토대로)엔티티 생성 및 저장
  • 검색 -> 결과 있음 -> (2에서 생성한 Info의 이메일만)엔티티 업데이트 
• 4. PrincipalDetails에 OAuth2 사용자 정보 및 attribute를 담아 리턴합니다.

---

<정리>

• 구글 소셜 로그인에 이어 네이버, 카카오까지 소셜 로그인부터 후처리까지 확장해보았습니다.

 

• OAuth 로그인 후처리 서비스를 한 곳에서 처리하는 과정 중, 각 소셜마다 리턴하는 attribute-name이 달라 인터페이스로 공통화 한 후, 플랫폼이 던져주는 형식에 맞춰 인터페이스를 구현하였습니다.

 

• 구글, 네이버, 카카오 모두 로그인 성공 시 code를 리다이렉션 URI에 전달해주는 authorization_code 방식을 채택하여 사용합니다.

 

• 소셜 로그인 확장에 따라 PrincipalUserDetailsService를 리펙토링 하였습니다.

 

<참고자료>

 

[Spring Security] OAuth 카카오 로그인하기

 

Kakao OAuth2 순서와 개념 정리