//下载
npm i vue-facebook-login-component
//引入
import VFacebookLogin from 'vue-facebook-login-component'
//注册
components: {
VFacebookLogin
},
//组件使用
<v-facebook-login
v-show="false"
class="bt bt-block _g hover b"
@login="checkLoginState"
@sdk-init="handleSdkInit"
:app-id="fbappId"
></v-facebook-login>
//调用主键方法
<div
@click="scopeLogin"
accesskey="f"
tabindex="0"
class="bt bt-block _g hover b"
rel="opener"
target="_blank"
>
<img src="../../assets/images/Facebook.png" alt="" />
<strong>
<span v-show="loginAndRegistration">LOG IN</span>
<span v-show="!loginAndRegistration">CONTINUE</span>
WITH FACEBOOK</strong
>
</div>
data(){
return{
FB: {},
scope: {}
}
}
//使用方法
handleSdkInit ({ FB, scope }) {
this.FB = FB
this.scope = scope
},
//调用 this.scope.login()弹出窗口
scopeLogin () {
this.scope.login()
},
//登录获取信息
async checkLoginState (info) {
const that = this
if (!info) {
return false
}
if (info.authResponse) {
that.FB.api(
'/me?fields=id,name,email',
async function ({ email, name, id }) {
console.log(email, name, id)
const fbInfo = {
email,
name,
photo: 'https://graph.facebook.com/' + id + '/picture?type=large',
token: id
}
const res = await store.dispatch('googleGogin', fbInfo)
that.isSuccess(res)
}
)
}
},
参考https://developers.facebook.com/docs/facebook-login/web