[Spring] kakao api / token 발급 / kakao login/logout

kakao api 발급

카카오 api를 사용해서 유저의 정보를 만드는 과정중에서 다른사람이 쓴 글을 보고 참고해서 만들었다. 다들 만드는것이 거의 비슷할테지만 프론트랑 연결하는 부분과 조금씩 다른 부분이 있어서 저장용으로 글을 썼다.

 

개발자 페이지 접속

https://developers.kakao.com/

Kakao Developers

카카오 개발자 페이지에 접속한다.

 

 

내 애플리케이션 클릭

위쪽에 내 어플리케이션을 누른다.

내 애플리케이션 클릭

 

 

애플리케이션 추가

그후 애플리케이션 추가를 눌러준다.

추가한후, 들어가보면 4개의 키를 확인 할 수 있을텐데, 그중에서 REST API키를 확인한다.

 

 

 

REST API 키 확인

 

 

 

플랫폼 설정

왼쪽에 플랫폼 설정을 눌러주면,

밑에 Web으로 테스트를 하기 위해서 localhost:8080 으로 설정했다. 각자 본인의 도메인을 추가하면 된다.

 

 

Client secret 발급

본인은 보안을 위해서 Client secret 키도 발급 받았는데, 이건 자유다.

 

 

카카오 로그인 활성화

상태를 ON으로 한다.

 

 

동의 항목 설정

 

이해가 안된다면, 공식문서에도 똑같은 순서로 올려져 있다.

 

https://developers.kakao.com/docs/latest/ko/getting-started/quick-start

Kakao Developers

 

 

Authorizaiton Code 발급

 

 

위의 형식에 맞게 요청 URL을 작성하면된다.

요청 URL 작성

본인의 경우, client_id와 redirect_url을 넣어서 작성했지만, url은 인코딩을 해주었다.

https://kauth.kakao.com/oauth/authorize?response_type=code
&client_id=41edb156a54ce9db651ea3f661053d5d
&redirect_uri=http%3a%2f%2flocalhost%3a8080%2foauth%2fkakao

이런식으로 되어있다.

 

현재 만들고 있는 프로젝트에 적용을 해보면, html에서 간단하게 a 태그를 이용해서 

<a href="https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=41edb156a54ce9db651ea3f661053d5d&redirect_uri=http%3a%2f%2flocalhost%3a8080%2foauth%2fkakao">
            요청 URI
        </a>

이런식으로 테스트를 해보았는데,

 

눌렀을 경우에 카카오 로그인 페이지로 잘 넘어가는 모습을 볼 수 있다.

그후 로그인을 하고, 동의까지 해주면 넘어가는 url에서 Authorization Code가 redirect_uri에 포함되어 전송된다.

 

http://localhost:8080/oauth/kakao?
code=AmM-cSaNYMisacRIng03eISFqgaupEG5pYl9zpcejjHyDL6RCqqNtAmg5dNarjs39RMdPQo9c-wAAAGKyeilsA

 

 

Access Token 발급

 

 

Controller

package com.example.chat.controller;

import com.example.chat.service.GetUserInfoService;
import com.example.chat.service.RestJsonService;
import org.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
@RequestMapping("/oauth")
public class KaKaoLoginController {

    @GetMapping("/kakao")
    public String receiveAC(@RequestParam("code") String code, Model model){
        System.out.println(code);
        RestJsonService restJsonService = new RestJsonService();

        //access_token이 포함된 JSON String을 받아온다.
        String accessTokenJsonData = restJsonService.getAccessTokenJsonData(code);
        if(accessTokenJsonData=="error") return "/chat/error";


        //JSON String -> JSON Object
        JSONObject accessTokenJsonObject = new JSONObject(accessTokenJsonData);

        //access_token 추출
        String accessToken = accessTokenJsonObject.get("access_token").toString();

        //유저 정보가 포함된 JSON String을 받아온다.
        GetUserInfoService getUserInfoService = new GetUserInfoService();
        String userInfo = getUserInfoService.getUserInfo(accessToken);

        //JSON String -> JSON Object
        JSONObject userInfoJsonObject = new JSONObject(userInfo);

        //유저의 Email 추출
        JSONObject kakaoAccountJsonObject = (JSONObject)userInfoJsonObject.get("kakao_account");
        String email = kakaoAccountJsonObject.get("email").toString();



        //View에서 사용할 변수 설정
        model.addAttribute("email", email);

        System.out.println(email);

        return "/chat/room";
    }

}

 

 

