与 OAuth 共舞：分步指南

与 OAuth 共舞：循序渐进的课程

与 OAuth 共舞：循序渐进的课程

很多时候，当我尝试学习新知识并付诸实践时，很快就会感觉自己迷失在纷繁复杂的舞步中。我拼命地寻找正确的方法，却又不明白到底发生了什么，也不明白自己为什么会走到房间错误的一边……

只是不断尝试，直到成功为止。

也许是因为我的学习方式，又或许指南和教程的目标受众是经验更丰富或技术更精湛的人士。但当我彻底理解了这个主题之后，我总觉得应该有一本简单的指南来帮助我理解关键概念，并更容易地将它们应用到项目中。

所以这一次，我决定不再奢望，而是用我学到的最新知识自己动手实现它。

这就是 OAuth 2.0。

什么是 OAuth？

让我们从基础开始：OAuth 代表开放授权。这是一个应用程序或网站可以从另一个网站访问私人用户数据的过程。

这个网站通常只充当可信身份提供商。它会向请求身份验证的应用提供一些关于您的基本信息，以便应用创建个人资料。这样，您就不必填写枯燥的注册表单，也不必再输入密码了。📋

你已经至少用过无数次了，事实上，每次点击“使用 Facebook/Google/GitHub/… 登录”时，你都会用到它。接下来，你会看到一个同意屏幕，显示你允许that-hot-new-app.com读取（有时也允许其写入）你（假设是 Facebook 个人资料）中的哪些信息。之后，由于that-hot-new-app.com信任 Facebook 提供的身份，他们可以使用收到的数据在其数据库中为你创建个人资料。

that-hot-new-app.com和 Facebook之间的通信通常就此结束。这就是为什么你在 Facebook 上更改个人资料图片后，互联网上不会发生改变的原因。他们只是不会再回到 Facebook 询问更新的数据。

当马林巴琴的节奏开始演奏时……

构建此类机制还有另一个目的，而且潜力更大：将身份提供者用作服务提供者（持续进行）。这意味着需要定期与其进行通信，以便为用户提供增强的功能。

一个很好的例子是Relive，这项服务可以连接不同的运动追踪应用，创建你跑步或骑行的地球视角视频。每次你完成一项活动，Relive 都会提示你，是否愿意制作视频。如果你答应，他们会处理，并在视频准备好分享给社交媒体时通知你……我的意思是分享🏅

这两种用法实际上没有技术上的区别。因此，您应该谨慎选择使用社交媒体或 Google/Gmail 帐户登录的地方。

这听起来可能有点吓人，但其实没什么好怕的。只需记住，您授权that-hot-new-app.com访问您在同意页面中详细列出的信息，并且可能会定期访问。请谨慎使用您授予的权限，并确保在您不再信任时知道如何禁用它们。

例如，如果您使用您的 Google 帐户访问 that-hot-new-app.com，但不想再允许这样做，只需转到您的Google 帐户设置并禁用其访问权限。

所有主要身份提供商都提供对此的控制。

上街前打扮一下

在您登陆that-hot-new-app.com并点击“使用 YourFavoriteIdentityProvider 登录”之前，某个人（可能是开发人员）必须在提供商的网站上创建一个应用程序。

这是注册that-hot-new-app.com 的一种方式，以便提供商稍后知道谁在请求私人数据。

在此步骤中，开发者将设置一些有关应用程序的信息，例如应用程序的名称或网站，以及最重要的——重定向 URI。提供商（例如 Google 或 Facebook）将使用此 URL 联系发出请求的应用程序，并告知他们用户已同意。

应用程序注册后，提供商会向that-hot-new-app.com提供aclientId和 a clientSecret，用于它们之间的通信。它们的作用类似于已注册应用程序的用户名和密码。

务必将您的应用信息（重定向 URIS、clientId，尤其是 clientSecret）保存在安全的地方，切勿与陌生人共享。如果有人获取了这些信息，他们可能会以您的名义向提供商请求用户隐私数据，然后将其用于恶意目的！

