본문 바로가기
spring boot

카카오 로그인 api 사용해보기

by improve 2024. 4. 15.

 

카카오 개발자 콘솔에서 카카오 api 에 들어가서 회원가입을 하고 에프리케이션을 만든다.

 

플랫폼을 생성하고 (web)->  도메인 주소를 localhost 로 만들어준다.

 

Redirect URI 도 지정해야 된다.

oauth/kakao/callback

 로 GetMapping 으로 url 을 불러온다.

 

application.yml 에

kakao.client.id 값을 restapi 키 값을 입력해준다.

 

 

앱 권한 신청을 해준다 개인 개발자로 신청을 한다.

그리고 동의항목에서  -> 닉네임, 프로필사진, 카카오 계정을 필수 항목으로 보여준다. 

 

보안에서 Client Secret 에 값을 

application.yml 에 적어준다.

kakao.client.secret 의 값을 키값으로 입력해준다.

 

프론트 영역을 만들어준다.

 

•logim.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>카카오 로그인 페이지</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<style>
    .wrapper {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        min-height: 100vh;
    }
    .content {
        font-family: "Montserrat", sans-serif;
        font-size: 10rem;
        padding: 2rem;
        margin: 2rem;
        border-radius: 1rem;
        background: #74992e;
    }
    a {
        text-decoration-line: none
    }
</style>
<body>
<div class="wrapper">
    <!-- todo client_id 각자 등록한걸로 수정  -->
    <a href="https://kauth.kakao.com/oauth/authorize?client_id=user_id&redirect_uri=http://localhost:8080/oauth/kakao/callback&response_type=code">
        <div class="content">
            kakao login
        </div>
    </a>
    <div>
        <img src="http://localhost:8080/image/file/aa.webp" width="200"/>
    </div>
</div>
</body>
</html>

 

여기서 <a 태그로  client_id -> user_id 에 해당하는 restapi 키 값을 적어준다. 

 

 

-> 이렇게하게 되면 인가코드를 얻을수 있다 .

 

Postman 

-> get post put delete

 

크롬 브라우저는 get 밖에 할 수 없다.

 

Java 라이브 러리도 비슷한 결과를 나타낼수 있는 application이 있다 .

 

Openfeign 추가 해준다. 

implementation 'org.springframework.cloud:spring-cloud-starter-openfeign:4.1.1'

 

gradle 에 추가 해준다.

 

feignClient 라이브러리 이용하게 된다.

 

●interface 로 만들어서 kakaoTokenClient

@FeignClient("객체명", 주소="주소 url")

package com.mh.mychart.kakao;

import org.springframework.cloud.openfeign.FeignClient;
import org.springframework.cloud.openfeign.SpringQueryMap;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestHeader;

@FeignClient(name = "kakaoTokenClient", url = "https://kauth.kakao.com")
public interface KakaoTokenClient {

    @PostMapping(value = "/oauth/token", consumes = "application/json")
    KakaoTokenDto.Response getKakaoToken(
            @RequestHeader("Content-Type") String contentType,
            @SpringQueryMap KakaoTokenDto.Request kakaoTokenDtoRequest);
    //@SpringQueryMap 이렇게 적어야지만 객체가 정상적으로 보내진다.

}

 

@GetMapping

String getTest();

로 불러올 수 있다.

@GetMapping("oauth/kakao/callback")
public @ResponseBody String kakaoCallback(String code) {
    kakaoService.getKakaoToken(code);
    return "code =" +code;
}

 

 

●kakaoTokenDto

package com.mh.mychart.kakao;


import lombok.Builder;
import lombok.Getter;
import lombok.ToString;


public class KakaoTokenDto {
    @Getter
    @Builder
    @ToString
    public static class Request {
        private String grant_type;
        private String client_id;
        private String redirect_uri;
        private String code;
        private String client_secret;
    }

    @Getter
    @Builder
    @ToString
    public static class Response {
        private String access_token;
        private String token_type;
        private String refresh_token;
        private String expires_in;
        private String scope;
    }

}

 

●kakaoService

package com.mh.mychart.kakao;


import lombok.RequiredArgsConstructor;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;

@Service
@RequiredArgsConstructor
public class KakaoService {

    private final KakaoTokenClient kakaoTokenClient;

    private final KakaoInfoClient kakaoInfoClient;
    private String contentType = "Content-Type: application/x-www-form-urlencoded";

    @Value("${kakao.client.id}")
    private String clientId;

    @Value("${kakao.client.secret}")
    private String clientSecret;

    @Value("${kakao.client.redirect}")
    private String redirecturi;

    public String getKakaoToken(String code) {
        System.out.println("getcode : " + code);
        System.out.println("clientid :" + clientId);
        System.out.println("clientsecret :" + clientSecret);
        System.out.println("redirecturi :" + redirecturi);


        KakaoTokenDto.Request kakaoTokenDtoRequest =
                KakaoTokenDto.Request.builder()
                        .grant_type("authorization_code")
                        .client_id(clientId)
                        .client_secret(clientSecret)
                        .redirect_uri(redirecturi)
                        .code(code)
                        .build();

        KakaoTokenDto.Response resDto = kakaoTokenClient.getKakaoToken(contentType, kakaoTokenDtoRequest);
        System.out.println("access_token = " + resDto.getAccess_token());

        String result = kakaoInfoClient.getKakaoInfo("bearer " + resDto.getAccess_token());
        System.out.println(result);

        return "getKakaoToken";
    }
}

 

 

순서 

카카오 로그인 -> 인가코드가 나온다(카카오 회사에서 만들어준 코드) -> Token을 발행 ->  access token 과 refresh token이 발행된다.

 

참고 

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

 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

 

정보 가져오기 

 

참고 

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#req-user-info

 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

 

● interface 로 만들어서  kakaoInfoClient

package com.mh.mychart.kakao;

import org.springframework.cloud.openfeign.FeignClient;
import org.springframework.cloud.openfeign.SpringQueryMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestHeader;

@FeignClient(name = "kakaoInfoClient", url = "https://kapi.kakao.com")
public interface KakaoInfoClient {

    @PostMapping(value = "/v2/user/me", consumes = "application/json")
    String getKakaoInfo(
            @RequestHeader("Authorization") String aaccessToken);


}