使用 Facebook 脸书 OAuth 2.0 服务登录第三方网站，图文教程

要使用脸书（Facebook） OAuth 2.0 服务登录第三方网站，你一般需要进行以下 4 步的操作配置：

第 1 步：在 Facebook 开发者后台创建一个应用，以获取客户端 ID（Client ID）和客户端密钥（Client Secret）。
第 2 步：在 Facebook 开发者后台配置重定向地址（回调地址），以获取授权码 code。
第 3 步：根据客户端 ID、客户端密钥和回调地址构造登录页面，让用户授权，以获取访问令牌（Token）。
第 3 步：有了访问令牌就能够访问 Facebook 的开放资源。

在开始之前，我们先来了解一下什么是 OAuth 2.0？

什么是 OAuth 2.0？

OAuth 2.0 是一种开放标准的授权协议，用于授权第三方应用程序访问受保护的资源，而无需提供用户的用户名和密码。它允许用户在不直接向第三方应用程序披露其凭据的情况下，授权其访问受保护资源，OAuth 2.0 被广泛用于 Web 和移动应用程序中，以提供安全的授权机制。

OAuth 2.0 协议涉及以下角色：

资源所有者（Resource Owner）：通常是用户，拥有受保护的资源，例如图片、个人资料等。
客户端（Client）：第三方应用程序，想要访问资源所有者的受保护资源。
授权服务器（Authorization Server）：负责认证资源所有者并授权客户端访问资源的服务器。
资源服务器（Resource Server）：存储受保护资源的服务器，提供访问受保护资源的 API。

OAuth 2.0 协议通过授权流程（Authorization Flow）来实现授权。其中，常见的授权流程包括：

授权码授权流程（Authorization Code Grant）：客户端重定向用户到授权服务器，用户登录并授权后，授权服务器返回授权码给客户端，客户端使用授权码与客户端凭证交换访问令牌。
授权码授权流程，带有 PKCE （Authorization Code Grant，With PKCE）：与标准授权码模式相同，但客户端需要使用 PKCE（Proof Key for Code Exchange）来增强安全性。
密码授权流程（Resource Owner Password Credentials Grant）：资源所有者直接将用户名和密码提供给客户端，客户端使用这些凭据向授权服务器请求访问令牌。
客户端凭证授权流程（Client Credentials Grant）：客户端使用自己的凭据直接向授权服务器请求访问令牌，适用于客户端自身需要访问资源的情况。
隐式授权流程（Implicit Grant）：用于在浏览器中直接从客户端获得访问令牌，通常用于 Web 前端应用。

Facebook 使用的 OAuth 2.0 授权流程就是“授权码授权流程（Authorization Code Grant）”，下面就来介绍一下怎么实现，并讲述如何在 Apifox 中调试。

步骤 1：创建应用，获取客户端 ID 和客户端密钥

首先需要在 https://developers.facebook.com 开通一个 Facebook 开发者账号，开通之后，在里面创建一个应用。

应用创建成功后，点击【应用设置->基本】选项，这里的应用编号就是客户端 ID（Client ID），应用密钥就是客户端密钥（Client Secret），这两个属性我们等会儿需要用到。

步骤 2：配置回调地址

应用创建完成后，还需要在控制面板中设置“回调地址”，点击【控制面板->定制这款应用】选项，然后点击“Facebook 登录设置”，进入到配置界面。

在配置界面的“有效 OAuth 跳转 URI”项那里，填入回调地址（Callback URL），也就是重定向地址。一般是你的服务器的域名（Facebook 要求是https开头的），如果还没有，可以随便先填一个，只要保证这个域名可以访问就行。配置完成后，保存即可。

我们需要“回调地址”的目的是为了获取到地址栏上的授权码（code），一般在 OAuth 2.0 登录页填写完用户名密码后，就会重定向到“回调地址”，并能在地址栏中获取授权码（code）。形如下面这个用手动的方式获取 code 值的地址栏：

以上信息配置完成之后，我们正式进入 OAuth 2.0 授权的主流程。

步骤 3：获取访问令牌

当上文的第一步和第二步准备好以后，我们就可以去申请访问令牌（Token），获取访问令牌这一步，我们通过 Apifox 来演示，Apifox 是一款非常优秀的接口调试、管理工具，你可以在 Apifox 中直接获取到 Token 访问令牌。如果你还没有安装 Apifox，现在就去下载一个吧！

立即体验 Apifox

1.新建 HTTP 请求

在 Apifox 中新建一个 HTTP 项目后打开，然后在项目里新建一个请求，选择【修改文档 -> Auth -> OAuth 2.0】选项。

