Kakao OAuth2 + JWT + Redis를 통한 인증 과정 구현 (1) - 카카오 로그인

DND 사이드 프로젝트에서 인증으로 카카오 로그인을 채택하여 진행하게 되었습니다.

Spring Security와 JWT, OAuth2 Client, Redis를 사용하여 카카오 로그인을 프로젝트에 어떻게 적용했는지 한 번 정리해보도록 하겠습니다.

 

먼저 카카오 로그인 과정을 짚어봅시다.

---

Step 1. 인가 코드 받기 

1. 인가 코드 GET

1. 카카오 인증 서버로 /oauth/authorize URI로 GET 요청을 보냅니다.

2. 카카오 인증 서버에서 클라이언트에게 카카오 로그인 페이지를 통해 로그인을 요청합니다.

3. 사용자는 카카오계정으로 로그인

4. 카카오계정이 유효한 경우 카카오 인증 서버에서 클라이언트에게 동의 화면을 통해 사용자 정보 수집 동의를 요청합니다.

5. 클라이언트가 동의한 항목을 카카오 인증 서버에게 요청합니다.

6. 카카오 인증 서버에서는 302 Redirect URI로 서비스 서버에게 인가 코드를 전달합니다.

 

* 여기서 Redirect URI는 Kakao Developers - 내 애플리케이션 - 카카오 로그인에서 추가한 URI로 설정됩니다.

---

Step 2. 토큰 받기

2. 토큰 발급

이제 서비스 서버로 받은 인가 코드를 가지고 사용자 정보에 대한 토큰을 발급받을 수 있습니다.

 

1. 서비스 서버가 Redirect URI로 전달받은 인가 코드로 토큰 받기를 요청합니다.

 

2. 카카오 인증 서버가 토큰을 발급해서 서비스 서버에 전달합니다.

 

* 여기서 헷갈릴 수 있는데, 이 토큰은 서비스 서버에서 사용할 액세스 토큰이 아니라는 점에 주의합시다.

 

---

Step 3. 사용자 로그인 처리

 

카카오 서버가 해주어야 할 일은 모두 끝났습니다. 이 부분은 서비스 서버에 직접 구현해야 하는 부분으로 Step2 에서 토큰을 통해 사용자 정보를 받았으니 이 정보를 어떻게 처리할 지 서버에 구현하면 되겠습니다.

 

서비스 서버에 구현한 카카오 로그인 로직 코드를 살펴보겠습니다.

---

0. 설정 정보

application.yml

• Redirect URI는 카카오 디벨로퍼스에 설정한 URI와 동일하게 지정해줍니다.
• Client ID, Client Secret은 카카오 디벨로퍼스에서 발급받은 값으로 지정해줍니다.
• authorization-grant-type은 인가 코드 방식을 사용하므로 authorization_code 지정해주고, client-authentication-method는 반드시 cllient_secret_post로 지정해주어야 합니다.

gradle

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

• 인증 필터를 사용하기 위해 Security를, 카카오 로그인을 사용하기 위해 OAuth2를 추가합니다.

---

1. KakaoDetails

 

KakaoMemberDetails 

@RequiredArgsConstructor
public class KakaoMemberDetails implements OAuth2User {

    private final String email;
    private final List<? extends GrantedAuthority> authorities;
    private final Map<String, Object> attributes;

    @Override
    public String getName() {
        return email;
    }

    @Override
    public Collection<? extends GrantedAuthority> getAuthorities() {
        return authorities;
    }

    @Override
    public Map<String, Object> getAttributes() {
        return attributes;
    }
}

 

 

• Step 3의 로그인 성공 후처리 서비스를 구현하기에 앞서 후처리 서비스에서 필요한 정보들을 먼저 구현하겠습니다.
• 이 클래스는 인증 객체인 Authentication 객체안에 사용자 정보를 담기 위한 클래스로, 인스턴스는 카카오 계정의 email과 사용자의 권한인 authority가 컬렉션 형태로 필드로 가지는데요. gradle에 추가한 OAuth2 Client가 제공하는 OAuth2User 인터페이스의 구현체로 작성해야 Authenticaiton 객체 안에 담을 수 있기 때문에 OAuth2User를 구현하여 getter를 오버라이딩 하였습니다.

 

KakaoUserInfo