我们不想这样。

双手放在腰部或肩部

除了设置所有这些东西之外，我们的开发人员还必须找出提供商可以访问什么类型的数据，以及如何对其进行分段。

这些“段”被称为范围，它们定义访问权限，通常分为读/写类别。

例如，that-hot-new-app.com 可以请求profile:read并contacts:read设置范围。这意味着他们可以读取提供商分配给“个人资料”和“联系人”部分的任何信息，但无法更改这些信息。其他信息将无法访问，例如您的帖子或您喜欢的内容。

好吧，为了简单起见，我们假设that-hot-new-app.com是一个与Typeform集成的网站。Typeform 是一款创建精美智能表单的服务，也是我工作的公司🤷。你肯定想快速了解当下最热门的内容，所以你在他们的网站上点击了“使用 Typeform 登录”来立即开始使用。下一步是什么？

这是一张自制的有机无胆固醇示意图，可以作为整个过程的示意图。它可能看起来有点复杂，但别担心，我们接下来会逐一讲解。

授权：OAuth 舞蹈的第一步

因此，您主动点击了“连接 Typeform”。在这里，that-hot-new-app.com（从现在开始称为 THNA，因为我厌倦了写用破折号分隔的单词）会将您发送到 Typeform 的授权端点 (/oauth/authorize)，并提供：

• 他们的客户端 ID（记住，这是 THNA 的用户名）
• 他们期望的范围（或访问权限）
• 以及它们的重定向 URI（Typeform 在设置整个过程时就已经知道了它，但为了增加安全性，我们再次发送它）

该 URL 看起来类似于以下内容：

https://api.typeform.com/oauth/authorize?client_id=yourClientId&scope=accounts:read+forms:read+results:read

Typeform 将使用此信息生成一个同意屏幕，您可以在其中查看您授权 THNA 查看和执行哪些操作。

一旦你仔细阅读了你同意的内容并愉快地点击“允许”，Typeform 会将你发送到带有临时的重定向 URI，如下所示：

https://that-hot-new-app.com/auth/redirect?code=xxxXXXxxxXXXxxx

令牌：tangOAuth 需要 2 个 💃

所有这些来来回回的感觉就像有人带你去跳探戈一样，对吗？

OAuth 舞蹈的第二步是 THNA 收到该代码并将其交换为 OAuth 令牌。

因此，在这个阶段，THNA 有一个临时代码，代表他们所要求的所有内容，可以将其视为一种加密的方式：

嘿，还记得我吗？我是 THNA，这位用户说我可以查看他们的表单和主题。请准备好后，将令牌发送到此重定向 URI。

作为了解所有步骤且不冒犯任何人的奖励，THNA 将获得一个闪亮的 OAuth 令牌 ✨，它可以代表用户（就是您！）使用该令牌与 Typeform 进行交互，并在需要时请求授权数据。

和我一起，和我一起摇摆

从现在开始，THNA 代表您向 Typeform 发出的每个请求都必须包含一个包含该访问令牌的 Authorization 标头。有了它，Typeform（或任何其他提供商）可以识别：

• 谁在请求数据（在本例中为 THNA）
• 这些数据是关于谁的（你！）
• 并确保他们拥有访问该数据的正确授权（仅限您同意的数据）。

准备舞池👯

所以现在您已经了解了 OAuth 舞蹈技术的所有步骤和旋转，您应该准备好创建自己的舞蹈编排，我的意思是集成，并使互联网变得更加美好。

*本人绘制

如果您正在寻找更深入、更实际的 OAuth 2.0 体验，我强烈推荐 The Net Ninja 的 PassportJS 教程。它涵盖了在 NodeJS 应用中设置所需的所有基础知识，并且理论与实践的比例非常均衡。这对我来说是理解这一切的转折点。