利用 JavaScript SDK 部署网页版“Facebook 登录” 官方文档
本demo示例利用JavaScript SDK实现了Facebook、google、LinkedIn第三方登录,可以获取用户的基本信息,并且同时包括官方登录按钮和自定义登录按钮代码示例。
1.选择您的应用设置
在应用面板中选择您的应用。然后选择是否允许通过邮箱和短信登录,并为您的应用选择安全设置。有关选择访问口令设置的详细信息,请参阅访问口令,有关选择应用密钥设置的信息,请参阅使用图谱 API。
2.输入跳转网址
在应用面板中选择您的应用,然后前往产品 > Facebook 登录 > 设置。在 OAuth 客户端授权设置下的有效 OAuth 跳转网址字段中输入您的跳转网址以获得成功授权。
3.检查登录状态
首先加载Facebook SDK
(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/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
FB.init({
appId : '1234567890',
cookie : true, // 启用cookie
xfbml : true, // 解析此页面上的社交插件
version : 'v2.8' // 使用图形api 2.8版本
});
};
appId就是创建的应用的应用编号
加载网页时应采取的第一步是检查用户是否已使用 Facebook 登录功能登录您的应用。 调用 FB.getLoginStatus
即可开始此流程。 此函数会触发 Facebook 调用,获取登录状态,并调用包含结果的回调函数。
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
提供给回调的 response
对象包括许多字段:
{
status: 'connected',
authResponse: {
accessToken: '...',
expiresIn:'...',
signedRequest:'...',
userID:'...'
}
}
status
表示应用用户的登录状态。状态可以是以下某个值:
-
connected
。用户登录了 Facebook 和您的应用。 -
not_authorized
。用户登录了 Facebook,但未登录您的应用。 -
unknown
。用户未登录 Facebook,所以无法知道他们是否登录了您的应用。或者已经调用 FB.logout(),因此无法连接至 Facebook。 -
如果状态为
authResponse
,则响应对象将包括connected
,分为以下部分: -
accessToken
。包括应用用户的访问口令。 -
expiresIn
。表示口令到期且需要更新的 UNIX 时间。 -
signedRequest
。经签名的参数,其中包括应用用户的信息。 -
userID
是应用用户的编号。
4.让用户登录
这里只写自定义登录按钮,如需使用官方按钮请查看文档。
<button id="logina" type="button">FaceBook登录</button>
<script>
document.getElementById('logina').onclick = function(){//登录
FB.login(function(response) {
if (response.status === 'connected') {
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
});
} else {
console.log('该用户没有登录');
}
}, {scope: 'public_profile,email'});
};
</script>
还可以选择随此函数调用传递可选的
scope
参数,此参数是要向应用用户请求的一系列以逗号分隔的
权限
。 以下是调用包含
FB.login()
(与“登录”按钮中使用的相同)的
scope
的方法。 在本示例中,请求的是用户的电子邮箱和也在使用应用的好友列表
5.让用户退出
<button type="button" id="signout" >退出</button>
<script>
document.getElementById('signout').onclick = function(){
FB.logout(function(response) {
console.log("用户已退出");
});
};
</script>
本demo示例利用JavaScript SDK实现了Facebook、google、LinkedIn第三方登录,可以获取用户的基本信息,并且同时包括官方登录按钮和自定义登录按钮代码示例。