카카오 로그인 구현하기

카카오 로그인 버튼 script :

<script>
    function kakaoLogin() {
        let url = `https://kauth.kakao.com/oauth/authorize?client_id=caefd05138bce05df366ee94d807a224&redirect_uri=http://localhost:8080/oauth&response_type=code`;
        location.href = url;
    }
</script>

1. 함수 정의
• kakaoLogin 함수는 카카오 로그인 프로세스를 시작합니다.
• 함수가 호출되면 카카오 인증 서버의 URL을 생성하고 location.href를 사용하여 해당 URL로 리다이렉트합니다.

2. URL 구성 요소:
• https://kauth.kakao.com/oauth/authorize: 카카오 OAuth 인증 엔드포인트입니다.
• client_id: 애플리케이션의 클라이언트 ID입니다. (예: caefd05138bce05df366ee94d807a224)
• redirect_uri: 인증 후 리다이렉트 될 애플리케이션의 URL입니다. (예: http://localhost:8080/oauth)
• response_type=code: 응답 타입을 인증 코드로 설정합니다. 카카오 서버는 인증 코드를 반환합니다.

동작 원리

1. 사용자가 로그인 버튼을 클릭하면 kakaoLogin 함수가 호출됩니다.

2. kakaoLogin 함수는 카카오 인증 서버의 URL을 생성합니다.

3. 브라우저는 location.href를 통해 카카오 인증 서버로 리다이렉트됩니다.

4. 사용자는 카카오 로그인 페이지에서 인증을 완료합니다.

5. 인증이 성공하면, 카카오 서버는 지정된 redirect_uri로 인증 코드를 포함하여 리다이렉트합니다.

Controller :

    @GetMapping("/oauth")
    public String oauth(@RequestParam("code") String code){
        User sessionUser = userService.카카오로그인(code);
        session.setAttribute("sessionUser", sessionUser);
        return "redirect:/";
    }

• @GetMapping("/oauth"):
• 이 어노테이션은 HTTP GET 요청을 /oauth 경로로 매핑합니다. 사용자가 카카오 로그인 인증 후 리다이렉트될 경로입니다.

• 메서드 시그니처:

public String oauth(@RequestParam("code") String code)

• @RequestParam("code"): 요청 파라미터에서 code 값을 가져옵니다. 이 code는 카카오 인증 서버가 리다이렉트할 때 URL에 포함된 인증 코드입니다.
• 메서드의 리턴 타입은 String으로, 리다이렉트 URL을 반환합니다.

• 사용자 서비스 호출:

`User sessionUser = userService.카카오로그인(code);`

• userService.카카오로그인(code): userService를 호출하여 카카오 인증 코드를 사용해 로그인 처리를 수행합니다. 이 메서드는 code를 사용하여 카카오 서버로부터 액세스 토큰과 사용자 정보를 가져옵니다.
• sessionUser: 인증된 사용자 정보를 포함하는 User 객체입니다.

• 세션에 사용자 정보 저장:

`session.setAttribute("sessionUser", sessionUser);`

• session.setAttribute("sessionUser", sessionUser): 세션에 사용자 정보를 저장합니다. 이렇게 하면 사용자는 로그인 상태를 유지할 수 있습니다.

Service :

    public User 카카오로그인(String code) {
        // 1. 카카오 로그인 요청
        UserResponse.KakaoDTO kakaoDTO = MyHttpUtil.post(code);

        // 2. id token 검증
        UserResponse.IdTokenDTO idTokenDTO = MyRSAUtil.verify(kakaoDTO.getIdToken());

        // 3. 회원가입 유무 확인
        String username = "kakao_"+idTokenDTO.getSub();
        Optional<User> userOP = userRepository.findByUsername(username);

        // 4. 안되어있다면 강제 회원가입
        if(userOP.isEmpty()){
            User user = User.builder()
                    .username(username)
                    .password(UUID.randomUUID().toString())
                    .provider(ProviderEnum.KAKAO)
                    .build();
            User userPS = userRepository.save(user);
            return userPS;
        }

        // 5. User 객체 리턴
        return userOP.get();
    }

1. 카카오 로그인 요청:

UserResponse.KakaoDTO kakaoDTO = MyHttpUtil.post(code);

• MyHttpUtil.post(code): 카카오 서버에 로그인 요청을 보내고 인증 코드를 사용하여 사용자 정보를 가져옵니다.
• kakaoDTO: 카카오 서버로부터 받은 응답 데이터입니다. 이 데이터에는 ID 토큰 등이 포함되어 있습니다.

2. ID 토큰 검증:

UserResponse.IdTokenDTO idTokenDTO = MyRSAUtil.verify(kakaoDTO.getIdToken());

• MyRSAUtil.verify(kakaoDTO.getIdToken()): 받은 ID 토큰을 검증합니다.
• idTokenDTO: 검증된 ID 토큰 정보입니다. 이 정보에는 사용자의 고유 ID(sub) 등이 포함되어 있습니다.

3. 회원가입 유무 확인:

String username = "kakao_" + idTokenDTO.getSub();
Optional<User> userOP = userRepository.findByUsername(username);

• username: 카카오 사용자 고유 ID를 기반으로 생성된 사용자 이름입니다.
• userRepository.findByUsername(username): 데이터베이스에서 해당 사용자 이름으로 등록된 사용자가 있는지 확인합니다.
• userOP: Optional로 반환된 사용자 객체입니다.

4. 회원가입이 안되어 있다면 강제 회원가입:

if (userOP.isEmpty()) {
    User user = User.builder()
        .username(username)
        .password(UUID.randomUUID().toString())
        .provider(ProviderEnum.KAKAO)
        .build();
    User userPS = userRepository.save(user);
    return userPS;
}

• 사용자가 데이터베이스에 존재하지 않으면 새로운 사용자 객체를 생성합니다.
• UUID.randomUUID().toString(): 무작위 패스워드를 생성합니다.
• userRepository.save(user): 새 사용자 객체를 데이터베이스에 저장합니다.
• 저장된 사용자 객체(userPS)를 반환합니다.

5. User 객체 반환:

return userOP.get();

• 이미 데이터베이스에 존재하는 사용자 객체를 반환합니다.

Service 메서드 Detail

1. 반환 값으로 사용한 DTO 클래스 :

public class UserResponse {
    
    @Data
    public static class KakaoDTO {
        @JsonProperty("access_token")
        private String accessToken;
        @JsonProperty("id_token")
        private String idToken;
    }

    @Data
    public static class IdTokenDTO {
        private String sub;
        private String nickname;

        // 해당 예제에서 아래의 필드들은 사용하지 않으나, 관련된 모든 필드를 작성하여야 예외가 발생하지 않기 때문에 작성
        private String aud;
        @JsonProperty("auth_time")
        private String authTime;
        private String iss;
        private String exp;
        private String iat;
    }
}

@JsonProperty("access_token")
private String accessToken;
@JsonProperty("id_token")
private String idToken;

2. MyHttpUtil 클래스 :

public class MyHttpUtil {

    public static UserResponse.KakaoDTO post(String code){
        String redirectUri = "http://localhost:8080/oauth";
        String clientId = "caefd05138bce05df366ee94d807a224";

        RestTemplate restTemplate = new RestTemplate();
        String url = "https://kauth.kakao.com/oauth/token";

        HttpHeaders headers = new HttpHeaders();
        headers.set("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");

        // 요청 바디 설정
        String requestBody = """
                grant_type=authorization_code&client_id=${clientId}&redirect_uri=${redirectUri}&code=${code}
                """.replace("${clientId}", clientId)
                .replace("${redirectUri}", redirectUri)
                .replace("${code}", code);

        // HttpEntity에 헤더와 바디 추가
        HttpEntity<String> request = new HttpEntity<>(requestBody, headers);

        // POST 요청
        ResponseEntity<UserResponse.KakaoDTO> response = restTemplate.exchange(url, HttpMethod.POST, request, UserResponse.KakaoDTO.class);

        // 응답 출력
        UserResponse.KakaoDTO kakaoDTO =  response.getBody();
        return kakaoDTO;
    }
}

3. MyRSAUtil 클래스 :

public class MyRSAUtil {

    public static UserResponse.IdTokenDTO verify(String idToken){
        String n = "qGWf6RVzV2pM8YqJ6by5exoixIlTvdXDfYj2v7E6xkoYmesAjp_1IYL7rzhpUYqIkWX0P4wOwAsg-Ud8PcMHggfwUNPOcqgSk1hAIHr63zSlG8xatQb17q9LrWny2HWkUVEU30PxxHsLcuzmfhbRx8kOrNfJEirIuqSyWF_OBHeEgBgYjydd_c8vPo7IiH-pijZn4ZouPsEg7wtdIX3-0ZcXXDbFkaDaqClfqmVCLNBhg3DKYDQOoyWXrpFKUXUFuk2FTCqWaQJ0GniO4p_ppkYIf4zhlwUYfXZEhm8cBo6H2EgukntDbTgnoha8kNunTPekxWTDhE5wGAt6YpT4Yw";
        String e = "AQAB";

        BigInteger bin = new BigInteger(1, Base64.getUrlDecoder().decode(n));
        BigInteger bie = new BigInteger(1, Base64.getUrlDecoder().decode(e));

        RSAKey rsaKey = new RSAKey.Builder(Base64URL.encode(bin), Base64URL.encode(bie)).build();
        try {
            // 1. 파싱
            SignedJWT signedJWT = SignedJWT.parse(idToken);

            // 2. 검증
            RSASSAVerifier verifier = new RSASSAVerifier(rsaKey.toRSAPublicKey());

            if(signedJWT.verify(verifier)){
                System.out.println("ID Token을 검증하였습니다");
                String payload = signedJWT.getPayload().toString();

                ObjectMapper om = new ObjectMapper();
                UserResponse.IdTokenDTO idTokenDTO = om.readValue(payload, UserResponse.IdTokenDTO.class);
                return idTokenDTO;
            }else{
                throw new RuntimeException("id토큰 검증 실패");
            }
        } catch (Exception ex) {
            throw new RuntimeException(ex.getMessage());
        }
    }
}

카카오톡 로그인 후 h2-db 확인 결과