[Spring] 카카오 로그인 API 사용하는 방법

 

 

요즘은 카카오, 네이버를 이용한 Login Api 를 사용하는 경우가 많다. 

실제 사용하기 전에 샘플 프로젝트를 만들어 kakao login api 동작 방식을 알아볼 것이다. 

REST API를 사용한 카카오 로그인은 PC 및 모바일 웹에서 적합한 방식이다. 

 

카카오 로그인은 OAuth 2.0 기반의 소셜 로그인 서비스로 카카오 로그인을 이용하면 사용자가 카카오톡 또는 카카오 계정으로 손쉽게 서비스에 로그인 할 수 있다. 

 

 

카카오 로그인 서비스 과정 

 

1️⃣ 카카오 로그인 

1. 사용자가 서비스에서 카카오 로그인 버튼을 클릭합니다. 서비스는 카카오 인증 서버로 인가 코드 발급을 요청합니다.
2. 카카오 인증 서버는 사용자에게 인증을 요청합니다. (참고: 사용자 환경에 따른 인증 방법)
   • 카카오톡으로 로그인: 카카오톡 실행, 카카오톡에 연결된 카카오계정의 자격정보(Credentials)로 사용자 인증
   • 카카오계정으로 로그인: 계정 정보를 입력해 로그인하는 화면 출력, 해당 카카오계정의 자격정보로 사용자 인증
3. 카카오 인증 서버는 사용자 인증 성공 시, 서비스 앱의 동의항목 설정을 바탕으로 사용자에게 동의 화면을 출력합니다.
4. 사용자가 필수 동의항목에 동의하고 로그인을 요청하면, 카카오 인증 서버는 인가 코드(Authorization Code)를 발급해 서비스 앱에 등록된 Redirect URI로 전달합니다.
5. 서비스는 전달받은 인가 코드로 토큰을 요청하여 받습니다.

 

2️⃣ 회원 확인 및 가입 

1. 서비스는 카카오 로그인을 완료하여 발급받은 토큰으로 사용자 정보 가져오기를 요청합니다.
   • OpenID Connect 사용 시: OIDC: 사용자 정보 가져오기 API로 대체 가능
2. 카카오 API 서버는 요청 시 사용된 토큰의 유효성을 검증하고, 요청을 처리하고 서비스에 응답합니다.
3. 서비스 서버는 카카오로부터 제공받은 사용자 정보로 해당 사용자가 서비스에 회원 가입되어 있는지 확인합니다.
   • 이미 회원 가입된 사용자: Step 3의 서비스 로그인 단계 수행
   • 아직 회원 가입되지 않은 사용자: 카카오에서 제공받은 사용자 정보로 서비스 데이터베이스에 회원 가입 처리

-> 카카오가 데이터에 접근하는 것은 아니기 때문에 회원 정보를 대신 저장하거나 삭제하지 않기 때문에  이때 회원 정보 처리는 서비스에서 자체 구현해야 한다. 

 

3️⃣ 서비스 로그인 

1. 서비스 서버는 서비스 클라이언트에 해당 사용자의 로그인에 대한 세션을 발급합니다.
   • OpenID Connect 사용 시: 토큰과 함께 발급된 ID 토큰으로 서비스 로그인 세션을 대신할 수 있음
2. 서비스 클라이언트는 서비스 세션을 전달받아 로그인 완료 처리하고, 사용자를 로그인된 서비스 화면으로 이동시킵니다.

 

 

 

카카오 로그인 서비스 사전 설정 

https://developers.kakao.com/

Kakao Developers

-> 먼저 카카오 개발자 사이트에 가서 로그인 후 내가 개발할 애플리케이션을 등록해줘야 한다. 

 

 

1️⃣ 애플리케이션 추가하기

여기에 각자 로그인 서비스를 할 앱 이름, 사업자명, 카테고리 등을 작성해준다. 

나는 테스트할 용도이기 때문에 자세히 적지는 않았다..! 

 

 

2️⃣ 애플리케이션 추가 후 Rest API 키 확인하기

