

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=3356227040433252&autoLogAppEvents=1"></script>
2,在main.js中注册该组件,同时安装 npm install vue-facebook-signin-button
import FBSignInButton from 'vue-facebook-signin-button'
Vue.use(FBSignInButton)
3、然后就是在组件中使用了,可以集合到登录组件里面去
<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) {
console.log(response) //返回第三方的登录信息 tolen等
window.FB.api(
'/me?fields=id,email,education,age_range,birthday,first_name,gender,last_name',
function(res) {
console.log(res)//获取facebook的个人信息
再这里再去请求后端接口进行登陆
}
},
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>
其中 onSignInSuccess 回调 用来获取结果的