vue 接入 facebook 登录的方法（需要翻墙），使用vue-facebook-signin-button插件

tips：首先需要在facebook官网注册开发者账号，并创建应用，拿到应用编号appid
facebook开发者登录平台

1、在index.html中加入这个 sdk, appid换成 你的应用编号:

<!--appId 写上开发者-->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v3.3&appId=你的appid&autoLogAppEvents=1">
</script>

2、安装 npm install vue-facebook-signin-button
3、在main.js中注册该组件

import FBSignInButton from 'vue-facebook-signin-button'
Vue.use(FBSignInButton)

4、然后就是在页面中使用了,可以集合到登录组件里面去：

  <fb-signin-button
          :params="fbSignInParams"
          @success="onSignInSuccess"
          @error="onSignInError">
    	  Facebook登录
  </fb-signin-button>

5、完整代码

<template>
  <fb-signin-button
          :params="fbSignInParams"
          @success="onSignInSuccess"
          @error="onSignInError">
    Sign in with Facebook
  </fb-signin-button>
</template>
 
<script>
 
  export default {
    name:'facebook',
    data () {
      return {
        fbSignInParams: {
          scope: 'email,user_likes',
          return_scopes: true
        }
      }
    },
    methods: {
      onSignInSuccess (response) {
      	// 登录成功回调
        // FB.api('/me', dude => {
        //   console.log(`Good to see you, ${dude.name}.`)
        // })
        console.log(response) //返回第三方的登录信息 tolen等
      },
      onSignInError (error) {
      	//登录失败回调
      }
    }
  }
</script>
 
<style>
	// 修改登录按钮样式
  .fb-signin-button {
    /* This is where you control how the button looks. Be creative! */
    display: inline-block;
    padding: 4px 8px;
    border-radius: 3px;
    background-color: #4267b2;
    color: #fff;
  }
</style>

tips：退出facebook登录 FB.logout();

以上就是facebook登录的接入流程了，欢迎大家讨论交流~

扫码加q群