Vue如何实现Google第三方登录
导读:本文共1811.5字符,通常情况下阅读需要6分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 一、开发者平台配置1、进入开发者平台,首先前往Google API 控制台选择或者创建一个项目谷歌开发者平台一堆眼花缭乱的API让你无从选择,但是你只要记住这次进来的目的是:社交API2.使用这个API之前还需要做一件事,那就是申请一个OAuth 2.0 客户端 ID3按照要求填写你项目的类型、名称以及来源url注:创建完成之后,页面也有一个弹窗将你申请的客户端... ...
目录
(为您整理了一些要点),点击可以直达。一、开发者平台配置
1、进入开发者平台,首先前往Google API 控制台选择或者创建一个项目
谷歌开发者平台
一堆眼花缭乱的API让你无从选择,但是你只要记住这次进来的目的是:社交API
2.使用这个API之前还需要做一件事,那就是申请一个OAuth 2.0 客户端 ID
3按照要求填写你项目的类型、名称以及来源url
注:创建完成之后,页面也有一个弹窗将你申请的客户端ID已经密钥展示出来,没错这个就是一个生成的过程。
4、安装vue-google-signin-button
npminstallvue-google-signin-button--save
5、在main.js中引入并注册
importGSignInButtonfrom"vue-google-signin-button"Vue.use(GSignInButton);
6.index.html引入js文件
<!--谷歌登录需要的依赖js--><scriptsrc="//apis.google.com/js/api:client.js"></script>
7、在login.vue中使用组件
<template><g-signin-button:params="googleSignInParams"@success="onSignInSuccess"@error="onSignInError">SigninwithGoogle</g-signin-button></template><script>exportdefault{data(){return{/***TheAuth2parameters,asseenon*https://developers.google.com/identity/sign-in/web/reference#gapiauth2initparams.*Astheveryleast,avalidclient_idmustpresent.*@type{Object}*/googleSignInParams:{client_id:"YOUR_APP_CLIENT_ID.apps.googleusercontent.com"}}},methods:{onSignInSuccess(googleUser){console.log(googleUser)constprofile=googleUser.getBasicProfile()console.log(profile)},onSignInError(error){console.log("OHNOES",error)}}}</script><style>.g-signin-button{/*Thisiswhereyoucontrolhowthebuttonlooks.Becreative!*/display:inline-block;padding:4px8px;border-radius:3px;background-color:#3c82f7;color:#fff;box-shadow:03px0#0f69ff;}</style>
解决问题BUG
1、问题一:初始化没有引入js
你会发现在初始化的时候页面会出现一个报错。
出现这个问题的原因就是插件本身是没有引入Google.js文件。解决办法就是Vue的index.html中引入,详情看下图。
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
Vue如何实现Google第三方登录的详细内容,希望对您有所帮助,信息来源于网络。