[Vue.js] 카카오 로그인 구현하기 (작성중)

 

카카오 계정을 통해 손쉽게 로그인을 할 수 있는 기능을 카카오에서 제공중이다.

사용자로서 되게 간편했던 기억이 있어서 나중에 꼭 구현해보고 싶다고 생각했었는데, 구현이 생각보다 어려웠다 ㅎㅎ..

로직을 이해하는데에 꽤 고생을 했기 때문에 나중에 보더라도 기억을 하기 위해서 정리를 시작한다!

 

---

 

-- 들어가기 전..

 

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

카카오 로그인 로직

 

kakao developers 사이트에서 카카오 로그인에 대해 설명이 나와있다.

 

카카오 로그인에 대한 로직을 사진 참고하여 간단하게 적어보자면,

1. 카카오 로그인을 통해 인가 코드 얻기
2. 헤더 설정 + 쿼리 (인가코드 등)을 통해 토큰 발급
3. (필요하다면) 카카오 계정에 대한 정보 요청

이다.

 

이러한 로직을 https://kdinner.tistory.com/92 님의 코드를 활용하여 HappyHouse 프로젝트에 적용해보았다.

(감사합니다 강디너님..)

 

HappyHouse 프로젝트는 https://www.creative-tim.com/product/bootstrap-vue-argon-dashboard 무료 템플릿을 이용했다.

카카오톡 로그인 관련 코드는 HTML까지 포함하면 너무 길어지기 때문에 중요한 부분만 빼서 작성해보겠다.

(전체 코드는 https://github.com/ssafy7-happyhouse 에서 / 아직 프로젝트 진행중이라 미완성이다!)

 

 

 

---

---

 

 

1. 인가 코드 얻기

"카카오 로그인" 버튼 클릭 -> 카카오 계정 로그인  -> 인가 코드 얻기

 

<카카오 로그인 버튼>

<a href="#" class="btn btn-neutral btn-icon">
    <span class="btn-inner--text" @click="kakaoLogin">
        <img src="img/icons/common/kakaoLogo.png"/>
    </span>
</a>
 

 

<카카오 로그인 버튼 클릭 시, 실행되는 함수>

kakaoLogin() {
    const param = {
        redirectUri: "http://localhost:8080/login"
    };
    window.Kakao.Auth.authorize(param);
}

 

Kakao.Auth.authorize()는 카카오 로그인 함수이며, 간편 로그인을 요청합니다.

이때, 인자로 redirectUri 값을 넘겨주는데, 간편 로그인 후 redirect될 url을 적어주면 되고, redirect 될때 쿼리로 인가 코드 값을 전달받는다 (?code="인가코드")

---

 

2. 토큰 발급 요청 (헤더 설정 + 쿼리(인가 코드 등))

<Vue.js의 life cycle 중 created()>

  created() {
    if (this.$route.query.code) {
      this.setKakaoToken();
    }
  }

redirect되면서 인가 코드를 받게 되고, 이 코드를 바로 활용하기 위해 created() 주기에 setKakaoToken() 실행

 

<실행할 함수>

async setKakaoToken() {
    console.log("카카오 인증 코드", this.$route.query.code);
    const { data } = await getKakaoToken(this.$route.query.code);
    if (data.error) {
        alert("카카오톡 로그인 오류입니다.");
        this.$router.go();
    return;
    }
    window.Kakao.Auth.setAccessToken(data.access_token);
    this.$cookies.set("access-token", data.access_token, "1d");
    this.$cookies.set("refresh-token", data.refresh_token, "1d");
    await this.setUserInfo();
    this.$router.push({ name: "home" });
},
async setUserInfo() {
    const res = await getKakaoUserInfo();
    console.log(res);
    const userInfo = {
    name: res.kakao_account.profile.nickname,
    platform: "kakao"
    };
    console.log(userInfo);
    // this.$store.commit("setUser", userInfo);
}

• 인가 코드를 그대로 getKaKaoToken() 함수에 전달하여 토큰 정보를 얻어옵니다.
• 그 후, 정상적으로 받아오지 못했다면 경고창을 띄웁니다.
• 토큰이 정상적이라면, access_token을 Kakao.Auth.setAccessToken() 함수에 전달하여 토큰을 할당합니다. ( 다른 카카오 API를 JavaScript SDK로 호출하기 위해)
• 그 후, vue-cookies 모듈을 이용하여 access, refresh 토큰을 저장하고
• setUserInfo() 함수를 실행합니다 ( 카카오 계정 정보를 얻어오기 위해 )

 

 

<services/kakaoLogin.js>

import axios from "axios"
 
const kakaoHeader = {
  "Authorization": "---Admin 키---",
  "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
};
 
const getKakaoToken = async code => {
  try {
    const data = {
      grant_type: "authorization_code",
      client_id: "---Rest API 키---",
      redirect_uri: "http://localhost:8080/login",
      code: code
    };
    
    const queryString = Object.keys(data)
      .map(k => encodeURIComponent(k) + "=" + encodeURIComponent(data[k]))
      .join("&");
    
    const result = await axios.post(
      "https://kauth.kakao.com/oauth/token",
      queryString,
      { headers: kakaoHeader }
    );
    console.log(result);
 
    console.log("카카오 토큰", queryString);
    return result;
  } catch (e) {
    return e;
  }
};
 
const getKakaoUserInfo = async () => {
  let data = "";
  console.log(1);
  await window.Kakao.API.request({
    url: "/v2/user/me",
    success: function(response) {
      data = response;
    },
    fail: function(error) {
      console.log(error);
    }
  });
  console.log("카카오 계정 정보", data);
  return data;
};
 
export { getKakaoToken, getKakaoUserInfo };
 

위에서 실행한 두개의 함수는 따로 js파일로 빼서 구현해놓았다.