admin管理员组文章数量:1594605
网页版Facebook登陆
facebook上面,提供的三方接口很多,但是文档内容都是东拼西凑的,看起来太麻烦,没有一个能立马实现的demo,自己写的网站用了facebook登陆,在这里做一个总结。
①登陆上你的facebook,前提你要把你的账号变成开发者账号。
②主页左侧边栏在管理应用里面,点击新增应用。
③在产品找到Facebook登陆
④点击设置,然后打开配置页面,将你的网站地址填写进去
如果你的页面是在开发环境,用的localhost域名得话,就暂时不用配置,但是配置时,协议必须是https,如果不是,facebook会拒绝你的访问。
⑤配置好以后就开始写代码
1、 html代码(代码显示的是facebook自带的样式,你可以在这个页面调试Facebook自带的按钮样式)
<fb:login-button
scope="public_profile,email"
onlogin="checkLoginState();">
</fb:login-button>
2、 接下来就是引入Facebook.js(你可以通过更改js路径,更改你想要的语言)
(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/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
3、 用户打开新的页面就是先要判断用户是否在你的应用上已经登录了
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
console.log(response,"首次检测登陆")
});
**4、**但是在调用FB里面的方法之前,你先要定义一下FB
window.fbAsyncInit = function() {
FB.init({
appId : '你的应用编号',
cookie : true, // 启用cookie
xfbml : true, // 解析此页面上的社交插件
version : 'v6.0' // 使用图形api 6.0版本
});
}
**5、**走到这一步,你可能会发现,现在还是登录不了的,目前为止只是检测用户是否已经登录,在第三步有一个回调函数,用来接收登录后的返回数据,在这里如果检测到用户没有登录就提示登录,或者定义 testAPI()函数来调用FB函数来接收用户信息。
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
testAPI();
} else {
document.getElementById('status').innerHTML = 'Please log ' +
'into this webpage.';
}
}
testAPI()
function testAPI() { // Testing Graph API after login. See statusChangeCallback() for when this call is made.
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
6、 如果用户没登录,你现在可以监听用户点击按钮(这个按钮是自己的样式,和FB没有关系。上面 第一步说可以自己定义FB按钮,但是也可以通过函数调用方式实现自定义按钮),来调用
FB的login()函数,实现第三方登录。
document.getElementById('facebook').onclick = function(){//登录
FB.login(function(response) {
if (response.status === 'connected') {
FB.api('/me', function(response) {
roleName = encodeURIComponent(response.name);
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
});
} else {
console.log('该用户没有登录成功');
}
}, {scope: 'public_profile,email'});
};
7、 如果想实现用户退出功能,只需要调用logoout()
document.getElementById('signout').onclick = function(){
FB.logout(function(response) {
console.log(response,"用户退出");
});
};
附上完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>facebook-login</title>
</head>
<body>
<button id="facebook">登陆</button>
<button id="signout">退出</button>
</body>
<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/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
FB.init({
appId : '你的id',
cookie : true, // 启用cookie
xfbml : true, // 解析此页面上的社交插件
version : 'v6.0' // 使用图形api 2.8版本
});
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
// console.log(response,"首次检测未登陆")
});
document.getElementById('facebook').onclick = function(){//登录
FB.login(function(response) {
if (response.status === 'connected') {
$("#facebook").css("display","none")
$("#fbLike").css("display","block")
FB.api('/me', function(response) {
roleName = encodeURIComponent(response.name);
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
});
} else {
console.log('该用户没有登录成功');
}
}, {scope: 'public_profile,email'});
};
document.getElementById('signout').onclick = function(){
FB.logout(function(response) {
console.log(response,"用户退出");
});
};
}
</script>
</html>
版权声明:本文标题:网页版Facebook第三方登陆 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1726870356a1087809.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论