[ vue.js ] 카카오톡 로그인 api (feat. typescript)

카카오톡 api 로그인를 다시 연결하면서 vue3에서 타입스크립트로 적용하려고 했다. 그러나 index.html에 sdk를 연결하고 main.ts 에 자바스크립트 키를 연결하는 과정에서 kakao를 window에서 가지고 오지 못하는 이슈가 생겼다 

그래서 검색해보니 나와 같은 이슈를 겪은 사람이 있어서 참고 했다. https://uminoh.tistory.com/51

[typescript] Use Kakao Share Api On Vue 3 & Typescript

 

일단 npm으로 kakao-js-sdk를 설치해줬다.  전역으로 사용하기 위해 main.ts에 아래와 같은 코드를 추가했다.

 

npm install

npm i kakao-js-sdk

 

main.ts import하기

// main.ts

import { initKakao } from "kakao-js-sdk";

initKakao("자바스크립트 키");

 

.env 환경설정

VITE_APP_KAKAO_REFIRECT="url" 

 

Login.vue 에서 카카로 로그인 api 활용하기

<v-btn color="#fae100" block @click="doKakaoLogin">
<v-icon class="chatIcon">mdi-chat</v-icon>카카오 로그인
</v-btn>

<script lang="ts" setup>
import { useRouter, useRoute } from "vue-router";
import { ref } from "vue";

const router = useRouter();
const route = userRoute();

const isShow = ref(false);

const doKakaoLogin = () => {
	const params = {
    	redirectUri: import.meta.env.VITE_APP_KAKAO_REDIRECT,
    }
    window.Kakao.Auth.authorize(params);
}
</script>

params로 리다이렉트 uri를 전달해주면 카카오로그인 페이지가 나온다. 

 

로그인을 실행하면 리다이렉트 uri의 url뒤에 쿼리스트링으로 code를 전달해준다. 

 

useRoute를 활용해서 쿼리스트링에 있는 값을 콘솔로 출력.

import { useRouter, useRoute } from "vue-router";

const route = useRoute();
console.log(route.query);

 

쿼리로 받아온 인증코드를 활용하여 token 받아오기

const getKakaoToken = async (token: any) => {
  const kakaoHeaders = {
    Authorization: "--- admin key ---",
    "Content-type": "application/x-www-form-urlencodedlcharset=utf-8",
  };
  let params = {
    grant_type: "authorization_code",
    client_id: "041576102e9613c9acb57fb766533896",
    redirect_uri: import.meta.env.VITE_APP_KAKAO_REDIRECT,
    code: kakaoCode.value.code,
    // client_secret: "JHQYbs9IKYmzFzRcKWgEdut8Ucqoy9vq",
  };
  if (token) {
    let data = await Axios.post(
      import.meta.env.VITE_APP_KAKAO_API +
        `/oauth/token?grant_type=${params.grant_type}&client_id=${params.client_id}&redirect_uri=${params.redirect_uri}&code=${params.code}`,
      { headers: kakaoHeaders }
    );
    console.log(data);
  }
};
getKakaoToken(kakaoCode.value.code);

 

처음엔 쿼리스트링으로 넣은 부분을 json 형태로 넣어줬더니 자꾸 오류가 나는 것이 아닌가....

위와 같은 오류가 자꾸 났지만..나는 client_secret 설정을 활성화 하지 않았음에도 불구하고 자꾸 같은 이슈가 발생했다. 그래서 검색해본 결과

 

https://velog.io/@denmark-choco/kakao-Login-API-KOE010401 이  블로그 내용을 발견하게 되었다.

쿼스크트링 형태로 전달하니까 성공해서 access_token을 얻을 수 있었다.

 

 

 

https://kdinner.tistory.com/92

javascript - 카카오 로그인 with Vue.js

https://yoyostudy.tistory.com/42

[Vue js] 카카오 로그인 연동