Facebook账号一键登录 Facebook账号一键登录

公司最近做的一个项目要求使用Facebook实现一键登录的功能。所谓的Facebook登录就是获取用户在Facebook的资料,通过这些资料(邮箱等)登录或者注册目标网站。这中间Facebook提供了相应的接口,通过这个接口获取用户授权就能拿到相应的用户资料。虽然整个过程完成下来还算比较顺利。这边还是要做一下记录。

申请应用及配置

在使用之前,需要先在Facebook开发者平台注册账号,新建应用,然后获取新建应用的编号APPID。相应的流程开发平台写的还是相对比较清楚的,这里就不一一赘述。其中要注意的是:有效 OAuth 跳转 URL要填写正确。

图片

还有一个是隐私政策网站的填写。这个关乎应用能不能的公开发布。找到开发平台的控制面板下面有个设置->基本。在隐私权政策网址里可以填http://wp4fb.com/how-to-add-a-privacy-policy-to-your-apps/(这个不是唯一的,填写的地址有效即可)。然后保存更改。

图片

然后就可以点击应用发布开关,弹窗提示点击确定即可。最后效果是这样的:

图片

相关代码

1. 检查登录状态

加载网页时应采取的第一步是检查用户是否已使用 Facebook 登录功能登录您的应用。调用 FB.getLoginStatus 即可开始此流程。此函数会触发 Facebook 调用,获取登录状态,并调用包含结果的回调函数。

下面是将在页面加载期间运行以检查用户登录状态的部分代码:

1
2
3
FB.getLoginStatus(function(response) {
   statusChangeCallback(response);
});

提供给回调的response对象包括的字段:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
   // 用户登录状态
   status: ‘connected’,    
   authResponse: {
       // 包括应用用户的访问口令
       accessToken: ‘…’,
       // 口令到期且需要更新的 UNIX 时间
       expiresIn:’…’,
       // 登录过期和请求重新授权之前的时长(以秒为单位)
       reauthorize_required_in:’…’
       // 经签名的参数,其中包括应用用户的信息。
       signedRequest:’…’,
       // 应用用户的编号
       userID:’…’
   }
}

知道用户的登录状态后,应用就可以执行以下操作之一:

  • 如果用户登录了 Facebook 和您的应用,可将他们重定向至应用的登录后体验。
  • 如果用户未登录您的应用,或未登录 Facebook,则可以通过 FB.login()呈现登录对话框,以此提示他们登录,或显示“登录”按钮。

2. 使用JavaScript SDK提供的登录按钮

代码

1
2
3
4
5
6
7
8
<div id=”fb-root”></div>
<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_CN/sdk.js#xfbml=1&version=v3.2&appId=申请的应用编号&autoLogAppEvents=1’;
 fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

按钮

1<div class=”fb-login-button” data-size=”large” data-button-type=”continue_with” data-auto-logout-link=”false” data-use-continue-as=”false”></div>

3. 获取用户信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
function fb_login() {
FB.login(function(response) {
if (response.status === ‘connected’) {
               // 获取用户id、Email、名称等
FB.api(‘/me?fields=id,email,first_name,last_name,gender’, function(response) {
        // 获取信息后的相关操作
        console.log(response);
});
} else {
alert(‘login fail’);
}
}, {scope: ‘public_profile,email’});
}
</script>

4. 完整实例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<script>
window.fbAsyncInit = function() {
FB.init({
appId: ”,  // 这里需要改成15位你创建的Facebook应用编号
cookie: true,
xfbml: true,
version: ‘v3.2’
});
FB.AppEvents.logPageView();
};

(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 = “//connect.facebook.net/en_US/sdk.js”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
</script>

<script>
function fb_login() {
FB.login(function(response) {
if (response.status === ‘connected’) {
FB.api(‘/me?fields=id,email,first_name,last_name,gender’, function(response) {
   // 获取信息后的相关操作
});
} else {
alert(‘login fail’);
}
}, {scope: ‘public_profile,email’});
}
</script>
<div class=”login-btn-box” >
       <button  onclick=”fb_login();”>Login with Facebook</button>
</div>
</div>

总结

Facebook JavaScript SDK在最新的3.2版本中跳转 URI 和 JavaScript SDK 强制使用 HTTPS。Facebook是使用标准的 OAuth 客户端口令流程。其授权过程跟其他OAuth没什么区别,按照官网的流程走一般都能成功。

未经允许不得转载:Facebook账号营销-FB工作室 » Facebook账号一键登录 Facebook账号一键登录

赞 (1) 打赏