阅读 264

vue 谷歌和facebook第三方登录小结

因为公司有谷歌和facebook的登录项目需求,所以跟据自己的理解写了这篇文章;

谷歌登录

1.谷歌后台登录:

  • 先要去谷歌登录后台创建项目,然后创建凭证,授权你的网址,在本地开发的时候可以先设置localhost;(这个跟微信开发者后台设置有点类似,设置了白名单才能调用接口)等;

因为这步骤是运营操作,我也不是很详细,但是根据要求一步一步设置就好了;

  • 获取clientId;

2.在vue中安装插件及引入

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

3.在template里面,我用的是一张图片代替button;

当时是用了两张图片,因为点击谷歌登录是新打开一个页面,然后原来的页面可以做操作,加上全屏的loading,使原来的页面不能被操作;
<el-image fit="cover" :src="google" id="googleClickBtn" style="display:none" v-google-signin-button="clientId" class="google-signin-button"></el-image>

<el-image fit="cover" id="google-signin-button" :src="google" @click="googleClick" v-loading.fullscreen.lock="fullscreenLoading" class="google-signin-button"></el-image>

4.js写法;

引入
import GoogleSignInButton from 'vue-google-signin-button-directive'
在export defalut中加入自定义指令
directives: { GoogleSignInButton },
js点击,把loadding显示出来,然后再点击真正的按钮
googleClick(){ document.getElementById('googleClickBtn').click(); this.fullscreenLoading = true; },
//谷歌登录成功返回
//根据jsonwebtoken来解析返回来的token;需要先安装npm install jsonwebtoken --save;
//根据token里面返回来的值与后台做交互;
OnGoogleAuthSuccess (idToken) { var jwt = require('jsonwebtoken'); let tokenDecode = jwt.decode(idToken); //这里提交给后台 }
OnGoogleAuthFail (error) { this.fullscreenLoading = false; //返回错误信息,把loading隐藏 console.log('错误'+error) },

facebook登录

1.登录facebook后台

  • 创建项目获取应用编号(appid);
  • 在index.html引入下面这段代码,appid为你的应用编号

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v3.3&appId=你自己的应用编号&autoLogAppEvents=1"></script>

2.安装运用:

  • npm install vue-facebook-signin-button
  • 在main.js中引入:
    import FBSignInButton from 'vue-facebook-signin-button'
    Vue.use(FBSignInButton)

3.在template里面;

这里也可以像谷歌一样,在外面写一个button用来显示全屏loading,这个button加上id再点击
<fb-signin-button :params="fbSignInParams" @success="onSignInSuccess" @error="onSignInError"> <el-image fit="cover" :src="facebook"></el-image> </fb-signin-button>

4.在data里面

fbSignInParams: { scope: 'email,user_likes', return_scopes: true }

5.js写法

//成功返回,能获取userID和accessToken
onSignInSuccess (response) { //response.authResponse.userID; //response.authResponse.accessToken; },
//错误返回
onSignInError (error) { this.fullscreenLoading = false; console.log(error) },

文章分类
前端
文章标签