[Cinemagram] 소셜 로그인 (구글, 네이버) 및 NFT 이미지 추가 - (14)

요즘 방문하는 사이트를 보면 소셜로그인 하나만 딱 해둔 곳보다 구글, 네이버, 페이스북 등등 이렇게 여러 옵션을 제공해 주는 곳들이 많습니다. 

 

그래서 이번 포스팅에서는 네이버 소셜 로그인 구현을 추가로 해보려고 했습니다만....

 

 

 

 

 

그전에.... 이전 구글 소셜 로그인 커밋을 삭제했습니다. 😂😂😂

구글 소셜 로그인 포스팅에는 위와 같은 +추가를 적어뒀고 어떤 일이 있었고 어떻게 해결했는지에 관해서는 이 포스팅에 기재했습니다. 혹시 관심 있으시다면 참고하셔도 좋을 것 같습니다. 

 

 

 

 

OAuth2.0 관련 모든 코드가 사라져서, 다시 작업 후 리팩토링 진행하도록 하겠습니다. 🤦‍♂️

👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻👨‍💻...

 

구글 소셜 로그인으로 push했습니다. 

 

---

 

 

 

 

네이버 API 등록

먼저 네이버 오픈 API로 이동합니다. (로그인, 본인인증 필요)

애플리케이션 이름과 사용 API의 제공 정보를 선택합니다. 

 

 

환경 추가에 PC웹을 선택하고 서비스 URL, 네이버 로그인 Callback URL을 작성합니다.

등록하기 버튼을 누르면 Client ID, Client Secret 값이 생성됩니다. 

 

 

해당 키값들을 application-oauth.yml에 추가합니다. 

 

 

 

스프링부트 시큐리티 OAuth2.0

Facebook, Google, Naver 방식

Authorization Code방식이므로 application-oauth.yml에 아래의 코드를 기재합니다.

authorization-grant-type: authorization_code

 

 

 

네이버의 경우 구글과 달리 provider에 대한 내용을 추가로 기재해주어야 합니다. 

 

네이버 개발자에 접속 후

 

 

쭉 내려가다보면,  빨간 박스로 친 요청 URL을 기재하면 네이버 로그인 창이 뜬다고 하니

우리 설정파일에도 적용해 줘야겠죠.

 

 

 

두 번째로 토큰을 받으려면

 

 

 

 

세 번째로 프로필 정보를 받으려면

 

마지막으로

회원정보를 json으로 받는데 response라는 키값으로 네이버가 리턴해줍니다.

(응답을 받으면 데이터가 response안에 들어가 있다는 의미)

 

 

 

여기까지를 코드로 적어보자면

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

 

 

 

 

 

이제 CustomOAuth2DetailsService로 가서 네이버 소셜 로그인 관련 코드를 추가해야 합니다. 

 

음,,, 현재 해당 클래스에는 구글 로그인 관련 코드만 있는 상황입니다. 

@Override
public OAuth2User loadUser(OAuth2UserRequest userRequest) throws OAuth2AuthenticationException {
    OAuth2User oAuth2User = super.loadUser(userRequest);

    Map<String, Object> socialUserInfo = oAuth2User.getAttributes();

    String username = "google_"+(String) socialUserInfo.get("sub");
    String password = new BCryptPasswordEncoder().encode(UUID.randomUUID().toString());
    String email = (String) socialUserInfo.get("email");
    String name = (String) socialUserInfo.get("name");

    User userEntity = userRepository.findByUsername(username);

    if(userEntity == null){
        User user = User.builder()
                .username(username)
                .password(password)
                .email(email)
                .name(name)
                .build();
        return new CustomUserDetails(userRepository.save(user));
    }else {
        return new CustomUserDetails(userEntity);
    }
    ....
}

 

이제 이 클래스 중간중간 네이버 관련 코드,,,, 트위터,,,,페이스북 관련 코드를 넣으면 동작은 하겠지만

시간이 지나 유지보수할 때는 골치 아플 것입니다.

 

 

그래서 미리 공통영역에 대한 폴더와 파일을 따로 빼서 작업했습니다. 해당 리팩토링 부분이 궁금하시다면 이 포스팅을 참고해 주세요.

 

 

 

 

내가 원하는 정보가 어디 있는지 확인 

 

네이버 로그인

userRequest clientRegistration 정보

코드 : 
userRequest.getClientRegistration()


출력 : 
ClientRegistration{registrationId='naver', clientId=, clientSecret=, 
  clientAuthenticationMethod=, authorizationGrantType=, redirectUri=, 
  scopes=, providerDetails=, clientName=...}

 

 

아! .getClientRegistration() 안에 내가 원하는 Id가 있구나 → 추출

userRequest clientRegistration의 id 정보

코드 : 
userRequest.getClientRegistration().getRegistrationId()

출력 :
naver

 

 

 

oAuth2User의 attributes 정보

코드 :  oAuth2User.getAttributes()

출력 :
{resultcode, message=success, response={id=, profile_image=, email=, name=}}

 

내가 원하는 회원 정보는 .getAttributes()의 response 안에 있구나를 알 수 있습니다.

 

 

 

 

 

원하는 정보들이 어디에 있는지 확인했다면 아래와 같이 사용할 수 있습니다.

첫 번째, 어떤 소셜 로그인으로 들어왔는지 확인 코드

네이버

if(userRequest.getClientRegistration().getRegistrationId().equals("naver")) {
	System.out.println("네이버로 로그인 한 사용자입니다. ");
} else if() {
	...

}else {
	...
}

 

 

두 번째, 네이버로 로그인했다면 회원정보를 가져올 때 사용하는 코드

 = new NaverUserInfo((Map)oAuth2User.getAttributes().get("response"));

 

 

여기까지 해서 구글, 네이버 소셜 로그인 구현까지 완성했습니다. 

 

 

 

 

 

 

+ 추가

최근에 NFT 강의를 수강하고 직접 실습한 적이 있습니다. 제가 생성한 그림을 Cinemagram의 이미지로 사용하면 좋을 것 같다는 생각에 images 폴더에 추가했습니다.

NFT는 대체 불가능한 오직 하나의 토큰입니다.
따라서 생성한 사람에게 소유권 있고 그 사람은 SNS에 출처 표기를 하지 않고 자유롭게 사용할 수 있습니다. 

 

 

간단하게 소개하겠습니다. 

1. 레디 플레이어 원 - 황금 열쇠를 갖기 위해 전쟁 중인 상황을 표현

 

 

2. 나니아 연대기 - 평화로운 상황을 표현

 

 

3. 해리포터 - 해리포터와 친구들이 기숙사에서 싸우고 있는 상황을 표현

 

 

4. 매니페스트 영화 - 항공기가 강력한 번개로 인해 난기류가 발생한 상황을 표현

 

 

5. 에밀리 인 파리 - 에밀리가 파리를 거닐고 있는 상황을 표현

 

 

 

여기까지 프로젝트에 적용하고 네이버 소셜 로그인 및 NFT 이미지 추가로 push 했습니다.

 

 

 

 

 

 

 

---

 

 

참고:

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

인프런 스프링부트 시큐리티 & JWT 강의

스프링 부트와 OAuth2 [Naver]

 

관련 포스팅 :

[Refactoring] 여러 소셜 로그인을 위한 공통영역 분리