Vue如何实现Google第三方登录

这篇文章主要介绍了Vue如何实现Google第三方登录的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue如何实现Google第三方登录文章都会有所收获，下面我们一起来看看吧。

一、开发者平台配置

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

谷歌开发者平台

一堆眼花缭乱的API让你无从选择，但是你只要记住这次进来的目的是：社交API

2.使用这个API之前还需要做一件事，那就是申请一个OAuth 2.0 客户端 ID

3按照要求填写你项目的类型、名称以及来源url

注：创建完成之后，页面也有一个弹窗将你申请的客户端ID已经密钥展示出来，没错这个就是一个生成的过程。

4、安装vue-google-signin-button

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

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

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

6.index.html引入js文件

7、在login.vue中使用组件

解决问题BUG

1、问题一：初始化没有引入js

你会发现在初始化的时候页面会出现一个报错。

出现这个问题的原因就是插件本身是没有引入Google.js文件。解决办法就是Vue的index.html中引入,详情看下图。

关于"Vue如何实现Google第三方登录"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"Vue如何实现Google第三方登录"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。