亲测可用 Vue.js中谷歌第三方登录api实现

1.进入谷歌开发者平台

2.新建一个测试项目

授权起源和重定向url为开发环境的url

创建成功，获得了client-id

vue中使用 两种模式任意选一种即可

安装

npm i vue-google-signin-button // 组件方式
npm i vue-google-signin-button-directive // 自定义指令方式

这里以指令方式为示例

<template>
  <div>
    <button v-google-signin-button="clientId" class="google-signin-button"> Continue with Google</button>
  </div>
 </template>
 
 <script>
   export default {
     data: () => ({
       clientId: '904766607060-30848t56eg6pbn350d7fdfh1ctcke6ok.apps.googleusercontent.com'
     }),
     methods: {
       OnGoogleAuthSuccess (idToken) {
        console.log("token:",idToken) //返回第三方结果信息 默认是全token 要用jsonwebtoken 解析
        const payload = idToken.split('.')[1]; // 获取JWT的负载部分
        const decodedPayload = JSON.parse(atob(payload));
        console.log("token 解析:",decodedPayload);

         // Receive the idToken and make your magic with the backend
       },
       OnGoogleAuthFail (error) {
        console.log("error")
        console.log(error)
       }
     }
   }
 </script>
 
 <style>
   .google-signin-button {
     color: white;
     background-color: #000;
     height: 40px;
     text-align: center;
   }
 </style>

页面效果

登录成功获取登录的token信息

完整源码地址 gitee.com/brujie/goog…