Vue.js中Google第三方登录api实现[亲测可用]

上一篇说了 facebook的实现,接下来说下google 的实现了,国际化的用的少.实际详细的文档也不多,这记录下来!

demo 地址请狠狠的戳这里 ¥ http://download.lllomh.com/cliect/#/product/J417101756893390

demo 地址请狠狠的戳这里 c https://download.csdn.net/download/lllomh/11431059

一:开发者平台配置

进入开发者平台 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,那么开发者平台里面也要配置这个重定向地址=>

 

实际使用: man.js

/***********谷歌登录自定义指令***************/
Vue.directive('google-signin-button', {
  bind: function (el, binding, vnode) {
    CheckComponentMethods()
    let clientId = binding.value
    let googleSignInAPI = document.createElement('script')
    googleSignInAPI.setAttribute('src', 'https://apis.google.com/js/api:client.js')
    document.head.appendChild(googleSignInAPI)

    googleSignInAPI.onload = InitGoogleButton

    function InitGoogleButton() {
      gapi.load('auth2', () => {
        const auth2 = gapi.auth2.init({
          client_id: clientId,
          cookiepolicy: 'single_host_origin'
        })
        auth2.attachClickHandler(el, {},
            OnSuccess,
            Onfail
        )
      })
    }
    function OnSuccess(googleUser) {
      vnode.context.OnGoogleAuthSuccess(googleUser.getAuthResponse().id_token)
      googleUser.disconnect()
    }
    function Onfail(error) {
      vnode.context.OnGoogleAuthFail(error)
    }
    function CheckComponentMethods() {
      if (!vnode.context.OnGoogleAuthSuccess) {
        throw new Error('The method OnGoogleAuthSuccess must be defined on the component')
      }

      if (!vnode.context.OnGoogleAuthFail) {
        throw new Error('The method OnGoogleAuthFail must be defined on the component')
      }
    }
  }
})
/***********谷歌登录自定义指令***************/