🔥 #17 카카오 로그인 서비스 구현 1 - 인증 및 권한 부여 (Access Token 받기)

카카오 로그인 서비스를 구현하기 위해 카카오 개발자 센터에서 추가하고, 얻은 정보는 아래와 같다.

카카오 api
클라이언트 키 : d5526e3b2a4169a3d9f2b7a6f9a12..~~~
	
웹서버주소 : http://localhost:8000

카카오 로그인요청 콜백 주소: http://localhost:8000/auth/kakao/callback

카카오로부터 받을 정보 : profile 정보(필수) , email(선택)

로그인 요청 주소(GET)

내가 쓸 것 : https://kauth.kakao.com/oauth/authorize?client_id=d5526e3b2a4169a3d9f2b7a6f9a12cdf&redirect_uri=http://localhost:8000/auth/kakao/callback&response_type=code

카카오 로그인 버튼에 위 주소를 href 로 걸어주면 된다.
이때는 위의 사진에서 볼 수 있듯이 GET 방식이다.

⭐따라서 주소를 통해 (쿼리 스트링) 데이터를 전달한다. a 태그!!

< loginForm.jsp >

<a href="https://kauth.kakao.com/oauth/authorize?client_id=d5526e3b2a4169a3d9f2b7a6f9a12cdf&redirect_uri=http://localhost:8000/auth/kakao/callback&response_type=code"><img height="38px" src="/image/kakao_login_button.png" /></a>

응답 받은 코드 : http://localhost:8000/auth/kakao/callback?code=04MBIEBh-YAPy8FFBCCoe9h9L_NggQqfavAkjnQgbQ06FYQEbkC_YPG6-UBz9hyZxdBFiQorDKYAAAF_J2OJxg

---

💡 인증처리 - code

    @GetMapping("/auth/kakao/callback")
    public @ResponseBody String kakaoCallback(String code) { // @ResponseBody : Data를 리턴해주는 컨트롤러 함수
        return "카카오 인증 완료 : 코드값 : " + code;
    }

위를 보면 code= 하고 카카오 API 서버로부터 code를 받았다. 즉, 정상적으로 인증처리가 완료 되었다는 것이다!

-> 로그인을 통해 인증은 되었지만, 그 유저의 정보를 모른다!!! 정보에 접근하기 위해서는 토큰을 받아야 한다.

---

💡 권한부여 - AccessToken

이제 응답 받은 code 값을 통해서 AccessToken 을 받아야 한다.
카카오 리소스 서버에 등록된 로그인된 사람의 정보를 응답받기 위해서 이다.
즉, 카카오 리소스 서버에 있는 해당 정보에 접근할 수 있는 권한을 얻을 수 있다.

📢토큰 발급 요청

위의 사진에서 알 수 있듯이 POST 방식이다.
⭐GET 방식처럼 주소를 통해 (쿼리 스트링) 데이터를 전달하는 것이 아닌!! http Body에 데이터를 전달한다.

토큰 발급 요청 주소 (POST)
MIME : application/x-www-form-urlencoded;charset=utf-8 -> (key=value) 형태
https://kauth.kakao.com/oauth/token

grant_type = authorization_code
client_id = d5526e3b2a4169a3d9f2b7a6f9a12cdf
redirect_uri = http://localhost:8000/auth/kakao/callback
code = {동적}

