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

前言:本文记录作者在vue项目中使用到Google第三方登录,查询到的资料文档也不详细,故此把自己所遇到的坑及问题详细的记录下来。如果觉得作者写的不错,希望得到您的点赞/收藏/支持,如果有不同意见,欢迎下方评论区留言。

注:在Vue项目中使用google登录,说到google登录,第一点毫无疑问…那就是你需要有一张梯子和一个google账号。链接: 自行创建去!!!

一、开发者平台配置

1、进入开发者平台,首先前往Google API 控制台选择或者创建一个项目

2、创建完任务会有一个提示。点击进去,进去后你会发现一个新世界吧~
Vue.js中实现Google第三方登录_第1张图片

3、一堆眼花缭乱的API让你无从选择,但是你只要记住这次进来的目的是:社交API
Vue.js中实现Google第三方登录_第2张图片

4、这里要说一点Google对开发者还是相当友好的,尤其是首次接触陌生API的开发者,Google提供的文档相当的友好,进入教程和文档查看API的介绍,这个API大概要怎么用心里基本有个数了。
里面的教程在这里就不多做阐述,毕竟文档里面已经说的很清楚了。
这里Google对引入登录功能进行了详细的说明

5、使用这个API之前还需要做一件事,那就是申请一个OAuth 2.0 客户端 ID
Vue.js中实现Google第三方登录_第3张图片
6、按照要求填写你项目的类型、名称以及来源url
注:创建完成之后,页面也有一个弹窗将你申请的客户端ID已经密钥展示出来,没错这个就是一个生成的过程。
Vue.js中实现Google第三方登录_第4张图片
等等…到这里还没有结束呢,
主题是在Vue项目中使用,那么接下来就要说说我是怎么在Vue中使用的吧。

二:上菜

注:在这里要用到相关的插件vue-google-signin-button,但是使用的过程中你会发现一个bug,这个后面在提及。

1、安装vue-google-signin-button

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

2、在main.js中引入并注册

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

3、在index.js中使用组件

<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: {
     
        clientId: 'YOUR_APP_CLIENT_ID.apps.googleusercontent.com'
      }
    }
  },
  methods: {
     
    onSignInSuccess (googleUser) {
     
      console.log(googleUser)
    },
    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>

That’s it!
But!上述说到的问题bug来了!

三、解决问题BUG

1、问题一:初始化没有引入js
你会发现在初始化的时候页面会出现一个报错。
在这里插入图片描述
出现这个问题的原因就是插件本身是没有引入Google.js文件。解决办法就是Vue的index.html中引入,详情看下图。
Vue.js中实现Google第三方登录_第5张图片
2、问题二:插件传参命名
看下图报错跟文档就一目了然了,就是作者把文档参数名写错了!!!害。只需要把clientId改成client_id即可。
在这里插入图片描述在这里插入图片描述
Vue.js中实现Google第三方登录_第6张图片

至此,Google第三方登录功能就写好了!
最后来复习一下:如果觉得作者写的不错,希望得到您的点赞/收藏/支持,如果有不同意见,欢迎下方评论区留言。

你可能感兴趣的:(Vue,GoogleApi第三方登录,vue.js,google+)