[블로그프로젝트] 29. 카카오 AccessToken 받기

유튜브에서 블로그 만들기 프로젝트를 따라하면서 나의 스킬을 조금더 레벨업 하고자 한다.

IDE : IntelliJ

언어 : Java

DB : MySQL

빌드관리 도구 : Maven

OS : iOS

참고유튜브 : 메타코딩

---

저번시간에 카카오톡 로그인을 위한 환경설정을 진행했다면 이번엔 로그인요청을해서 카카오쪽에서 AccessToken을 받아보는 작업을 진행해보자

 

우선 카카오개발자센터에서 REST API쪽으로 이동해서 마음에 드는 카카오톡버튼 이미지를 다운받는다.

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

resources/static 하위폴더로 image를 생성해서 다운받은 이미지 파일을 붙여넣기를한다.

나는 여기서 이미지의 이름을 kakao_login_button 으로 변경하였다.

 

loginForm으로 이동해서 로그인버튼 아래에 a태그를 생성해서 가져온 이미지파일의 경로를 넣어준다.

사진의 높이가 맞지않아서 높이도 맞춰주었다.

<a href="#"><img height="38" src="/image/kakao_login_button.png"/></a>

 

 

securityConfig로 이동해서 경로에 "/image"를 추가하지 않았다면 추가해주어야한다.

 

서버를 실행해서 로그인화면으로 이동해보면 카카오톡 로그인버튼이 생긴걸 확인할 수 있다.

 

카카오개발자센터에가면 REST API를 사용해서 로그인하는 과정을 볼 수 있으니 확인해보면 된다.

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

Kakao Developers

 

이제 카카오쪽에서 인가코드를 받기위해서 이동할 주소를 작성해보도록 할 것이다.

우리가 필요한 파라미터들은 필수인 client_id, redirect_url, response_type이 3가지이다.

 

우선 기본적인 url은 다음과 같다.

https://kauth.kakao.com/oauth/token

 

아래에 다양한 예제들이 있으니 이를 활용해서 한번 진행해보면(아래에코드는 성별(gender)를 뺀 코드이다)

필수항목 3개중에서 response_type은 code로 고정되어있다고 위에 나와있으니 나머지 2개인

REST_API_KEY와 REDIRECT_URI를 채워넣어주면 된다.

저번시간에 설정한 rest_api_key와 redirect_url을 넣어주면 되는데 "내 애플리케이션"에서 확인할 수 있다.

 

https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=account_email

 

 

그렇게 만든 주소를 href에 넣어주고 저장후 로그인버튼을 눌러보면 익숙한 화면이 뜬다.

해당화면이 뜬다면 주소가 잘 작성이 된것이다.

 

해당화면에서 로그인을 해보면 404 에러가 뜨는걸 확인할 수 있는데 이건 컨트롤러를 만들지 않았기 때문이다.

 

userController로 이동해서 getmapping으로 주소(/auth/kakao/callback)를 받아서 로그인버튼을 눌러서 code를 한번 출력해보면

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

        return "kakao authentication complete : code : "+code;
    }

 

개발자센터에서 code로 고정한 response_type을 받아오는걸 확인할 수 있다.

LoginForm에서 카카오로그인을 하면 해당 내용이 나온다.

 

 

http요청 라이브러리중 RestTemplate을 사용하여 회원의 정보를 읽을수 있는 권한을 주는 토큰을 요청해보자

 

헤더부분에 담아야할부분은 아래와 같다

 

바디에 담을 정보는 다음과 같다.

 

httpHeaders로 헤더에 넣어야할 값을 add 해주고

multiValueMap으로 바디에 넣어야할 값들을 add 해준 후 

 

헤더와 바디를 하나의 객체로 담아서 post 형식으로 응답받으면 된다.

여기서 어떠한 값들을 응답받았는지 response를 리턴해줘서 확인해보면

    @GetMapping("/auth/kakao/callback")
    public @ResponseBody String kakaoCallback(String code){
		//http 요청
        RestTemplate restTemplate = new RestTemplate();

        //HttpHedaer 오브젝트 생성
        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","ec5b120dbe81f1ee4e8b4309a7081309");
        params.add("redirect_uri","http://localhost:8085/auth/kakao/callback");
        params.add("code",code);

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

        //Http 요청하기 post방식 -> response 변수의 응답받음

        ResponseEntity<String> response = restTemplate.exchange(
                "https://kauth.kakao.com/oauth/token",
                HttpMethod.POST,
                kakaoTokenRequest,
                String.class
        );


        return "kakao token complete : response : "+response;
    }

 

200뜨면서 응답을 잘 받고있다고 알려주고 있다.

좀더 보기 편하게 중괄호부분 access_token부터 끝까지 복사해서 아래 주소로 이동해서 확인해보자

http://json.parser.online.fr/

중괄호("{}")에 있는 부분을 복사해서 좀더 편하게 확인해보면

아래와 같이 바디부분에 요청한대로 값들이 잘 들어오는걸 확인할 수 있다.

이제 로그인한 유저의 동의로 해당 유저가 동의한 유저의 정보(이메일주소)를 카카오쪽에서 받아서 사용할수 있는 권한을 위임 받은것이다.