2.配置客户端 ID、客户端密钥和回调地址

Apifox 中 OAuth 2.0 页面默认选择的授权模式为 Authorization Code（授权码模式），因为 Facebook OAuth 2.0 用的也是 Authorization Code（授权码模式），所以这里你无需进行切换。

接着在页面下方找到 Client ID 和 Callback URL，将从 Facebook OAuth 2.0 服务中获取到的客户端 ID（Client ID）、客户端密钥（Client Secret）以及配置的回调地址（Callback URI）填进去即可，具体参数就是上文在“步骤 1、步骤 2”中的配置。

3.配置授权码的请求地址

根据 Facebook 官方文档的描述，在进行 OAuth 2.0 认证时，授权码的请求地址（Auth URL）是：

https://www.facebook.com/v19.0/dialog/oauth

将这个授权码的请求地址填写到 Auth URL 里即可，这个地址我们可以把它理解为登录授权页面，在首次校验登录状态时会打开这个页面（在客户端是窗口），然后让你填写用户名和密码。

一般在手动构造登录授权页面的时候，这个授权地址的后面还需要携带一些参数，比如像这样的：

https://www.facebook.com/v19.0/dialog/oauth?
  client_id={app-id}
  &redirect_uri={redirect-uri}
  &state={state-param}

注：正常情况下无需进行参数换行

但是，在 Apifox 中，后面的参数一般就不需要了，只要问号?前面的路径就行，因为其它必填参数已单独在其它选项中配置，当然如果你想携带一些 Query 参数，你也可以加上，点击该输入框后面的图标即可添加：

我们也可以展开“更多”选项，将需要填写的参数值填写到对应的选项里，比如 “Scope” 里就可以填需要的权限public_profile，public_profile 权限在 Facebook 中表示允许应用读取用户节点的默认的公开资料字段，系统将自动授予所有应用此权限。在“State”选项中填写state，state 是为了防止跨站请求伪造。第三方平台要求必填的，我们一般都给它填上，不然在获取访问令牌（Token）的时候可能会报错。

4.配置访问令牌的请求地址

根据 Facebook 官方文档的描述，要申请到访问令牌，需要请求的 URL 为：

https://graph.facebook.com/v19.0/oauth/access_token

将这个地址填写到 Access Token URL 输入项内即可。同样，其它参数已在其它输入项中单独配置，所以不需要携带在 URL 后面。

5.获取访问令牌

上文的配置项都设置好以后，就可以点击“获取 Token”按钮来获取访问令牌了。点击后，如果是初次登录，会弹出一个窗口让你授权，填写你的 Facebook 账户的用户名以及密码即可。如果你在新设备上登录，还可能需要邮箱进行辅助验证。

填写完用户名密码后，会让你确认授权，点击确认即可。授权完成后，就会自动获取到访问令牌，并显示在页面上，同时，会将 Facebook 返回的其它信息也一并解析出来。

注意，如果你开了代理，你需要到“设置”里把代理打开，不然有可能会连接失败。遇到其它错误，你可以检查一下是不是某些第三方平台需要的必填参数没有填写，修改错误后，点击“清除 Cookie”并重新获取 Token 即可。

步骤 4：根据 Token 访问开放资源

有了访问令牌（Token）之后，你就可以拿这个访问令牌调取 Facebook 的开放资源了，具体有什么样的开放资源，可以在 Facebook Graph API 中查看。比如下面这个 API 就获取了用户的 ID 和名字。如果你的接口没有返回，那么需要看看有没有权限，在“步骤 3”的第 3 小节有讲到，给它配置到 Scope 里就行了。

https://graph.facebook.com/v12.0/me?fields=id,name

发送请求时 Apifox 会自动将 Token 附加到请求头的Authorization 中，添加至Bearer 后发送出去。如果你要将 Token 携带在 URL 上，你也可以在页面的配置项中修改 Token 的“添加位置”，将其选择为“Query Params”即可。

总结

使用 Facebook OAuth 2.0 服务登录第三方网站需要以下 4 个步骤配置：

在 Facebook 开发者后台创建应用，获取客户端 ID 和客户端密钥。
配置重定向地址以获取授权码。
构造登录页面让用户授权以获取访问令牌。
利用访问令牌访问 Facebook 的开放资源。

OAuth 2.0 是一种开放标准的授权协议，允许第三方应用程序安全地访问受保护的资源。授权码授权流程是常见的授权方式，Facebook 使用这种流程。在实施时，需创建应用、配置回调地址、获取访问令牌，并可利用 Apifox 进行调试。在获取访问令牌后，可利用该令牌调取 Facebook 的开放资源。

免费使用 Apifox