在Vue.js項目中使用google第三方登錄[親測可用]

上一篇說了 facebook的實現,接下來說下google 的實現了,國際化的用的少.實際詳細的文檔也不多,這記錄下來!

demo 地址請狠狠的戳這里  http://download.lllomh.com/cliect/#/product/J417101756893390

一:開發者平台配置

進入開發者平台 https://console.developers.google.com/apis/credentials?project=matest-247702

在憑據中創建app憑據:

​

設置 重定向地址等相關內容

​

動態演示:

​

我們需要的 是那個客戶端 ID!

二:代碼

核心代碼:

<template>
 <div>
   <button v-google-signin-button="clientId" class="google-signin-button"> Continue with Google</button>
 </div>
</template>

<script>
  import GoogleSignInButton from 'vue-google-signin-button-directive'
  import jsonwebtoken from 'jsonwebtoken'
  export default {
    directives: {
      GoogleSignInButton
    },
    data: () => ({
      clientId: '345345-petbt7osm0gs9mtivclevt6cjb9la43b.apps.googleusercontent.com'
    }),
    mounted(){

    },
    methods: {
      OnGoogleAuthSuccess (idToken) {
        console.log(idToken,"tokesdasdasd") //返回第三方結果信息 默認是全token 要用jsonwebtoken 解析
        // Receive the idToken and make your magic with the backend
      },
      OnGoogleAuthFail (error) {
        console.log(error)
      }
    }
  }
</script>

<style>
  .google-signin-button {
    color: white;
    background-color: red;
    height: 50px;
    font-size: 16px;
    border-radius: 10px;
    padding: 10px 20px 25px 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
</style>

　　

記得 npm install  vue-google-signin-button-directive  && npm install  jsonwebtoken

結果如下:

比如這里 我的 url 是http://localhost:5000,那么開發者平台里面也要配置這個重定向地址=>​

​