Naver 소셜로그인 구현하기

✏️ 환경설정

📍 Dependencies 추가

implementation 'org.springframework.boot:spring-boot-starter-oauth2-client'

📍 application yml 환경설정

spring:
  security:
    oauth2:
      client:
        registration:

          naver:
            client-id: 클라이언트ID
            client-secret: 클라이언트Secret
            redirect-uri: 리다이렉트 url
            authorization-grant-type: authorization_code
            scope: name, email, profile_image
            client-name: Naver
        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

• redirect url

http://localhost:8080/login/oauth2/code/naver

✏️ Naver 개발자 센터

🔗 개발자 센터 링크

📍 오픈 API 이용 신청하기

• 왼쪽 상단의 매뉴 → 네이버 로그인 → 네이버 로그인 API
• 하단의 오픈 API 이용 신청을 누르면 application 생성 페이지로 이동된다.

📍 Application 생성

• 적당히 인증과 정보를 입력하다보면 환경추가 설정이 나온다.
  • PC 웹을 추가
  • 서비스 URL

    • 배포되었으면 배포된 url 을 입력

    • 나는 연습이기 때문에 localhost 8080 을 입력했다.

      http://localhost:8080

  • 네이버 로그인 Callback URL

    • 네이버 로그인을 완료하면 콜백할 URL 을 입력하는 란이다.

    • 나는 main 으로 이동시키고 싶기 때문에 서비스 url 과 동일하게 설정했다.

      http://localhost:8080

• 정보를 입력하고 등록하기를 누르면 application 이 생성된다.
• 확인하려면 왼쪽 상단의 매뉴를 누르면 내 어플리케이션에 등록된걸 확인할 수 있다.
  • 생성한 application 으로 이동해 id 와 pw (secret) 번호를 얻을 수 있다.

✏️ 코드 구현하기

📍 Naver 로그인 요청하기

• html 버튼 생성하기
  • 세팅할 때 appliction yml 에 설정해둔 url 로 요청을 보내는 링크를 생성한다.
• 클라이언트가 해당 링크를 누르면 goolge 에서 나머지 작업을 처리해준다.

<a href="/oauth2/authorization/naver">
    네이버 로그인하기
</a>

📍 Entity 계층

• Member Entity 에 새로운 필드를 추가해준다.
  • 어떤 방식으로 소셜로그인 했는지 기록하기 위한 속성이다.

// 일반회원인지, 카카오로 가입한 회원인지, 구글로 가입한 회원인지
private String providerTypeCode;

📍 Service 계층

• member service 에 로그인과 소셜 로그인을 내부적으로 처리하는 공통로직을 새로 추가한다.
  • private 주의!!
• method 역할
  • member name 이 중복되었는지 확인
  • Security 로그인일경우 password 인코딩
    • password 의 유무로 로그인의 종류를 파악할 수 있음
  • 새로운 객체 생성후 db 에 저장

//-- login 처리 로직 --//
// 내부 처리함수, 일반회원가입, 소셜로그인을 통한 회원가입(최초 로그인 시 한번만 발생)에서 이 함수를 사용함
private RsData<Member> join(String providerTypeCode, String username, String password) {

    // name 중복 체크 //
    if (findByUsername(username).isPresent())
        return RsData.of("F-1", "해당 아이디(%s)는 이미 사용중입니다.".formatted(username));

    // 소셜 로그인을 통한 회원가입에서는 비번이 없다. //
    if (StringUtils.hasText(password)) 
				password = passwordEncoder.encode(password);

    // 수동으로 새로운 member 객체 생성 //
    Member member = Member
            .builder()
            .providerTypeCode(providerTypeCode)
            .username(username)
            .password(password)
            .build();

		// member 객체 db 에 저장 //
    memberRepository.save(member);

    return RsData.of("S-1", "회원가입이 완료되었습니다.", member);
}

• 방금 만든 로그인 공통로직을 사용하는 business 로직을 생성

1. Security 로그인
   • name 과 pw 를 매개변수로 받아 join 을 호출한다.
2. Social 로그인
   • entity 에서 생성해준 providerTypeCode 값을 매개변수로 받는다.

//-- security join --//
@Transactional
public RsData<Member> join(String username, String password) {

    // "S-1.1" 해당 회원이 일반회원가입으로 인해 생성되었다는걸 나타내기 위해서
    return join("S-1.1", username, password);
}

//-- social join --//
// 소셜 로그인(카카오, 구글, 네이버) 로그인이 될 때 마다 실행되는 함수
@Transactional
public RsData<Member> whenSocialLogin(String providerTypeCode, String username) {

		// username 예시 : KAKAO__1312319038130912, NAVER__1230812300
    Optional<Member> opMember = findByUsername(username); 

    // 아이디가 있는경우
    if (opMember.isPresent()) 
				return RsData.of("S-2", "로그인 되었습니다.", opMember.get());

    // 소셜 로그인를 통한 가입시 비번은 없다.
    return join(providerTypeCode, username, ""); // 최초 로그인 시 딱 한번 실행
}

📍 Security 계층

• 소셜 로그인 처리기능만 담당하는 Security 계층을 새로 생성한다.
  • REST API 로 응답받은 data 를 DB 에 저장하는 역할이다.
  • DefaultOAuth2UserService 를 상속받았다.

package com.ll.gramgram.base.security;

import com.ll.gramgram.boundedContext.member.entity.Member;
import com.ll.gramgram.boundedContext.member.service.MemberService;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.security.core.GrantedAuthority;
import org.springframework.security.core.userdetails.User;
import org.springframework.security.oauth2.client.userinfo.DefaultOAuth2UserService;
import org.springframework.security.oauth2.client.userinfo.OAuth2UserRequest;
import org.springframework.security.oauth2.core.OAuth2AuthenticationException;
import org.springframework.security.oauth2.core.user.OAuth2User;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.Collection;
import java.util.Map;

@Service
@Transactional(readOnly = true)
@RequiredArgsConstructor
@Slf4j
public class CustomOAuth2UserService extends DefaultOAuth2UserService {

    // 소셜 로그인을 할 Member 의 Service 계층 객체를 DI 해야 한다.
    private final MemberService memberService;

    // 소셜 로그인을 처리하기 위해 필요한 라이브러리
		// 자세한 역할은 모르겠다.
		class CustomOAuth2User extends User implements OAuth2User {
		
		    public CustomOAuth2User(String username, String password, Collection<? extends GrantedAuthority> authorities) {
		        super(username, password, authorities);
		    }
		
		    @Override
		    public Map<String, Object> getAttributes() {
		        return null;
		    }
		
		    @Override
		    public String getName() {
		        return getUsername();
		    }
}

• 소셜로그인이 성공했을 때 실행되는 method
  • CustomOAuth2UserService 의 method 로 생성해주면 된다.

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

		// id
    String oauthId = oAuth2User.getName();

		// providerTypeCode
    String providerTypeCode = userRequest.getClientRegistration().getRegistrationId().toUpperCase();

		// name
    String username = providerTypeCode + "__%s".formatted(oauthId);

		// service 로직을 통한 객체 생성
    Member member = memberService.whenSocialLogin(providerTypeCode, username).getData();

    return new CustomOAuth2User(member.getUsername(), member.getPassword(), member.getGrantedAuthorities());
}