第三方登陆实践之基于OAuth的FACEBOOK Web Login（最新版）

Facebook 登录简介

Facebook 登录是在多个平台供用户创建帐户并登录应用的便捷方式。它可用于 iOS、Android、Web、Windows Phone、桌面应用和智能电视、物联网对象等设备。

Facebook 登录功能可打造以下体验：

• 创建帐户
  Facebook登录让用户能够快速轻松地在应用内创建帐户，无需设置密码，避免今后忘记密码的麻烦。这一简单方便的体验可以产生更高的转化量。用户在一个平台上创建帐户后，通常只需轻轻一点就可以在所有其他平台上登录应用。获得有效的邮箱信息意味着您可以在今后联系相关用户，重新吸引他们使用应用。

• 个性化
  对于用户来说，个性化体验更具吸引力，因而能够产生更高的留存率。使用 Facebook登录功能，您可以获得难以通过注册表单收集或收集起来很麻烦的信息。即便只是将 Facebook 头像导入应用，也会加强用户对应用的归属感。

• 社交
  许多用户留存率高的应用都让用户能够与他们的好友建立联系，促进应用内体验的分享。通过 Facebook登录功能，您可以了解哪些应用用户相互之间也是 Facebook 好友，以便连接用户，创造价值。

众多在应用中部署了 Facebook 登录的开发者实现了卓越成效，包括应用登录人数大增，参与度提升，使用 Facebook 登录的用户数量持续增长。
本文主要介绍利用 JavaScript SDK 部署网页版“Facebook 登录”，将Facebook登陆应用于Web网页。

Facebook登陆实践

1.首先，登陆Facebook开发者平台注册账号。

官网链接已经给出，注册一个开发者账号即可。

2.然后，新建应用APP

创建好新应用后可以看到自己的应用编号和应用密钥，后面写代码需要用。
在APP基本设置里面，填写必要的信息，联系邮箱、应用域名、隐私权政策网址、商业用途和类别、以及Web网站的地址，如果是本地开发环境，可以这样填：http://localhost:XXXX/XXXX
隐私权政策网址当时试了几个URL都没成功，后来发现填这个是可以的：http://wp4fb.com/how-to-add-a-privacy-policy-to-your-apps/

3.在应用APP中的产品（PRODUCTS）添加Facebook登陆（Facebook Login）

Facebook登陆设置里面，填写必要的信息，然后发布应用APP。
有一点需要注意，Facebook规定自2018 年 10 月 6 日起，所有应用都需要使用 HTTPS（HTTPS协议更加的安全）。即对跳转 URI 和 JavaScript SDK 强制使用 HTTPS。
如果你是在本地开发环境下工作，那么需要给localhost添加SSL证书并实现HTTPS，此篇就不会详细介绍了。
APP上线成功如下图所示。

4.部署网页版Facebook 登录

通过采用 JavaScript 版 Facebook SDK 的“Facebook 登录”，用户可以使用 Facebook 登录信息登录您的网页。

实施登陆功能步骤

• 输入跳转网址，让用户跳转到 successful-login 页面。
• 检查登录状态，了解用户是否已登录您的应用。
• 通过“登录”按钮或“登录”对话框让用户登录，并请求一系列数据权限。 让用户退出，允许用户离开应用。

①输入跳转网址
在应用面板中选择您的应用，然后前往产品 > Facebook 登录 > 设置。在 OAuth 客户端授权设置下的有效 OAuth 跳转网址字段中输入您的跳转网址以获得成功授权。

②检查登录状态
调用 FB.getLoginStatus检查登录状态，此函数会触发 Facebook 调用，获取登录状态，并调用包含结果的回调函数。

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

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

{
    status: 'connected',
    authResponse: {
        accessToken: '...',
        expiresIn:'...',
        reauthorize_required_in:'...'
        signedRequest:'...',
        userID:'...'
    }
}

status 表示应用用户的登录状态。status 可以是下列之一：

• connected — 用户登录了 Facebook 和您的应用。
• not_authorized — 用户登录了 Facebook，但未登录您的应用。
• unknown — 用户未登录 Facebook，所以无法知道他们是否登录了您的应用。或者已经调用 FB.logout()，因此无法连接至 Facebook。
• 如果状态为 connected，则响应对象将包括 authResponse，分为以下部分：
  accessToken — 包括应用用户的访问口令。
  expiresIn — 表示口令到期且需要更新的 UNIX 时间。
  reauthorize_required_in - 登录过期和请求重新授权之前的时长（以秒为单位）。
  signedRequest — 经签名的参数，其中包括应用用户的信息。 userID — 应用用户的编号。

③让用户登录
提示用户登录的两种方式：

• 使用“登录”按钮。
• 使用 JavaScript SDK 中的 FB.login()

FB.login(function(response){
// Handle the response object, like in statusChangeCallback() in our demo
// code.
});

④让用户退出
可以向按钮或链接添加 JavaScript SDK 函数 FB.logout，让用户可以退出应用

FB.logout(function(response) {
   // Person is now logged out
});

SpringBoot配置好了HTTPS,并实现HTTP访问自动转HTTPS访问，自己也通过OpenSSL给localhost 添加 SSL 证书，在本地开发环境中实现了HTTPS，但由于并非官方CA签发的证书，所以chrome依然认为本网址是不安全的，在这里点击继续前往localhost即可。

点击FACEBOOK登陆。

完成登陆，重定向到网页地址，返回当前状态。We are connected.

登陆成功后就可以获取用户信息，可以是用户名、头像、朋友列表等等， 可以很容易地在HTML中的function getInfo()函数里面设置，本文只获取了response id。

5.源代码

Controller中添加Login Controller

@RequestMapping("/login")
    public String login() {
        return "Facebook.html";
    }

HTML代码如下

    
    
    
    





Get Info
Login

总结

本文主要介绍了利用 JavaScript SDK将Facebook登陆应用于Web网页，希望能对大家有所帮助~ 有问题欢迎留言交流，不足之处还请多多指正。