< UserController >

    @GetMapping("/auth/kakao/callback")
    public @ResponseBody String kakaoCallback(String code) { // @ResponseBody : Data를 리턴해주는 컨트롤러 함수

        // 카카오 API 서버에게 POST 방식으로 key=value 데이터를 요청
        // 요청 방법 -> 여러가지 라이브러리  : HttpsURLConnection, Retrofit2(주로 안드로이드), OkHttp, RestTemplate
        RestTemplate rt = new RestTemplate();

        // HttpHeader 객체 생성
       	HttpHeaders headers = new HttpHeaders();
        headers.add("Content-type", "application/x-www-form-urlencoded;charset=utf-8"); // key=value 형태의 데이터라는 것을 알려주는 부분

        // HttpBody 객체 생성
        MultiValueMap<String, String> params = new LinkedMultiValueMap<>();
        params.add("grant_type", "authorization_code");
        params.add("client_id", "d5526e3b2a4169a3d9f2b7a6f9a12cdf");
        params.add("redirect_uri", "http://localhost:8000/auth/kakao/callback");
        params.add("code", code);

        // HttpHeader와 HttpBody를 하나의 객체에 담기 -> 만든 이유 : 아래의 exchange 함수에 HttpEntity를 넣어야 해서..
        HttpEntity<MultiValueMap<String, String>> kakaoTokenRequest =
                new HttpEntity<>(params, headers); // body 데이터와 headers 값을 가지고 있는 Entity

        // 카카오에게 Http 요청하기 (POST 방식) -> response라는 변수에 응답을 받음
        ResponseEntity<String> response = rt.exchange(
                "https://kauth.kakao.com/oauth/token",
                HttpMethod.POST,
                kakaoTokenRequest,
                String.class
        );

//        return "카카오 인증 완료 : 코드값 : " + code;
        return "카카오 토큰 요청 완료 : 토큰요청에 대한 응답 : " + response;
    }

위의 코드는 요청 방법이다.
RestTemplate 라이브러리를 사용했고, HttpHeader 객체 생성, HttpBody 객체 생성, Http 요청까지 차례대로 구현했다.

응답이 이렇게 왔다!!

📢토큰 응답

위에서 요청에 대한 응답 내용을 뜯어보자!

카카오 토큰 요청 완료 : 토큰요청에 대한 응답 : <200,{"access_token":"0gFpYkxJJHa3BNFx1ZZn3XvKjCHjJHYBpHxh2go9dJcAAAF_J7AhMA","token_type":"bearer","refresh_token":"Esq-jTYjpVt_R5_gRWAR04ZVoqewddpfbMyZ2Ao9dJcAAAF_J7AhLg","expires_in":21599,"scope":"account_email profile_image profile_nickname","refresh_token_expires_in":5183999},[Date:"Wed, 23 Feb 2022 17:45:28 GMT", Content-Type:"application/json;charset=utf-8", Transfer-Encoding:"chunked", Connection:"keep-alive", Cache-Control:"no-cache, no-store, max-age=0, must-revalidate", Pragma:"no-cache", Expires:"0", X-XSS-Protection:"1; mode=block", X-Frame-Options:"DENY", X-Content-Type-Options:"nosniff", Kakao:"Talk", Access-Control-Allow-Origin:"*", Access-Control-Allow-Methods:"GET, POST, OPTIONS", Access-Control-Allow-Headers:"Authorization, KA, Origin, X-Requested-With, Content-Type, Accept"]>

200은 요청성공 이다 !

• token_type : bearer
• access_token : 0gFpYkxJJHa3BNFx1ZZn3XvKjCHjJHYBpHxh2go9dJcAAAF_J7AhMA
• expires_in : 21599
• refresh_token : Esq-jTYjpVt_R5_gRWAR04ZVoqewddpfbMyZ2Ao9dJcAAAF_J7AhLg
• refresh_token_expires_in : 5183999
• scope : account_email profile_image profile_nickname

scope 는 내가 개인정보 동의 항목을 설정할 때, 프로필 정보(닉네임/프로필사진) 과 카카오계정(이메일) 만 동의를 해놨기 때문에 위처럼 응답이 된다.

응답이 json 객체로 왔으니 이를 쉽게 확인하기 위해 Parser로 보았다.

-> access_token 을 받았으니, 이 토큰을 이용하여 방금 로그인한 사용자의 정보가 저장된 카카오의 자원서버에 접근할 수 있는 권한이 생겼다.

-> 이제 카카오로 로그인한 회원의 개인정보를 요청하면 된다.

---

<이번 게시글에서 사용한 정보들>