애플리케이션 추가 후 [요약 정보] 페이지를 확인하면 REST API 앱 키를 확인할 수 있다. 

 

 

3️⃣ Web 플랫폼 등록하기

 

-> [플랫폼] 페이지에 Web 플랫폼 등록을 클릭하면 

이렇게 도메인 등록하는 팝업이 나온다. 

나는 테스트하는 프로젝트이기 때문에 http://localhost:8080 으로 등록했다. ㅎㅎ 

 

 

그 다음 카카오 로그인 사용 시 콜백 받을 Redirect URI 를 등록해야 한다. 

 

 

-> 그 전에 [카카오 로그인] 페이지에서 카카오 로그인 활성화를 on 해주고, Redirect URI를 등록해준다. 

 

여기에는 각자 개발할 Redirect URI를 작성해주면 된다. 

나는 http://localhost:8080/login/kakao/code 로 등록해줬다. 

 

 

4️⃣ 동의 항목 설정

-> 아마 비즈앱 신청안하면 다른 정보들은 권한이 없어서 닉네임, 프로필 사진만 필수로 받을 수 있다. 

 

* 추가로 카카오 로그인 이미지 버튼 다운받기 

이렇게 로그인 이미지 버튼을 다운 받을 수 있다. 

 

-> 로그인 이미지 버튼까지 받았다면 kakao Devleopers에서 설정할 건 끝났다. 

 

* 카카오 로그인 REST API 문서 

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

Kakao Developers

 

 

 

카카오 로그인 샘플 프로젝트 만들기 

카카오 로그인 과정 ✔
1. 인가 코드 받기 
2. 토큰 받기 
3. 토큰으로 사용자 정보 얻기 

 

 

1️⃣ 인가 코드 받기 

사용자가 로그인 버튼을 클릭하면 https://kauth.kakao.com/oauth/authorize 이 URL로 인가 코드를 요청한다. 
그러면 카카오 인증 서버는 카카오 로그인 동의 화면을 호출하고, 사용자 동의를 거쳐 인가 코드를 발급한다. 

이때 동의 화면은 위에서 설정한 동의 항목에 대해 사용자에게 인가(동의)를 구한다. 

 

인가 코드는 동의 화면을 통해 인가받은 동의항목 정보를 갖고 있고, 인가 코드를 사용해 토큰 받기를 요청할 수 있다. 

 

✔ 그리고 이때 동의화면은 사용자와 앱이 처음 연결될 때만 나타난다! 
사용자가 이미 동의 화면에서 서비스 이용에 필요한 동의항목에 동의 완료한 경우, 해당 사용자의 카카오 로그인 시에는 동의 화면이 나타나지 않고 즉시 인가 코드가 발급됩니다. 사용자와 앱이 연결된 이후 다시 동의 화면을 통해 특정 동의항목에 대한 사용자 동의를 요청하려면 추가 항목 동의 받기로 동의 화면을 호출할 수 있습니다. 서비스 가입 과정이 올바르게 완료되지 않아 다시 동의 화면을 호출해야 할 경우에는 연결 끊기 후 다시 인가 코드 받기를 요청합니다.

 

여기서 이제 사용자가 모든 필수 동의항목을 동의하고 [동의하고 계속하기] 버튼을 누르면 

-> redirect_uri로 인가 코드를 담은 쿼리 스트링 전달하고, 

 

[취소] 버튼을 눌러 로그인 취소하면 

-> redirect_uri로 에러 정보를 담은 쿼리 스트링 전달한다. 

 

요청 쿼리파라미터는 밑에 url에서 확인할 수 있다. 

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#request-code-request-query

Kakao Developers

 

-> 그 중 필수는 client_id, redirect_uri, response_type 이렇게 3가지 이다. 

 

application-private.yml 

kakao:
  api_key: 
  redirect_uri:

-> application-private.yml에 카카오 개발자 사이트에서 애플리케이션 등록 후 받은 REST API 앱 키와 설정한 Redirect_uri를 담아서 따로 관리해준다. 

 

application.yml 

spring:
  profiles:
    include: private

