这两天可以说是和facebook死亡翻滚了一下。。。
第一步：在https://developers.facebook.com/ 申请一个appid
第二步：html引入sdk
//方式一：
<script defer crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js">
</script>
//方式二：
<script>
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v3.3';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
第三步：在使用的页面初始化sdk并使用
facebookLogin() {
let t = this
if (this.ie_judge() == 11 || this.ie_judge() == 'edge') {
Toast(
'因瀏覽器兼容問題，推薦使用chrome或其他瀏覽器進行Facebook帳號登入哦~'
)
return
}
//初始化
FB.init({
appId: '273461493052144',
xfbml: true,
status: true,
cookie: true,
autoLogAppEvents: true,
version: 'v3.3',
})
FB.getLoginStatus(function (response) {
// console.log(response)
if (response && response.status === 'connected') {
FB.logout(function (response) {
FB.login(function (response) {
// console.log(response)
if (response.authResponse) {
//如果有用户登录信息，则拿出回调里的用户名
t.statusChangeCallback(response)
} else {
console.log('User cancelled login or did not fully authorize.')
}
})
})
} else {
//首次登录
FB.login(function (response) {
// console.log(response)
if (response.authResponse) {
console.log(response)
t.statusChangeCallback(response)
} else {
console.log('User cancelled login or did not fully authorize.')
}
})
}
})
},
//回调操作
statusChangeCallback(response) {
if (response.status == 'connected') {
this.form.account = response.authResponse.userID
this.form.type = 'FaceBook'
this.login()
} else {
Toast('登入失敗，請稍後重試')
}
},
第四步：通过路由参数或者window.location.href 确认是否是facebook的回调
//通常放在 mounted
//通过路由参数
this.$route.query
//通过window.location.href
init(){
//当window.location.search为空时（？前面有#）
let index = window.location.href.lastIndexOf("?");
let datalist =window.location.href.substring(index+1,window.location.href.length);
let data =datalist.split('&')
let obj = {};
data.map((e) => {
obj[e.split("=")[0]] = e.split("=")[1];
})
let account = obj.account
let type = obj.type
if(account !== null) {
if(type === 'facebook') {
this.form.account = account
this.form.type = 'Apple'
this.login()
}
}
else {
return
}
},
//FB 带图分享
//vue文件中
FB.ui(
{
method: 'share',
href: 'https://xxxx.xxxxxxx.com/',
display: "popup",
},
(response) => {
if (response && !response.error_code) {
this.share()
Toast('分享成功')
} else {
Toast('分享失敗')
}
}
)
//html文件中
<meta property="og:url" content="https://xxxx.xxxxxxx.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="《xxxxx活动》1周年">
<meta property="og:image" content="https://xxxx.xxxxxxx.com/share.jpg">
<meta property="og:image:width" content="525">
<meta property="og:image:height" content="275">
