스프링 시큐리티와 OAuth2.0으로 로그인 기능 구현하기 - 네이버

이번에는 네이버 소셜 로그인을 구현해 볼 것이다.

 

네이버 API 등록

네이버 디벨로퍼의 openApi로 이동한다. 거기서 네이버 서비스를 등록해야 한다. 구글 콘솔에서 했던 것과 굉장히 비슷하다.

서비스 URL은 지금 로컬에서 하고 있기 때문에 http://localhost:8080/을 선택했다.

Callback URL은 http://localhost:8080/login/oauth2/code/naver를 선택했다.

 

application-oauth.properties에 등록하기

아쉽게도 네이버는 스프링 시큐리티에서 공식 지원을 하지 않는다고 한다. 그러므로 CommonOAuth2Provider에서 해주던 값들도 전부 수동으로 입력해야 한다ㅜㅜㅜㅜ

 

#registration
spring.security.oauth2.client.registration.naver.client-id=
spring.security.oauth2.client.registration.naver.client-secret=
spring.security.oauth2.client.registration.naver.redirect-uri={baseUrl}/{action}/oauth2/code/{registrationId}
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

# 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

이렇게 모두 수동으로 입력해주면 된다.

여기서 마지막에 user_name_attribute가 response인 이유는 네이버 회원 조회 시 반환되는 JSON 형태 때문이다.

반환될 때 response에서 데이터가 반환된다.

스프링 시큐리티에선 하위 필드를 명시할 수 없다.
최상위 필드만 user_name으로 지정 가능하다. 하지만 네이버의 응답값 최상위 필드는 resultCode, message, response이다.

 

스프링 시큐리티 설정 등록

지금까지 구현했던 코드에서 OAuthAttributes만 변경해 주면 된다. 네이버로 접속했는지 구글로 접속했는지만 추가해 주면 되는 것이다.

public static OAuthAttributes of(String registrationId, String userNameAttributeName, Map<String, Object> attributes){
    if("naver".equals(registrationId)){
        return ofNaver("id",attributes);
    }
    return ofGoogle(userNameAttributeName,attributes);
}

private static OAuthAttributes ofNaver(String userNameAttributeName, Map<String, Object> attributes){
    Map<String, Object> response = (Map<String, Object>) attributes.get("response");
    return OAuthAttributes.builder()
            .name((String) response.get("name"))
            .email((String) response.get("email"))
            .picture((String) response.get("picture"))
            .attributes(response)
            .nameAttributeKey(userNameAttributeName)
            .build();
}

이렇게 2개만 추가하면 된다. naver는 response로 받으므로 attributes에서 response인 것만 map으로 빼오면 된다. 그 후는 구글 때 했던 것과 같다.

 

실행

여기서 Naver Login을 누르면

이 페이지가 뜬다. 동의후에 로그인을 하면 된다.

그럼 이렇게 로그인한 모습을 볼 수 있다.

H2 DB에도 잘 데이터가 들어갔다!!