-> 그리고 application.yml에 private yml을 포함하도록 한다. 

 

KakaoApi 

@Slf4j
@Getter
@Component
public class KaKaoApi
{
    @Value("${kakao.api_key}")
    private String kakaoApiKey;
    
    @Value("${kakao.redirect_uri}")
    private String kakaoRedirectUri;
    
}

-> application-private.yml에 값을 담는 vo를 만들어준다. 

 

 

TestController 

    @GetMapping("/login")
    public String loginForm(Model model)
    {
       model.addAttribute("kakaoApiKey", kaKaoApi.getKakaoApiKey());
       model.addAttribute("kakaoRedirectUri", kaKaoApi.getKakaoRedirectUri());
       return "login";
    }

-> kakaoApi 를 자동 주입받아서 kakaoApikey와 kakaoRedirectUri를 login 페이지에 담아 넘긴다. 

 

 

login.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kakao & Naver Login API TEST</title>
</head>
<body>
<div class="text-center">
    <a href="https://kauth.kakao.com/oauth/authorize"
       th:href="@{https://kauth.kakao.com/oauth/authorize(client_id=${kakaoApiKey}, redirect_uri=${kakaoRedirectUri}, response_type='code')}">
        <img src="/images/kakao_login_medium_narrow.png">
    </a>
</div>
</body>
</html>

 

-> 맨 처음 로그인 페이지이다. 이 버튼을 클릭하면 https://kauth.kakao.com/oauth/authorize 이 url로 client_id, redierct_uri, response_type 값을 담아서 요청한다. 이때 response_type 에는 code로 고정해서 보낸다. 

 

-> 그러면 응답값으로 토큰 받기 요청에 필요한 code를 redirect_uri에 담아 전달한다. 

 

 

2️⃣ 토큰 받기 

이제 받은 인가 코드로 토큰 발급을 요청해야 한다. 인가 코드 받기만으로는 카카오 로그인이 완료되지 않는다. 토큰 받기 까지 마쳐야 로그인을 정상적으로 수행할 수 있다. 

 

필수 파라미터를 포함해서 https://kauth.kakao.com/oauth/token 에 POST로 요청한다. 

요청 성공시 응답은 토큰과 토큰 정보를 포함해서 반환한다. 

 

그리고 이 받은 액세스 토큰으로 사용자 정보 가져오기 API 를 호출해 필요한 사용자 정보를 받아 서비스 회원 가입 및 로그인을 완료해야 한다.

 

KakaoApi

public String getAccessToken(String code)
{
    String reqUrl = "https://kauth.kakao.com/oauth/token";
    RestTemplate restTemplate = new RestTemplate();
    
    // HttpHeader Object
    HttpHeaders headers = new HttpHeaders();
    headers.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
    
    // HttpBody Object
    MultiValueMap<String, String> params = new LinkedMultiValueMap<>();
    params.add("grant_type", "authorization_code");
    params.add("client_id", kakaoApiKey);
    params.add("redirect_uri", kakaoRedirectUri);
    params.add("code", code);
    
    // http 바디 params 와 http 헤더 headers 를 가진 엔티티
    HttpEntity<MultiValueMap<String, String>> kakaoTokenRequest = new HttpEntity<>(params, headers);
    
    // reqUrl 로 Http 요청, POST 방식
    ResponseEntity<String> response = restTemplate.exchange(reqUrl,
                                              HttpMethod.POST,
                                              kakaoTokenRequest,
                                              String.class);
    
    String responseBody = response.getBody();
    JsonObject asJsonObject = JsonParser.parseString(responseBody).getAsJsonObject();
    
    return asJsonObject.get("access_token").getAsString();
}

-> https://kauth.kakao.com/oauth/token 에 받은 grant_type은 authorization_code로 고정하고, client_id, redirect_uri, code 를 담아 post로 요청한다. 

 

이때 반드시 Content-type은 application/x-www-form-urlencoded;charset=utf-8 로 보내야한다!!!! 아니면 에러남 ㅎㅎ 

 

이렇게 요청하면 응답으로 

