因为公司有谷歌和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) },
