마카로닉스

1796 No

Vue.js 카카오, 네이버 , 구글 로그인 처리

2021-12-01 12:27:08 By 라이트 0 681 댓글수 4 포스트 하기

11월 2024
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

public/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>    
  
    <meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" content="582891722294727-60uikgrmoc4r4dt73vm7a5jqnbijqrst.apps.googleusercontent.com">
    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
    <script src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js" charset="utf-8"></script>
    <script src="https://apis.google.com/js/platform.js"></script>
    <script>
      window.Kakao.init("5b7dcd53656wewe21ab44ed757e11219bea344fa"); //발급 받은 키
    </script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

1.카카오

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

<template>
  <div>
    <a id="custom-login-btn" @click="kakaoLogin()">
      <img
        src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg"
        width="222"
      />
    </a>
    <button type="button" @click="kakaoLogout">카카오 로그아웃</button>
  </div>
</template>
<script>
// import axios from 'axios'

export default {
  components: {},
  data() {
    return {
      code: "",
    };
  },
  mounted() {
   // Kakao.init('c287503sdsdsd0d59sda20c5acc1sdsds21f04dsdaa155sd97bab4');
    //Kakao.isInitialized();
    this.kakaoLogout();
  },
  methods: {
    kakaoLogin() {
      window.Kakao.Auth.login({
        scope: "profile_nickname, account_email",
        success: this.getKakaoAccount,
      });
    },
    getKakaoAccount() {
      window.Kakao.API.request({
        url: "/v2/user/me",
        success: (res) => {
          const kakao_account = res.kakao_account;
          const nickname = kakao_account.profile.nickname; //카카오 닉네임
          const email = kakao_account.email; //카카오 이메일

          console.log("nickname", nickname);
          console.log("email", email);
          //로그인 처리 구현

          console.log(kakao_account);
         //  this.$store.commit("user", kakao_account);

          alert("로그인 성공!");
        },
        fail: (error) => {
          // this.$router.push("/errorPage");
          console.log(error);
        },
      });
    },
    kakaoLogout() {
      if (!window.Kakao.Auth.getAccessToken()) {
        console.log("Not logged in.");
        return;
      }

      window.Kakao.Auth.logout((response) => {
        //로그아웃
        alert("로그아웃");
        console.log("access token:", window.Kakao.Auth.getAccessToken());
        console.log("log out:", response);
      });
    },
  },
};
</script>

2.네이버

https://developers.naver.com/docs/login/web/web.md

https://developers.naver.com/docs/login/api/api.md

<template>
  <div>
    <div id="naverIdLogin"></div>
    <button type="button" @click="logout">로그아웃</button>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      naverLogin: null,
    };
  },
  mounted() {
    this.naverLogin = new window.naver.LoginWithNaverId({
      clientId: "WNRtIMhdk7k0zJMnMik0", //개발자센터에 등록한 ClientID
      callbackUrl: "http://localhost:8080/naverLogin", //개발자센터에 등록한 callback Url
      isPopup: false, //팝업을 통한 연동처리 여부
      loginButton: { color: "green", type: 3, height: 60 }, //로그인 버튼의 타입을 지정
    });

    //설정정보를 초기화하고 연동을 준비
    this.naverLogin.init();

    this.naverLogin.getLoginStatus((status) => {
      if (status) {
        console.log(status);
        console.log(this.naverLogin.user);

        //필수적으로 받아야하는 프로필 정보가 있다면 callback처리 시점에 체크
        var email = this.naverLogin.user.getEmail();
        if (email == undefined || email == null) {
          alert("이메일은 필수정보입니다. 정보제공을 동의해주세요.");
          //사용자 정보 재동의를 위하여 다시 네아로 동의페이지로 이동함
          this.naverLogin.reprompt();
          return;
        }
      } else {
        console.log("callback 처리에 실패하였습니다.");
      }
    });
  },
  methods: {
    logout() {
      const accessToken = this.naverLogin.accessToken.accessToken;
      const url = `/oauth2.0/token?grant_type=delete&client_id=WNRtIMhdk7k0zJMnMik0&client_secret=ugja7husCU&access_token=${accessToken}&service_provider=NAVER`;
      console.log("logout");
      axios.get(url).then((res) => {        
        console.log(res.data);
      });

      //https://nid.naver.com/oauth2.0/token?grant_type=delete&client_id=WNRtIMhdk7k0zJMnMik0&client_secret=ugja7husCU&access_token=AAAAOOCeX4fAa_NxKPAmJW8C1UeLxGT3nM0wRV33irhyHyRua1JJrfrp0jZwfbOD0r502Id9mbhb0YiA9_NvCXGAwws&service_provider=NAVER
    },
  },
};
</script>

프록시 설정

vue.config.js

module.exports = {
 
  devServer: {
    port: 8080,
    proxy: {
    
      '/oauth2.0': {
        target: 'https://nid.naver.com',
        changeOrigin: true
      }

    }


  }


}

3.구글

https://console.cloud.google.com/

Google APIs credentials

가이드 문서

<template>
<div>
  <div id="google-signin-btn"></div>
</div>
</template>
<script>
export default {
  mounted() {
    window.gapi.signin2.render("google-signin-btn", {onsuccess: this.onSignIn});
  },
  methods: {
    onSignIn (googleUser) {
      const profile = googleUser.getBasicProfile();
      console.log("ID: " + profile.getId()); 
      console.log('Full Name: ' + profile.getName());
      console.log('Given Name: ' + profile.getGivenName());
      console.log('Family Name: ' + profile.getFamilyName());
      console.log("Image URL: " + profile.getImageUrl());
      console.log("Email: " + profile.getEmail());

      const id_token = googleUser.getAuthResponse().id_token;
      console.log("ID Token: " + id_token);
    },
    signOut () {
      window.gapi.auth2.getAuthInstance().disconnect();
    }
  }
}
</script>

vue