Sneakers Mania - 카카오 로그인(3)

인증 코드 받기

인증 코드란?

인증 코드 받기는 카카오 로그인을 시작하는 단계로써, 카카오 로그인 동의 화면을 호출하고, 사용자 동의를 거쳐 인증 코드 발급을 요청하는 API이다.

사용자는 동의 화면에서 서비스 이용 시 필요한 사용자 정보 및 권한 제공에 동의하고 로그인을 요청하거나 로그인을 취소할 수 있다.

사용자가 필수 동의 항목에 모두 동의한 뒤 "동의하고 계속하기" 버튼을 누르면, 카카오 인증 서버는 해당 사용자에 대한 인증 코드를 발급해 서비스의 redirect_uri에 전달한다.

 

 

인증 코드를 요청하기 위한 URI는 카카오 개발자 홈페이지에서 확인할 수 있으며, 위 사진과 같다.

 

1. 인증 코드 요청

 

ㆍ loginForm.jsp 파일에 카카오 로그인 버튼을 생성한 후, href 속성에 위에서 확인한 인증 코드 요청 URI를 작성한다.

ㆍ 인증 코드 요청 URI의 {REST_API_KEY}, {REDIRECT_URI}는 이전 게시글에서 설정한 REST API 키와 Redirect URI를 작성한다.

 

2. 테스트

 

ㆍ 로그인 페이지에서 카카오 로그인 버튼을 클릭한다.

 

 

ㆍ 카카오 로그인 버튼을 클릭하면 카카오 로그인을 수행할 수 있는 페이지가 나온다.

 

 

ㆍ 카카오 로그인이 정상적으로 수행되었다면, 서비스 이용 동의 화면이 나온다.

ㆍ 필수 동의 항목에 모두 동의한 뒤 "동의하고 계속하기" 버튼을 누른다.

 

 

ㆍ "동의하고 계속하기" 버튼을 누르면, 개발자가 설정한 Redirect URI 주소로 위 사진에 표시된 것처럼 인증 코드를 응답받을 수 있다.

ㆍ 해당 코드를 받았다는 의미는 카카오 로그인 인증이 정상적으로 처리가 됐다는 뜻이다.

---

액세스 토큰 받기

액세스 토큰이란?

인증 코드를 받은 뒤, 인증 코드로 액세스 토큰을 발급받을 수 있다.

인증 코드 받기만으로는 카카오 로그인이 완료되지 않으며, 액세스 토큰 받기까지 마쳐야 카카오 로그인을 정상적으로 완료할 수 있다.

필수 파라미터 값들을 담아 POST로 요청한다. 요청 성공 시, 응답은 JSON 객체로 Redirect URI에 전달된다.

 

액세스 토큰 요청은 카카오 개발자 홈페이지에서 확인할 수 있고, 위 사진과 같이 POST 방식으로 요청을 하며 총 5가지 파라미터들을 요구한다.

 

1. 액세스 토큰 요청

@ResponseBody
@GetMapping("/auth/kakao/callback")
public String kakaoCallback(String code) throws JsonProcessingException {

    // ==================== 사용자 Access Token 요청 ====================
    RestTemplate rt = new RestTemplate();

    /* HttpHeader 오브젝트 생성 */
    HttpHeaders headers = new HttpHeaders();
    headers.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8");

    /* HttpBody 오브젝트 생성 */
    MultiValueMap<String, String> params = new LinkedMultiValueMap<>();
    params.add("grant_type", "authorization_code");
    params.add("client_id", "9cbe170d83aa45724a840169b89614f6");
    params.add("redirect_uri", "http://localhost:8000/auth/kakao/callback");
    params.add("code", code);

    /* HttpHeader와 HttpBody를 하나의 오브젝트로 담기 */
    HttpEntity<MultiValueMap<String, String>> kakaoTokenRequest =
                new HttpEntity<>(params, headers);

    /* Post 방식의 Http 요청 */
    ResponseEntity<String> response = rt.exchange(
            "https://kauth.kakao.com/oauth/token",   // 요청 주소
            HttpMethod.POST,   // method 방식
            kakaoTokenRequest,   // 전달 데이터
            String.class   // 응답받을 데이터 타입
    );

    return "액세스 토큰 : " + response;
}

ㆍ 인증 코드를 활용하여 액세스 토큰을 받기 위한 컨트롤러이다.

ㆍ 액세스 토큰을 발급받기 위해서 RestTemplate 라이브러리를 활용하였으며, 해당 라이브러리를 활용한 HTTP 요청 과정은 아래에서 살펴보겠다.

 

RestTemplate rt = new RestTemplate();

ㆍ 우선, RestTemplate 객체를 생성한다.

 

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

ㆍ HTTP 통신에 필요한 HttpHeaders 오브젝트를 생성하고, 카카오 측에서 요구한 Content-type을 설정한다.

 

MultiValueMap<String, String> params = new LinkedMultiValueMap<>();
params.add("grant_type", "authorization_code");
params.add("client_id", "9cbe170d83aa45724a840169b89614f6");
params.add("redirect_uri", "http://localhost:8000/auth/kakao/callback");
params.add("code", code);

ㆍ HttpHeaders 오브젝트를 생성한 후 HTTP 통신에 필요한 HttpBody 오브젝트를 생성한다.

ㆍ HttpBody는 key-value 형태로 전송해야 하기 때문에, MultiValueMap 타입으로 선언한다.

ㆍ 카카오 측에서 요구한 데이터인 "grant_type", "client_id" 등 총 4가지 필수 데이터를 요구사항에 맞게 설정한다.

 

HttpEntity<MultiValueMap<String, String>> kakaoTokenRequest = new HttpEntity<>(params, headers);

ㆍ HttpHeaders와 HttpBody를 하나의 오브젝트로 담기 위해 HttpEntity 타입으로 선언한다.

 

ResponseEntity<String> response = rt.exchange(
        "https://kauth.kakao.com/oauth/token",   // 요청 주소
        HttpMethod.POST,   // method 방식
        kakaoTokenRequest,   // 전달 데이터
        String.class   // 응답받을 데이터 타입
);

ㆍ 카카오 액세스 토큰 요청 주소에 POST 방식으로 위에서 만든 데이터를 전달한다.

 

2. 테스트

 

ㆍ 로그인 페이지에서 카카오 로그인 버튼을 클릭한다.

 

 

ㆍ 카카오 로그인 버튼을 클릭하면 카카오 로그인을 수행할 수 있는 페이지가 나온다.

ㆍ 본인의 카카오 계정을 통해서 로그인을 수행한다.

 

 

ㆍ 카카오 로그인이 성공적으로 완료되었으면, 개발자가 설정한 Redirect URI 주소로 위 사진에 표시된 것처럼 액세스 코드를 응답받을 수 있다.

---

GitHub - qlsdud0604/sneakers-mania: 👟 신발 사진을 업로드하고 소통할 수 있는 커뮤니티