Vue.js中Google第三方登录api实现

Vue.js中Google第三方登录api实现

1.进入开发者平台 创建Google API控制台项目和客户端ID

https://console.developers.google.com/projectselector2/apis/library?pli=1&supportedpurview=project（地址）

设置 重定向地址等相关内容

我们需要的 是那个客户端 ID!

OAuth 同意屏幕

画红色框的要与你使用到的网站的一致

开启api库

2.代码

<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' //客户端id
    }),
    mounted(){
 
    },
    methods: {
      OnGoogleAuthSuccess (idToken) {
        console.log(idToken,"tokesdasdasd") //返回第三方结果信息 默认是全token 要用jsonwebtoken 解析
        // Receive the idToken and make your magic with the backend
        const jsondate = jsonwebtoken.decode(idToken);//解析idToken
      },
      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

参考文档
https://blog.csdn.net/lllomh/article/details/97258715

https://www.cnblogs.com/lngg057/p/5020192.html