Vue實(shí)現(xiàn)Google第三方登錄的示例代碼

更新時(shí)間：2021年07月02日 09:51:30 作者：bright1688

本文記錄作者在vue項(xiàng)目中使用到Google第三方登錄，查詢到的資料文檔也不詳細(xì)，故此把自己所遇到的坑及問(wèn)題詳細(xì)的記錄下來(lái)。

一、開(kāi)發(fā)者平臺(tái)配置

1、進(jìn)入開(kāi)發(fā)者平臺(tái)，首先前往Google API 控制臺(tái)選擇或者創(chuàng)建一個(gè)項(xiàng)目

谷歌開(kāi)發(fā)者平臺(tái)

在這里插入圖片描述

一堆眼花繚亂的API讓你無(wú)從選擇，但是你只要記住這次進(jìn)來(lái)的目的是：社交API

在這里插入圖片描述

2.使用這個(gè)API之前還需要做一件事，那就是申請(qǐng)一個(gè)OAuth 2.0 客戶端 ID

在這里插入圖片描述

3按照要求填寫你項(xiàng)目的類型、名稱以及來(lái)源url

注：創(chuàng)建完成之后，頁(yè)面也有一個(gè)彈窗將你申請(qǐng)的客戶端ID已經(jīng)密鑰展示出來(lái)，沒(méi)錯(cuò)這個(gè)就是一個(gè)生成的過(guò)程。

在這里插入圖片描述

4、安裝vue-google-signin-button

npm install vue-google-signin-button --save

5、在main.js中引入并注冊(cè)

import GSignInButton from 'vue-google-signin-button'
Vue.use(GSignInButton);

6.index.html引入js文件

<!--谷歌登錄需要的依賴js-->
<script src="http://apis.google.com/js/api:client.js"></script>

7、在login.vue中使用組件

<template>
  <g-signin-button
    :params="googleSignInParams"
    @success="onSignInSuccess"
    @error="onSignInError">
    Sign in with Google
  </g-signin-button>
</template>

<script>
export default {
  data () {
    return {
      /**
       * The Auth2 parameters, as seen on
       * https://developers.google.com/identity/sign-in/web/reference#gapiauth2initparams.
       * As the very least, a valid client_id must present.
       * @type {Object}
       */
      googleSignInParams: {
        client_id: 'YOUR_APP_CLIENT_ID.apps.googleusercontent.com'
      }
    }
  },
  methods: {
    onSignInSuccess (googleUser) {
      console.log(googleUser)
      const profile = googleUser.getBasicProfile()
      console.log(profile)
    },
    onSignInError (error) {
      console.log('OH NOES', error)
    }
  }
}
</script>

<style>
.g-signin-button {
  /* This is where you control how the button looks. Be creative! */
  display: inline-block;
  padding: 4px 8px;
  border-radius: 3px;
  background-color: #3c82f7;
  color: #fff;
  box-shadow: 0 3px 0 #0f69ff;
}
</style>

在這里插入圖片描述