카카오 로그인 API 사용 방법 nuxt3, spring boot

2023. 7. 10. 09:35·프로그래밍 일기/Java & Spring
반응형
버전정보

JAVA 11

Spring Boot 2.7.13

nuxt 3.6.2


https://developers.kakao.com/docs/latest/ko/kakaologin/prerequisite

 

Kakao Developers

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

developers.kakao.com

카카오톡 로그인을 위해 kakao developers에서 설정을 진행합니다.

<div class="position-absolute start-50 translate-middle" style="margin-top: 150px">
    <a id="kakao-login-btn" @click="kakaoLogin" href="javascript:void(0)">
      <img src="https://k.kakaocdn.net/14/dn/btroDszwNrM/I6efHub1SN5KCJqLm1Ovx1/o.jpg" width="222"
          alt="카카오 로그인 버튼" />
    </a>
    <p id="token-result"></p>
</div>

위 코드 입력 시 카카오 로그인 버튼이 만들어집니다.

const kakaoLogin = () => {
  let restApiKey = '자신의 restApiKey';
  let redirectUrl = 'http://localhost:3000/callback/kakao';
  const url = new URL('https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=' + restApiKey + "&redirect_uri=" + redirectUrl);

  window.location = url;
}

해당 코드는 카카오 로그인 화면으로 이동하는 함수 입니다. 자신의 key값을 입력해야 합니다.

동의하고 계속하기를 누르면 위 코드에서 redircetUrl로 '인가코드'값을 get방식으로 넘겨줍니다.

저는 nuxt3를 사용하기 있기 때문에 pages > callback > kakao.vue를 만들어 주었습니다.

해당 파일 http://localhost:3000/callback/kakao 라는 url을 입력할 경우 나오는 페이지 입니다.

<script setup>
  const route = useRoute();
  const config = useRuntimeConfig();

  const kakaoLogin = async () => {
    const response = await $fetch(config.public.baseURL + '/kakao/login', {
      method: 'POST',
      body: {
        code: route.query.code
      }
    });
  }

  onMounted(() => {
    kakaoLogin()
  })
</script>

HTML 태그 부분은 필요없고 javascript부분만 위 처럼 작성하면 됩니다.

위 코드는 우리가 만든 서버로 통신하기 위함입니다.

UserController.java
@PostMapping("/kakao/login")
public Map kakaoLogin(@RequestBody Map params) throws Exception {
    return userService.kakaoLogin(params);
}

 

UserService.java
public Map kakaoLogin(Map params) throws Exception {
    HttpHeaders headers = new HttpHeaders();

    headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);
    headers.add("Accept", "application/json");

    MultiValueMap<String, String> body = new LinkedMultiValueMap<>();

    body.add("grant_type", "authorization_code");
    body.add("client_id", 클라이언트 ID);
    body.add("redirect_uri", "http://localhost:3000/callback/kakao");
    body.add("code", params.get("code").toString());

    HttpEntity httpEntity = new HttpEntity<>(body, headers);
    ResponseEntity<Map> response = new RestTemplate().postForEntity("https://kauth.kakao.com/oauth/token", httpEntity, Map.class);

    return response.getBody();
}

본인의 클라이언트 ID 값을 입력해 줍니다.

그럼 위 코드의 response.getBody안에 토큰값이 존재하는데 로그인 로직을 통해 해당 토큰값을 DB에 저장하는 등 다양한 방법으로 처리하면 됩니다.

OKHTTP 대신 RestTemplate를 사용한 이유는 별다른 의존주입 없이 스프링 내에서 바로 사용 가능하다는 장점이 있어서 사용했습니다.

반응형
저작자표시 (새창열림)

'프로그래밍 일기 > Java & Spring' 카테고리의 다른 글

[Spring Boot] RestTemplate 사용법 서버 간 통신 getForEntity, postForEntity  (0) 2023.07.10
[Spring Boot] CORS 해결하기 Cross-Origin Resource Sharing 에러 OncePerRequestFilter  (0) 2023.07.10
[Spring Boot] 스프링부트 파라미터 받기  (0) 2023.07.07
[Spring Boot] Mybatis 쿼리 로그 찍기 log4j2 설정 방법, logging level 설명  (0) 2023.07.05
[Spring Boot] 스프링부트 Mysql DB 연동  (0) 2023.07.05
'프로그래밍 일기/Java & Spring' 카테고리의 다른 글
  • [Spring Boot] RestTemplate 사용법 서버 간 통신 getForEntity, postForEntity
  • [Spring Boot] CORS 해결하기 Cross-Origin Resource Sharing 에러 OncePerRequestFilter
  • [Spring Boot] 스프링부트 파라미터 받기
  • [Spring Boot] Mybatis 쿼리 로그 찍기 log4j2 설정 방법, logging level 설명
MakeMe
MakeMe
제가 포스팅한 글 중 잘못된 부분이 있으면 알려주세요!
  • MakeMe
    Developer blog
    MakeMe
    • 모든 글 (71)
      • 프로그래밍 일기 (57)
        • Java & Spring (21)
        • Python & Flask (3)
        • Linux (12)
        • Front-End (10)
        • DB & SQL (6)
        • Git (3)
        • IDE (2)
      • 자격증 (7)
        • 정보처리기능사 (2)
        • SQLD (1)
        • SW개발_L5 (1)
        • AWS (3)
      • 독립일기 (7)
        • 중소기업청년대출 (7)
  • 인기 글

  • 태그

    MYSQL
    flask 세팅
    DB
    스프링
    중소기업청년대출
    중기청후기
    중기청필수서류
    Spring
    flask
    젠킨스 우분투 설치
    넉스트
    자바환경변수
    자바
    psql
    인텔리제이
    nuxt3
    고용보험내역서
    DBeaver
    Vue
    중기청서류
    중기청필요서류
    자동배포설정
    IntelliJ
    AWS
    nuxt
    젠킨스 자동 배포
    스프링부트
    springboot
    java
    건강보험자격득실확인서
  • hELLO· Designed By정상우.v4.10.1
MakeMe
카카오 로그인 API 사용 방법 nuxt3, spring boot
상단으로

티스토리툴바