公司最近做的一个项目要求使用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账号一键登录