Service

Service를 만들기 전에

Content-type Header를 위와 같은 형식으로 맞춰야 한다.

 

 

package com.example.chat.service;

import org.springframework.http.*;
import org.springframework.web.client.RestTemplate;
import org.springframework.web.util.UriComponentsBuilder;

public class RestJsonService {
    private final String GRANT_TYPE= "authorization_code";
    private final String CLIENT_ID = "41edb156a54ce9db651ea3f661053d5d";
    private final String REDIRECT_URI= "http://localhost:8080/oauth/kakao";
    private final String CLIENT_SECRET= ""; //이하 생략
    private final String TOKEN_URL = "https://kauth.kakao.com/oauth/token";

    public String getAccessTokenJsonData(String code){
        RestTemplate restTemplate = new RestTemplate();

        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);
        HttpEntity<?> request = new HttpEntity<>(headers);

        UriComponentsBuilder uriComponentsBuilder = UriComponentsBuilder.fromHttpUrl(TOKEN_URL)
                .queryParam("grant_type", GRANT_TYPE)
                .queryParam("client_id", CLIENT_ID)
                .queryParam("redirect_uri", REDIRECT_URI)
                .queryParam("code", code)
                .queryParam("client_secret", CLIENT_SECRET);

        ResponseEntity<String> responseEntity = restTemplate.exchange(
                uriComponentsBuilder.toUriString(),
                HttpMethod.POST,
                request,
                String.class
        );

        if (responseEntity.getStatusCode() == HttpStatus.OK) {
            return responseEntity.getBody();
        }
        return "error";
    }
}

 

 

응답 양식 테스트

이제 테스트를 해보기전에,

REST API 응답 양식을 테스트 해볼 수 있는데,

 

 

 

https://developers.kakao.com/tool/rest-api/open/get/v2-user-me

카카오계정

 

들어가서 토큰 발급을 누르면 밑에  현재 로그인된 아이디의 카카오 api정보를 JSON 형식으로 볼 수 있다.

 

 

 

 

GetUserInfoService

package com.example.chat.service;

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.URL;

public class GetUserInfoService {
    private final String HTTP_REQUEST = "https://kapi.kakao.com/v2/user/me";

    public String getUserInfo(String accessToken){
        try {
            String jsonData = "";

            // URI를 URL객체로 저장
            URL url = new URL(HTTP_REQUEST + "?access_token=" + accessToken);

            // 버퍼 데이터(응답 메세지)를 한 줄씩 읽어서 jsonData에 저장
            BufferedReader bf;
            bf = new BufferedReader(new InputStreamReader(url.openStream(), "UTF-8"));
            String line;
            while((line = bf.readLine()) != null){
                jsonData+=line;
            }
            return jsonData;

        } catch(Exception e) {
            return "success";
        }
    }
}

 

이후 테스트를 해보았는데,

와 같이 이메일에 잘 불러오는 모습을 볼 수있다.

<div>
        <a href="https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=41edb156a54ce9db651ea3f661053d5d&redirect_uri=http%3a%2f%2flocalhost%3a8080%2foauth%2fkakao">
            요청 URI
        </a>
        <h2>이메일</h2>
        <p th:text="${email}">테스트</p><br>
</div>

html은 이런형식으로 되어 있다. 컨트롤러에서 모델값으로 넘겨주었기 때문에 타임리프 문법으로 값을 받아왔다.

타임리프와 관련해서는 여기 블로그를 참고했다.

https://taehoung0102.tistory.com/183

스프링 타임리프(Thymleaf) 한눈에 정리하기

 

테스트를 위해 바로 값을 넘겨 확인해보았지만, 결국 로그인 로직후 어떤 페이지에서도 값을 사용하기위해서는 session을 사용해야한다. session 관련 처리글은 찾아보면 많이 있기 때문에, 필요시 찾아보길 권한다.

 

 

로그아웃

로그아웃도 마찬가지로 카카오 디벨로퍼에서 먼저 설정을 해주고, 문서를 보면

 

access_token은 필요없다.

https://kauth.kakao.com/oauth/logout?
client_id=41edb156a54ce9db651ea3f661053d5d&
logout_redirect_uri=http://localhost:8080/chat/room

이런식으로 Hmtl 문서에 추가를 해주었더니, 잘 로그아웃이 되는것을 확인했다.

 

 

본인 저장용으로 글을 썼으며, 나중에 다시 카카오 api와 관련해서 사용할 일이 있을경우에 다시 봐야겠다.