사용자 엑세스 토큰 값을 전달받는다. 

 

3️⃣ 사용자 정보 가져오기 

이 엑세스 토큰 값을 가지고 현재 로그인한 사용자 정보를 가져와서 이 사용자가 우리 서비스 가입한 회원인지, 아닌지 비교 후 없는 사용자면 회원 가입을 진행하고, 있는 사용자면 정보 비교 후 로그인 처리를 완료하면 된다. 

 

KakaoApi 

public KakaoProfile getUserInfo(String accessToken) {
    String reqUrl = "https://kapi.kakao.com/v2/user/me";
    
    RestTemplate restTemplate = new RestTemplate();
    
    //HttpHeader 오브젝트
    HttpHeaders headers = new HttpHeaders();
    headers.add("Authorization", "Bearer " + accessToken);
    headers.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
    
    //http 헤더(headers)를 가진 엔티티
    HttpEntity<MultiValueMap<String, String>> kakaoProfileRequest = new HttpEntity<>(headers);
    
    //reqUrl로 Http 요청 , POST 방식
    ResponseEntity<String> response = restTemplate.exchange(reqUrl, HttpMethod.POST, kakaoProfileRequest, String.class);
    
    KakaoProfile kakaoProfile = new KakaoProfile(response.getBody());
    
    return kakaoProfile;
}

-> https://kapi.kakao.com/v2/user/me 로 사용자 엑세스 토큰을 Authorization에 담아서  POST 로 요청했다. 

 

요청에 성공하면 이제 응답에 이제 카카오 계정 정보를 담아준다. 

 

*kakao_account에 대한 정보

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#kakaoaccount

Kakao Developers

 

 

KakaoProfile

@Getter
public class KakaoProfile {
    private Integer id;
    private LocalDateTime connectedAt;
    private String nickname;
    
    public KakaoProfile(String jsonResponseBody){
       JsonParser parser = new JsonParser();
       JsonElement element = parser.parse(jsonResponseBody);
       
       this.id = element.getAsJsonObject().get("id").getAsInt();
       
       String connected_at = element.getAsJsonObject().get("connected_at").getAsString();
       connected_at = connected_at.substring(0, connected_at.length() - 1);
       LocalDateTime connectDateTime = LocalDateTime.parse(connected_at, DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss"));
       this.connectedAt = connectDateTime;
       
       JsonObject properties = element.getAsJsonObject().get("properties").getAsJsonObject();
       this.nickname = properties.getAsJsonObject().get("nickname").getAsString();
       
    }
    
}

받은 response body를 KakaoProfile 이라는 vo를 하나 만들어서 회원 번호, 서비스에 연결된 시각, 닉네임 등의 정보를 넣어줬다. 

 

TestController 

@ResponseBody
@GetMapping("/login/kakao/code")
public Map<String, Object> kakaoLogin(@RequestParam String code)
{
    Map<String, Object> map = new HashMap<>();
    // 1. 인가 코드 받기 -> @RequestParam String code
    
    // 2. 토큰 받기
    String accessToken = String.valueOf(kaKaoApi.getAccessToken(code));
    
    // 3. 사용자 정보 받기
    KakaoProfile userInfo = kaKaoApi.getUserInfo(accessToken);
    map.put("nickName", userInfo.getNickname());
    map.put("accessToken", accessToken);
    System.out.println("userInfo.getNickname() = " + userInfo.getNickname());
    System.out.println("accessToken = " + accessToken);
    
    return map;
}

-> 사용자가 로그인한 버튼을 눌렀을 때 동작하는 코드이다. (로그인 후 다른 처리를 하지 않고 있기 때문에 그냥 정보를 MAP에 담아 리턴해 마무리한다.) 

 

여기까지가 카카오 로그인 API를 사용하는 작업이고, 그 뒤에 각자의 서비스에 회원 가입 및 로그인 처리 완료는 직접 구현해야한다! 

나는 우선 여기까지만 구현하고, 나중에 시큐리티를 사용해서 더 발전시켜볼 예정이다.!