public class KakaoUserInfo {

    public static final String KAKAO_ACCOUNT = "kakao_account";
    public static final String EMAIL = "email";

    private Map<String, Object> attributes;

    public KakaoUserInfo(Map<String, Object> attributes) {
        this.attributes = attributes;
    }

    public String getEmail() {
        ObjectMapper objectMapper = new ObjectMapper();
        TypeReference<Map<String, Object>> typeReferencer = new TypeReference<Map<String, Object>>() {
        };

        Object kakaoAccount = attributes.get(KAKAO_ACCOUNT);
        Map<String, Object> account = objectMapper.convertValue(kakaoAccount, typeReferencer);

        return (String) account.get(EMAIL);
    }
}

 

로그인에 성공하게 되면 후처리 서비스에서 받은 사용자 정보들을 KakaoMemberDetails로 캐스팅하기위한 정보들입니다. 우선 후처리 서비스 코드를 먼저 보는게 이해가 더 빠를 수도 있겠네요. 후처리 서비스 코드를 먼저 보겠습니다.

 

KakaoMemberDetailsService - 카카오 로그인 성공 후처리 서비스 객체

 

Step2에서 토큰을 통해 사용자 정보를 받게 되면 이렇게 DefaultOAuth2UserService의 OAuth2UserRequest 객체에 사용자 정보가 담기게 됩니다!

public class DefaultOAuth2UserService implements OAuth2UserService<OAuth2UserRequest, OAuth2User> {
    ...
    private Converter<OAuth2UserRequest, RequestEntity<?>> requestEntityConverter = new OAuth2UserRequestEntityConverter();
    ...
}

 

후처리 서비스는 사용자가 비즈니스 로직에 맞게 커스텀해서 구현해야 합니다. 때문에 이 DefaultOAuth2UserService를 상속받아 요구사항에 맞게 커스터마이징 해보겠습니다.

 

KakaoMemberDetailsService 

@Service
@RequiredArgsConstructor
public class KakaoMemberDetailsService extends DefaultOAuth2UserService {

    private static final String PREFIX = "낯선 ";

    private final MemberRepository memberRepository;

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

        Member member = memberRepository.findByEmail(kakaoUserInfo.getEmail())
                .orElseGet(() ->
                        memberRepository.save(
                                Member.builder()
                                        .email(kakaoUserInfo.getEmail())
                                        .role(Role.USER)
                                        .nickName(PREFIX)
                                        .gender(Gender.NONE)
                                        .updateAgeCount(0)
                                        .updateGenderCount(0)
                                        .build()
                        )
                );

        SimpleGrantedAuthority authority = new SimpleGrantedAuthority(member.getRole().name());

        return new KakaoMemberDetails(String.valueOf(member.getEmail()),
                Collections.singletonList(authority),
                oAuth2User.getAttributes());
    }
}

 

DefaultOAuth2UserService의 loadUser 메소드는 로그인 성공 후 동작하는 메소드로 실제적으로 사용자 정보를 어떻게 처리할 지 작성해야 하는 구현부입니다.

OAuth2User oAuth2User = super.loadUser(userRequest);

 

1. 먼저 request로부터 사용자 정보가 담긴 객체를 꺼내옵니다.

KakaoUserInfo kakaoUserInfo = new KakaoUserInfo(oAuth2User.getAttributes());

 

2. 사용자 정보가 담긴 객체에서 사용자 정보를 꺼내서 KakaoUserInfo에 담습니다.

 

왜 굳이 KakaoUserInfo가 필요할까? 

• 사용자 정보가 담긴 OAuth2User 객체의 attributes를 출력해보면, 로그인 유저 정보가 아래와 같이 Map<String, Object> 형태로 저장된 것을 볼 수 있습니다. 
• 그 중에서도 데이터베이스에 저장하기 위해 필요한 이메일 정보는 Map<String(key:kakao_account), Map<String,String>> 형태로 저장되어 있기 때문에 이 정보들을 편하게 파싱해오기 위해 KakaoUserInfo 클래스를 만들어 주었습니다.

oauth2User.getAttributes() = {
                setPrivacyInfo=true, 
                id=3292176436,
                connected_at=2024-01-21T09:45:17Z,
                properties={nickname=김동웅}, 
                kakao_account = {profile_nickname_needs_agreement=false, profile={nickname=김동웅}, has_email=true, email_needs_agreement=false, is_email_valid=true, is_email_verified=true, email=kdo0422@nate.com}
}

 

