因为公司有谷歌和facebook的登录项目需求，所以跟据自己的理解写了这篇文章； # 谷歌登录 ### 1.谷歌后台登录： - 先要去谷歌登录后台创建项目，然后创建凭证，授权你的网址，**在本地开发的时候可以先设置localhost**;（这个跟微信开发者后台设置有点类似，设置了白名单才能调用接口）等; 因为这步骤是运营操作，我也不是很详细，但是根据要求一步一步设置就好了； - 获取clientId； ### 2.在vue中安装插件及引入安装npm install vue-google-signin-button --save ### 3.在template里面，我用的是一张图片代替button; 当时是用了两张图片，因为点击谷歌登录是新打开一个页面，然后原来的页面可以做操作，加上全屏的loading，使原来的页面不能被操作；
`` `` ### 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为你的应用编号 `` ### 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再点击
`

` ### 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) },`