네이버 간편로그인(SSO, oauth2)

1. 네이버 api 이동

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

NAVER Developers

2. 네이버 아이디 로그인 클릭

 

3. 오픈 API 이용 신청 클릭

 

4. 아래와 같이 작성

 

5. 아래처럼 생겼나 확인

6. application-oauth.properties에 아래 코드 추가

#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_template={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-nameattribute는 response로 해야하는데 이는 반환되는 형태가 JSON이다~~

 

스프링 시큐리티에서는 하위 필드를 명시할 수 없는데 네이버의 최상위 필드는 resultCode, message, response이다. 그러니 3개중 골라야 하는데 당연 response로 해야겠지?

 

7. 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("profile_image"))
                .attributes(response)
                .nameAttributeKey(userNameAttributeName)
                .build();
    }

구글과 또 차이점은 프로필사진 키값이 다르다는 것...?

 

8. index.mustache에 아래 코드 추가

 {{^memberName}}
                    <a href="/oauth2/authorization/google" class="btn btn-success active" role="button">Google Login</a>
                    <a href="/oauth2/authorization/naver"  class="btn btn-secondary active" role="button">Naver Login</a>
                {{/memberName}}