KakaoUserInfo를 다시 살펴봅시다.

public class KakaoUserInfo {

    public static final String KAKAO_ACCOUNT = "kakao_account";
    public static final String EMAIL = "email";

    private Map<String, Object> attributes;

    public KakaoUserInfo(Map<String, Object> attributes) {
        this.attributes = attributes;
    }

    public String getEmail() {
        ObjectMapper objectMapper = new ObjectMapper();
        TypeReference<Map<String, Object>> typeReferencer = new TypeReference<Map<String, Object>>() {
        };

        Object kakaoAccount = attributes.get(KAKAO_ACCOUNT);
        Map<String, Object> account = objectMapper.convertValue(kakaoAccount, typeReferencer);

        return (String) account.get(EMAIL);
    }
}

 

KakaoUserInfo를 아래처럼 oauth2User.getAttributes()로 생성하면, 

KakaoUserInfo kakaoUserInfo = new KakaoUserInfo(oAuth2User.getAttributes());

 

 

이제 kakaoUserInfo.getEmail()을 통해

 

1. Map<String, Map<String,String>> attributes에 담긴 kakao_account key의 value를 가져와서

2. kakao_account key의 value인 Map<String, String>에서 email을 가져오도록 함으로써, 실제 데이터베이스에 insert할 회원 정보 중 하나인 email을 편하게 가져올 수 있습니다.

 

본론으로 돌아와 마저 후처리 메소드인 loadUser()로 돌아오겠습니다.

KakaoUserInfo kakaoUserInfo = new KakaoUserInfo(oAuth2User.getAttributes());

Member member = memberRepository.findByEmail(kakaoUserInfo.getEmail())
        .orElseGet(() ->
                memberRepository.save(
                        Member.builder()
                                .email(kakaoUserInfo.getEmail())
                                .role(Role.USER)
                                .nickName(PREFIX)
                                .gender(Gender.NONE)
                                .updateAgeCount(0)
                                .updateGenderCount(0)
                                .build()
                )
        );

 

• 사용자 정보를 통해 kakaoUserInfo를 생성해주고, kakaoUserInfo로 회원 리포지토리에 해당 회원이 존재하는 지 조회하여 없으면 생성 후 리턴하고 있으면 리턴하는 방식으로 구현하였습니다.
• 여기서 리포지토리에 회원이 없는 경우에는 email 필드만 카카오 로그인 계정으로 등록해주고, 나머지 필드들은 요구사항에 맞게 기본적인 정보들을 Builder로 생성하여 리포지토리에 저장해주었습니다.

SimpleGrantedAuthority authority = new SimpleGrantedAuthority(member.getRole().name());

 

3. OAuth2User 인터페이스를 구현한 KakaoMemberDetails에 회원의 권한 정보를 담기 위해 저장된 회원으로부터 권한 정보를 꺼내오고, SimpleGrantedAuthority 객체를 만들어 주었습니다.

 

return new KakaoMemberDetails(String.valueOf(member.getEmail()),
        Collections.singletonList(authority),
        oAuth2User.getAttributes());

 

4. KakaoMemberDetails는 권한 정보를 Collection 형태의 필드로 갖기 때문에 3에서 만든 권한을 형태에 맞게 변경하여 KakaoMemberDetails를 생성 후 리턴합니다.

 

어디에 리턴될까?

• 여기서 리턴된 UserDetails 객체는 사용자 인증 정보를 나타내기 위해 Authentication 객체에 담겨지고, 이 Authentication 객체는 사용자의 인증 상태를 나타내며, SecurityContext에 저장된다고 보시면 되겠습니다.

 

마지막으로 구현한 후처리 서비스 클래스를 SecurityConfig에 다음과 같이 등록해주면 끝 !

.oauth2Login(oAuth2Login -> {
    oAuth2Login.userInfoEndpoint(userInfoEndpointConfig ->
            userInfoEndpointConfig.userService(kakaoMemberDetailsService));
});

 

이렇게 카카오 로그인은 구현이 끝났습니다. 아직 JWT 적용이 남았는데요. 다음 포스팅으로 이어가겠습니다.