Back-End/Springboot와 AWS로 혼자 구현하는 웹 서비스

Chapter 05. 스프링 시큐리티와 OAuth 2.0으로 로그인 기능 구현하기 (6)

yeonx 2022. 3. 27. 14:46
728x90

5.6 네이버 로그인

 

네이버 API 등록

 

https://developers.naver.com/apps/#/register?api=nvlogin 

 

애플리케이션 - NAVER Developers

 

developers.naver.com

네이버 서비스 등록

 

서비스 URL은 필수 : 여기선 localhost:8080로 등록

 

등록을 완료하면 ClientID와 ClientSecret가 생성됨

 

네이버 서비스 등록 완료

 

해당 키값들을 application-oauth.properties에 등록

네이버에서는 스프링 시큐리티를 공식 지원하지 않기 때문에 그동안 Common-OAuth2 Provider에서 해주던 값들도 전부 수동으로 입력해야 한다.

 

#registraion
spring.security.oauth2.client.registration.naver.client-id=클라이언트 id
spring.security.oauth2.client.registration.naver.client-secret=클라이언트 secret
spring.security.oauth2.client.registration.naver.redirect-uri={baseUrl}/{action}/oauth2/code/{registraionId}
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
 - 기준이 되는 user_name의 이름을 네이버에서는 response로 해야 함
 - 이유는 네이버의 회원 조회 시 반환되는 JSON 형태 때문

 


스프링 시큐리티 설정 등록

 

OAuthAttributes.java

...
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();
}
...

index.mustache

...
{{^userName}}
    <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>
{{/userName}}
...
①/oauth2/authorization/naver
 - 네이버 로그인 URL은 applicarion-oauth.properties에 등록한 redirecr-uri 값에 맞춰 자동으로 등록됨
 - /oauth2/authorization/까지는 고정이고 마지막 Path만 각 소셜 로그인 코드를 사용하면 됨
 - 여기서는 naver가 마지막 Path가 됨

확인

네이버 로그인 화면
네이버 로그인 동의 화면

 

출처 : 스프링 부트와 AWS로 혼자 구현하는 웹 서비스 [이동욱 지음]