블로그 만들기 | [카카오 API] 엑세스 토큰 받기(2)

 

카카오 로그인 세팅하기

 

https://developers.kakao.com/

Kakao Developers

• 먼저 로그인 후 - 내 어플리케이션 - 어플리케이션 추가 - 앱이름,사업자명 적고 저장 
• 방금 만든 어플리케이션 클릭하여 플랫폼 설정하기 클릭 - Web 플랫폼 등록 - http://localhost:8080 적고 저장
• 제품 설정에 '카카오 로그인' 클릭

       - 활성화 설정을 on 으로 설정

       - Redirect URI - http://localhost:8080/auth/kakao/callback 적고 저장. 

        Redirect URI 는 카카오 로그인 후 정상적으로 되면 데이터가 응답받을 주소이다.

 

• '동의항목 설정' 클릭 

      - 닉네임, 프로필 사진 설정에 '필수동의'를 하고 동의 목적은 '카카오 로그인 서비스 개발 테스트'

      - 카카오계정(이메일) - 선택 동의 하고 동의 목적도 동일

        나머지는 필요없음 → User 객체에 id(번호), username, password, email 만 있어서 

 

 

 

OAuth 개념이해

 

open auth 인증처리를 대신 해준다.

 

• 홍길동 : 리소스 오너
• 블로그 서버 : 클라이언트
• 카카오 api 서버 : 인증 서버

 

홍길동이 블로그에 로그인 요청을 할때 블로그는 로그인페이지를 넘겨줌으로써 로그인 응답을 해준다.

그러나 카카오 로그인을 한다면 홍길동이 카카오 서버쪽으로 다이렉트로 요청을 한다.

그렇게 되면 카카오 로그인 창이 뜨며 다음 창으로는 카카오 동의창이 뜬다.

 

정상적인 유저라면 카카오 서버가 블로그에게 리다이렉트(콜백)를 해주는 동시에 코드값도 함께 준다.

블로그는 코드를 받음으로서 인증처리 완료가 된다.

여기서 끝나지 않고 카카오 서버는 홍길동 정보가 저장 돼 있는 자원서버가 있는데 

블로그가 카카오 서버에게 코드를 주면서  '자원서버에 있는 홍길동 데이터에 접근하게 권한을 줘!'

카카오는 블로그에게 Access Token 을 준다. 이것은 블로그가 홍길동 정보에 접근할 수 있는 권한을 부여한다.

즉 홍길동이 블로그에게 내 정보를 접근 할 수 있는 권한을 위임한 것!

 

코드받기  = 인증처리 완료

엑세스 토큰 받기 = 유저 권한부여 

 

 

 

카카오 버튼 다운받기

* 도구 - 리소스 다운로드 - 카카오 로그인 - 축약형 png로 다운로드

 

 

사진을 Image 폴더에 저장

 

 

[loginForm.jsp]

로그인 버튼 옆에 카카오 로그인 버튼을 a태그로 넣기 

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

 

1. 카카오로부터 코드를 받는 방법

 

* 문서 - 카카오 로그인 - REST API - 인가 코드 받기 - HOST + GET 주소를 넣으면 된다

 

로그인 요청 주소 :

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

• ${REST_API_KEY} 는 내 어플리케이션의 client_id 를 넣으면 된다
• ${REDIRECT_URI} 는 콜백 주소를 넣으면 된다.

 

kauth.kakao.com 해당 주소에 카카오가 코드를 넘겨준다. = 인증완료 라는 뜻

 

 

redirect uri : 인증 코드가 리다이렉트 됐다는 말은 다시 말해 해당 아이디,비밀번호가 일치하여 카카오 로그인이 정상적으로 이뤄어졌으므로 인증이 되어 블로그 서버에게 코드를 넘겨준다. 

 

 

 

• 나의 카카오 로그인 요청 주소

https://kauth.kakao.com/oauth/authorize?client_id=e801f6365d439407c6f6764bf7dc64ef&redirect_uri=http://localhost:8000/auth/kakao/callback&response_type=code 

http://localhost:8000/auth/kakao/callback?code=aplO7h0xAp5TH1tSH0Ce36WQaKwqa4W1BPAVIWwUHojcWq3_IpjLPHdcaW_bsW-bA3tSdQopyWAAAAGDanxc5A

 

해당 주소에 카카오가 코드를 넘겨준다 = 정상적으로 인증이 완료.

 

 

• 로그인 요청 주소를 카카오 로그인 버튼 a태그 주소에 넣기 

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

 

 

 

 

이제 카카오 로그인 창이 뜨고 (카카오 로그아웃을 해야 함)  로그인 후 동의 창이 뜬다.

로그인 창

동의 창

 

 

동의를 하면 카카오가 코드를 넘겨주고 인증완료가 됨 

이제  auth/kakao/callback 주소의 Controller 를 만들어주자

 

 

 

1-1. auth/kakao/callback 주소의 Controller 만들기

 

 

