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

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

还有一个是隐私政策网站的填写。这个关乎应用能不能的公开发布。找到开发平台的控制面板下面有个设置->基本。在隐私权政策网址里可以填（这个不是唯一的，填写的地址有效即可）。然后保存更改。

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

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

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

123
FB.getLoginStatus(function(response) {    statusChangeCallback(response);});

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

12345678910111213141516
{    // 用户登录状态    status: 'connected',        authResponse: {        // 包括应用用户的访问口令        accessToken: '...',        // 口令到期且需要更新的 UNIX 时间        expiresIn:'...',        // 登录过期和请求重新授权之前的时长（以秒为单位）        reauthorize_required_in:'...'        // 经签名的参数，其中包括应用用户的信息。        signedRequest:'...',        // 应用用户的编号        userID:'...'    }}

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

代码

12345678
<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>
123456789101112131415
<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>
12345678910111213141516171819202122232425262728293031323334353637383940
<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没什么区别，按照官网的流程走一般都能成功。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。