[Spring & OAuth2] 네이버 로그인 연동

스프링 부트와 AWS로 혼자 구현하는 웹 서비스 - 예스24

*위의 책을 따라 학습한 것을 정리한 내용입니다

---

아래로 접속하여 Open Api를 신청한다.

네이버 로그인 - INTRO

 

등록을 완료하면 Client ID, Client Secret이 나온다 .

구글 로그인 API 처럼 위의 정보를 등록하면 될 것 같지만 Naver는 스프링 시큐리티를 공식 지원하지 않는다.

 

 

해당 키 값을 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={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

spring security에서는 하위 필드를 명시할 수 없다.

최상위 필드만 user_name으로 지정이 가능하다. 이후 자바 코드로 response의 id를 user_name을 정한다.

 

스프링 시큐리티 설정 등록

OAuthAttributes에 네이버인지 판단하는 코드와 네이버 생성자를 추가했다.

@Getter
public class OAuthAttributes {
	private Map<String, Object> attributes;
	private String nameAttributeKey;
	private String name;
	private String email;
	private String picture;
	
	@Builder
    public OAuthAttributes(Map<String, Object> attributes, String nameAttributeKey, String name, String email, String picture) {
        ...
    }

    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 ofGoogle(String userNameAttributeName, Map<String, Object> 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();
    }
	
	public User toEntity() {
		...
	}
}

 

index.mastache에 네이버 로그인 버튼을 추가해줬다.

{{^userNames}}
<a href="/oauth2/authorization/naver" class="btn btn-secondary acitve" role="button">Naver Login</a>
{{/userNames}}

 

/oauth2/authorization/naver

- 네이버 로그인 URL은 properties에 등록한 redirect-uri 값에 맞춰 자동으로 등록된다.

- /oauth2/authorization/는 고정이고 마지막 Path만 각 소셜 로그인 코드를 사용하면 된다.

 

이제 localhost:8080에 들어가서 테스트를 해보자