39_Step : 카카오 ID로 로그인 연동하기(2)

카카오 서버를 사용할 준비를 마쳤으면 본격적으로 사용을 한다. 먼저 카카오 서버에 있는 사용자의 정보를 가져오기 위해 카카오 서버에서 인가코드를 발급 받아온다. 

 

 

 

다음은 카카오 로그인 구현 시에 REST API를 사용한 로그인 과정의 시퀀스 다이어그램이다. 이를 통해 단계별로 어떻게 진행되는지 확인해 보는 것이 좋다.

 

출처 : 카카오

출처 : 카카오

 

아래의 링크에 가면 카카오 로그인에 대한 전반적인 설명과 사용방법에 대해 자세히 나와있다.

 

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

Kakao Developers

 

 

링크를 타고 들어가면 인가코드를 받는 방법에 대해 자세히 설명이 되어있으니 잘 따라하여 코드를 받는다.

 

https://kauth.kakao.com/oauth/authorize?client_id=본인의 REST API키&redirect_uri=http://localhost:8080/kakao/ca
llback&response_type=code

 

인가코드를 받았으면 로그인 페이지의 html에 위의 코드를 넣고, '본인의 REST API키' 부분에 REST API 키를 넣어준다.

REST API 키는 카카오 디벨로퍼스에서 확인할 수가 있다. 링크를 타고 들어가보면 내 애플리케이션에 만들어놨던 앱을 클릭했을때 아래와 같이 나올텐데 이 중 REST API 키를 복사해서 쓰면 된다.

 

 

https://developers.kakao.com/console/app

카카오계정 로그인

 

 

 

 

REST API 키까지 다 받아서 로그인 페이지에 입력해놨다면 이제 아까 받아뒀던 인가코드를 controller에 입력할 차례이다. 카카오로부터 인가코드를 controller가 받아서 그 인가코드를 가지고 service가 로그인 처리하는 과정이 진행된다.

 

 

@GetMapping("/kakao/callback")
public String kakaoLogin(@RequestParam String code) {
    // authorizedCode: 카카오 서버로부터 받은 인가 코드
    userService.kakaoLogin(code);
    return "redirect:/";
}

 

 

 

controller가 인가코드를 받아올 준비가 되었다면 service를 생성해서 받아온 인가코드를 가지고 로그인 처리를 할 수 있도록 만들어준다.

 

 

// 1. "인가 코드"로 "액세스 토큰" 요청

// HTTP Header 생성
HttpHeaders headers = new HttpHeaders();
headers.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8");

// HTTP Body 생성
MultiValueMap<String, String> body = new LinkedMultiValueMap<>();
body.add("grant_type", "authorization_code");
body.add("client_id", "본인의 REST API키");
body.add("redirect_uri", "http://localhost:8080/kakao/callback");
body.add("code", code);

// HTTP 요청 보내기
HttpEntity<MultiValueMap<String, String>> kakaoTokenRequest =
	new HttpEntity<>(body, headers);
RestTemplate rt = new RestTemplate();
ResponseEntity<String> response = rt.exchange(
    "https://kauth.kakao.com/oauth/token",
    HttpMethod.POST,
    kakaoTokenRequest,
    String.class
);

// HTTP 응답 (JSON) -> 액세스 토큰 파싱
String responseBody = response.getBody();
ObjectMapper objectMapper = new ObjectMapper();
JsonNode jsonNode = objectMapper.readTree(responseBody);
String accessToken = jsonNode.get("access_token").asText();

 

 

카카오 로그인을 담당하는 service를 생성하여 위의 코드를 입력해주고 body.add("client_id", "본인의 REST API키") 부분에 REST API 키를 본인의 키로 바꿔주어서 액세스 토큰을 요청해준다.

 

 

// 2. 토큰으로 카카오 API 호출

// HTTP Header 생성
headers.add("Authorization", "Bearer " + accessToken);
headers.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8");

// HTTP 요청 보내기
HttpEntity<MultiValueMap<String, String>> kakaoUserInfoRequest = new HttpEntity<>(headers);
response = rt.exchange(
    "https://kapi.kakao.com/v2/user/me",
    HttpMethod.POST,
    kakaoUserInfoRequest,
    String.class
);

responseBody = response.getBody();
jsonNode = objectMapper.readTree(responseBody);
Long id = jsonNode.get("id").asLong();
String nickname = jsonNode.get("properties")
	.get("nickname").asText();
String email = jsonNode.get("kakao_account")
	.get("email").asText();
    
System.out.println("카카오 사용자 정보: " + id + ", " + nickname + ", " + email);

 

 

위의 내용도 그 뒤에 같이 붙여주서 카카오로부터 액세스 토큰으로 사용자 정보를 요청하여 가져오도록 한다.

 

 

이렇게 한 뒤에 기존에 작성했던 model, service, dto, repository, controller 등을 카카오 로그인 항목을 새로 만들고 리팩토링 해주면 OAuth를 활용하여 별도의 회원가입 없이 카카오 로그인을 통해 웹사이트의 서비스를 사용할 수 있게 된다.