[Vue]카카오 로그인 액세스 토큰 발행

https://injekim97.tistory.com/137

[2021.03.17] 인턴 +16 카카오 로그인(REST API) - 정리 완료

공식 문서와 위 블로그를 참고했다

 

index.html

<script src="//developers.kakao.com/sdk/js/kakao.js"></script>

추가한다

---

src/main.js

Kakao.init('JavscriptKey? REST API Key?');

REST API를 사용한게 적합한 방식이라고 하는데

어떤 부분은 JavaScript Key로, 어떤 부분은 REST API Key로 사용한 사람도 많은데

일단 잘 모르겠어서 JavaScript Key를 main.js에 작성했다

---

KakaoTalk.vue

<script>
    export default {
      methods: {
        signWhithKakao() {
          const params={
            redirectUri: 'http://localhost:3000/KakaoLogin'
          }
          //카카오 인증코드 요청
          Kakao.Auth.authorize(params);
        },
      },
    }
</script>

Kakao.Auth.authorize라는 카카오 api 함수?를 사용할 수 있는데

파라미터로 redirectUri를 설정해야한다고 한다

인가 코드가 redirectUri에 전달된다

아래 코드를 그 경로로 설정했다

---

KakaoLogin.vue

import { getKakaoToken, getKakaoUserInfo } from './../loginToken.js';
const params = new URLSearchParams(location.search);
// 인가 코드
var code = params.get('code');
export default {
    data() {
        return {
            code,
        }
    },
    created() {
        this.setKakaoToken();
    },
    methods: {
        getUserInfo() {
            this.setUserInfo()
        },
        async setKakaoToken() {
            console.log('카카오 인증 코드', code);
            const { data } = await getKakaoToken(code);
            if (data.error) {
                alert('카카오톡 로그인 오류입니다.');
                return;
            }
            console.log("setKakaoToken 으로 access_token = ",data.access_token)
            await this.setUserInfo();
        },
        async setUserInfo(){
             //const res = await getKakaoUserInfo();
            //await getKakaoUserInfo();
            getKakaoUserInfo();
        }
    }
}
</script>

/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code= 인가코드

다음과 같은 경로로 Request되고,

위 인가코드 부분을 가져와야하는데 code= search부분의 params를 code라는 변수에 저장했다

 

created되면 setKakaoToken()함수를 실행시키고

함수 안에있는 getKakaoToken()함수에 code를 매개변수로 넣어서 실행시킨다

getKakaoToken()함수는 아래 loginToken.js에서 import 해온것이다

 

아래에서 성공적으로 가져온 access token을 받아와서

유저 정보를 얻는 getKakaoUserInfo()함수도 사용할 수 있다

loginToken.js

import axios from "axios";

const kakaoHeader = {
    'Authorization': ' JavscriptKey? REST API Key?',
    'Content-type': 'application/x-www-form-urlencoded;charset=utf-8',
};

var result = '';

const getKakaoToken = async (code) => {
    console.log('loginWithKakao');
    try {
        const data = {
            grant_type: 'authorization_code',
            client_id: 'JavscriptKey? REST API Key?',
            redirect_uri: 'http://localhost:3000/KakaoLogin',
            code: code,
        };
        const queryString = Object.keys(data)
            .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(data[k]))
            .join('&');

        console.log(queryString)
        console.log(('https://kauth.kakao.com/oauth/token', queryString, { headers: kakaoHeader }))
        result = await axios.post(`https://kauth.kakao.com/oauth/token`, queryString, { headers: kakaoHeader });

        console.log('카카오 토큰', queryString);
        console.log(result)

        return result;
    } catch (e) {
        return e;
    }
};

const getKakaoUserInfo = async (data) => {
     console.log(result.data.access_token)
     await Kakao.API.request({
         url: '/v2/user/me',
         success: function (response) {
             data = response;
         },
         fail: function (error) {
             console.log(error);
         },
     });
     console.log('카카오 계정 정보', data);
     return data;
}

const refreshToken = async () => {
    // try {
    //     const { result } = (await axios.get('/refreshToken')).data;
    //     VueCookies.set('access-token', result.access_token);
    //     console.log('Refresh API 성공', result);
    //     return result;
    // } catch (e) {
    //     console.log(e);
    // }
}

export {
    getKakaoToken,
    getKakaoUserInfo,
    refreshToken,
};

제일 중요한 토큰을 받아오는 부분이다

 

https://velog.io/@2taesung/Vue.js-kakaologin

[Vue.js] kakaologin

참고해서 작성했는데

잘 몰라서 Authorization 부분과 client_id 부분을 JavaScript Key로 작성했다(되긴 하는데.. 찝찝)

 

axios로 token을 가져오는 주소로 request했다

headers를 지정해야하는데 잘 안됐었다

포스트맨을 활용하거나 curl을 사용해서 테스트 하니까 길이 보였다..

 

개발자도구 console창을 보면 config data headers등 데이터가 잘 나오고

Network창을 봐도 token이 200(성공) 과 함께 정보가 작성되어있다

 

 

---

토큰 받기
( url  request )
https://kauth.kakao.com/oauth/token?
grant_type=authorization_code
&
client_id= { JavaScript Key? REST API Key? }
&
redirect_uri=http://localhost:3000/KakaoLogin
&
code={ 인가 코드 }

( curl )
curl -v -X POST "https://kauth.kakao.com/oauth/token" \
 -H "Content-Type: application/x-www-form-urlencoded" \
 -d "grant_type=authorization_code" \
 -d "client_id=${REST_API_KEY}" \
 --data-urlencode "redirect_uri=${REDIRECT_URI}" \
 -d "code=${AUTHORIZE_CODE}"

---

토큰 갱신하기(계속 갱신해서, access_token으로 test하면 됨)
( url  request )
https://kauth.kakao.com/oauth/token?
grant_type=refresh_token
&
client_id={ JavaScript Key? REST API Key? }
&
refresh_token=
{ REFRESH TOKEN }

( curl )
curl -v -X POST "https://kauth.kakao.com/oauth/token" \
 -H "Content-Type: application/x-www-form-urlencoded" \
 -d "grant_type=refresh_token" \
 -d "client_id={ JavaScript Key? REST API Key? }" \
 -d "refresh_token={ REFRESH TOKEN }"

---

AccessToken으로 사용자 정보 가져오기

(url request - headers 설정이 잘 안돼서 포스트맨으로 하면 편하다)

/v2/user/me

(headers 부분) Authorization: Bearer { ACCESS TOKEN }"

( curl )
curl -v -X GET "https://kapi.kakao.com/v2/user/me" \
  -H "Authorization: Bearer { ACCESS TOKEN }"