[UserController]

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

@ResponseBody 는 Data를 리턴해주는 컨트롤러 함수

 

 

 

코드 값을 받았으니까 인증은 완료

 

 

 

 

 

카카오 로그인을 통해 인증된 사용자라서 블로그에서는 로그인처리 하고 글쓰기 권한을 줄 수 있으나 

블로그 서버에서는 사용자 정보를 모르기 때문에 사용자 토큰을 받아서 정보에 접근을 하고 카카오 로그인을 정상완료한다.  

 

 

 

2. 엑세스 토큰 받는 방법

 

• 주소 ( HOST + POST ) : https://kauth.kakao.com/oauth/token
• Content-type(MIME): application/x-www-form-urlencoded;charset=utf-8

 

= POST는 http body에 데이터를 전달을 하기때문에 아래의 5가지 데이터를 담아서

MIME타입이 key=value 형태로 전달해야한다. 

 

▼ 5가지 데이터

grant_type = authorization_code
client_id = 클라이언트 키 e801f6365d439407c6f6764bf7dc64ef
redirect_uri = 카카오 로그인 요청 콜백 주소 http://localhost:8000/auth/kakao/callback
code = {알수 없음(동적이다). 응답받은 코드를 넣으면 된다.}
client_secret = 필수가 아님!

 

 

 

POST방식으로 카카오에게 key=value 데이터를 요청한다. (a태그는 GET방식이라서 요청못한다.)

 

 

RestTemplate 라이브러리를 써서 http 요청을 쉽게 할 수 있다. 

RestTemplate rt = new RestTemplate(); 

 

 

1. HttpHeaders 객체를 생성하여 Content-type 을 담는다. 

• Content-type(MIME): application/x-www-form-urlencoded;charset=utf-8

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

Content-type 을 담는다는것은 전송할 http body데이터가 key=value 형태라고 header에게 알려주는 것!

 

 

 

2. MultiValueMap<String, String> 객체를 생성하여 http body 에 5가지 데이터를 담는다.

(사실 값을 변수에 담는게 좋다.)

MultiValueMap<String, String> params = new LinkedMultiValueMap<>();
params.add("grant_type", "authorization_code");
params.add("client_id", "e801f6365d439407c6f6764bf7dc64ef");
params.add("redirect_uri", "http://localhost:8000/auth/kakao/callback");
params.add("code", code);   //동적으로 받을거니까

 

 

3. HttpEntity 객체 생성하여 위의 HttpHeaders 와 HttpBody 를 하나의 오브젝트에 담기

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

 

 

4. 카카오쪽으로 요청하기

ResponseEntity<String> response = rt.exchange(
     "https://kauth.kakao.com/oauth/token",   //토큰 발급 요청 주소
     HttpMethod.POST,       //요청 메서드 post
     kakaoTokenRequest,   // http헤더값 + http바디값
     String.class                  // 응답받을 타입
);

 

 

[UserController]

//카카오 로그인 
@GetMapping("/auth/kakao/callback")
public @ResponseBody String kakaoCallback(String code) { //데이터를 리턴해주는 컨트롤러 함수

    // POST방식으로 key=value 데이터를 요청 (카카오쪽으로)
    RestTemplate rt = new RestTemplate();  // http요청을 쉽게 할 수 있는 라이브러리

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

    // HttpHeaders 와 HttpBody 를 하나의 오브젝트에 담기
    HttpEntity<MultiValueMap<String, String>> kakaoTokenRequest =
            new HttpEntity<>(params, headers); //바디 데이터와 와 헤더값을 가지는 entity가 된다

    // Http 요청하기 - POST방식으로 그리고 response 변수의 응답 받음
    ResponseEntity<String> response = rt.exchange(
            "https://kauth.kakao.com/oauth/token", //토큰 발급 요청 주소
            HttpMethod.POST, //요청 메서드 post
            kakaoTokenRequest,
            String.class // 응답받을 타입
    );

    return "카카오 토큰 요청 완료 : 토큰요청에 대한 응답 : " + response;
}

 

- 리턴 값

200 은 요청이 정상적으로 응답이 됐다.

access_token은 노란선까지

Content-Type은 카카오가 블로그서버에게 데이터를 줄때 데이터 형태이다.

 

 

* Response 정보

**

refresh_token : 엑세스 토큰이 만료가 되면 다시 요청받을때는 리플레시 토큰으로 받음(엑세스 토큰을 다시 부여받음)

scope는 동의항목으로 내가 설정한 프로필 정보(필수동의), 이메일(선택동의) 까지이다.

 

 

 

 

json parser online 사이트에서 엑세스 토큰을 받았다는 것을 알 수 있다. 

 

 

 

access_token 을 통해서 블로그 서버가 카카오 로그인 사용자의 정보에 접근 할 수 있는 권한이 생긴다

이제 access_token 으로 카카오 회원정보를 가져올 수 있다.