oauth0 oauth2_如何跳舞OAuth：循序渐进的课程

oauth0 oauth2

by Anabella Spinelli

通过安娜贝拉·斯皮内利(Anabella Spinelli)

如何跳舞OAuth：循序渐进的课程 (How to dance the OAuth: a step-by-step lesson)

Most of the times I try to learn something new and put it into practice, I quickly start to feel like I’m lost in a myriad of dance moves. I’m desperately trying to find the right way to do things, while not really understanding what’s going on or how I ended up on the wrong side of the room…

在大多数时候，我尝试学习新知识并将其付诸实践，我很快就开始觉得自己迷失于无数舞蹈动作中。 我拼命地试图找到正确的做事方式，而并没有真正理解正在发生的事情或我最终是如何在房间的另一面...

Just trying things out until something works.

只是尝试一下，直到有效果为止。

Maybe it’s because of the way my learning process works, or maybe guides and tutorials are targeted at more experienced or technical people. But, after I’m done wrapping my head around the subject, I always feel like there should be an easy guide for understanding the key concepts and making it easier to apply them in a project.

也许是因为我的学习过程起作用，或者指南和教程针对的是经验丰富的技术人员。 但是，当我把话题弄清楚之后，我总是觉得应该有一个简单的指南来理解关键概念，并使它们更容易地应用于项目中。

So this time, I’ve decided to stop wishing for it and make it myself, using the last thing that I learned.

因此，这一次，我决定不再希望它，而是使用我学到的最后一件事来自己制作。

And that thing was OAuth 2.0.

那就是OAuth 2.0。

什么是OAuth？ (What is OAuth?)

Let’s start with the basics: OAuth stands for Open Authorization. It’s a process through which an application or website can access private user data from another website.

让我们从基础开始：OAuth代表Open Authorization 。 通过此过程，应用程序或网站可以访问另一个网站的私人用户数据。

This other website usually works only as a trusted identity provider. It gives the requesting app some basic information about you so that the app can create a profile. This way, you don’t have to fill in a boring sign-up form and deal with yet another password ?

该其他网站通常仅作为受信任的身份提供者 。 它为发出请求的应用程序提供了有关您的一些基本信息，以便该应用程序可以创建配置文件。 这样，您不必填写无聊的注册表格并处理另一个密码？

You’ve already used this at least a gazillion times, in fact you used it every time you clicked on “Log in with Facebook / Google / GitHub / …”. Next, you were shown a consent screen that displayed which information from your (let’s say) Facebook profile you’re allowing that-hot-new-app.com to read (and sometimes, write). After that, since that-hot-new-app.com trusts the identity provided by Facebook, they can create a profile for you on their database using the data that they received.

您已经使用了至少一百万亿次，实际上，您每次单击“使用Facebook / Google / GitHub /…登录”时都使用了它。 接下来，向您显示一个同意屏幕，其中显示了(例如)您的Facebook个人资料中的哪些信息，您正在允许that-hot-new-app.com读取(有时是写入)。 之后，由于that-hot-new-app.com信任Facebook提供的身份，因此他们可以使用接收到的数据在数据库中为您创建一个配置文件。

The communication between that-hot-new-app.com and Facebook usually ends here. This is why your profile picture won’t change all across the Internet if you change it on Facebook. They just never go back to Facebook and ask for updated data.

that-hot-new-app.com与Facebook之间的通信通常在此处结束。 这就是为什么如果您在Facebook上更改个人资料图片不会在Internet上全部更改的原因。 他们只是从来没有回到Facebook并要求更新数据。

当马林巴节奏开始演奏时... (When marimba rhythms start to play…)

There’s another purpose for building this kind of mechanism, one with way more potential: using the identity provider as a service provider (in an ongoing manner). This means communicating with it regularly to supply enhanced features for your users.

构建这种机制的另一个目的是，它具有更大的潜力：将身份提供者用作服务提供者 (持续进行)。 这意味着要定期与之通信以为用户提供增强的功能。

A nice example of this is Relive, a service that connects with different sports tracking apps to create Earth view videos of your run or ride. Every time you finish an activity, Relive prompts you offering to create a video from it. If you say yes, they’ll process it, and notify you when it’s ready for social media bragging… I mean sharing ?

Relive是一个很好的例子，该服务可与不同的运动跟踪应用程序连接，以创建您跑步或骑行的地球视图视频。 每当您完成一项活动时，Relive都会提示您提供从中创建视频的条件。 如果您说“是”，他们将进行处理，并在准备好吹嘘社交媒体时通知您……我的意思是分享吗？

There’s really no technical difference between these two usages. That’s why you should be cautious about where you log in with your social media or Google/Gmail account.

这两种用法之间确实没有技术差异。 这就是为什么您应谨慎使用社交媒体或Google / Gmail帐户登录的原因。

It might sound scary, but there's really nothing to fear. Just bear in mind that you’re authorizing that-hot-new-app.com to access that information about you that’s detailed in the consent screen, potentially on a recurrent basis. Be aware of the permissions you grant, and make sure you know how to disable them whenever you don’t feel trusting anymore.

听起来可能很吓人，但实际上没有什么可担心的。 请记住，您正在授权that-hot-new-app.com可能会经常性访问同意屏幕中详细说明的有关您的信息。 请注意您授予的权限，并确保您知道每当不再感到信任时如何禁用它们。

For instance, if you are using your Google account for accessing that-hot-new-app.com but don’t want to allow that anymore, just go to your Google account settings and disable their access.

例如，如果您正在使用Google帐户访问that-hot-new-app.com，但又不想再允许该访问，则只需转到Google帐户设置并禁用其访问权限即可。

All the main identity providers offer control over this.

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

好的，但是您如何跳舞OAuth？ (All right, but how do you dance the OAuth?)

Before you land on that-hot-new-app.com and even click on “Log in with YourFavoriteIdentityProvider”, someone — probably a developer — has to create an application on the provider’s site.

在您登录那hot-new-app.com之前，甚至单击“使用 YourFavoriteIdentityProvider ” (可能是开发人员)必须在提供者的站点上创建应用程序。

This is a way of registering that-hot-new-app.com so that, later, the provider knows who’s asking for private data.

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

In this step, the developer will set up some information about the application, like the app's name or website and — most importantly — a redirect URI. The provider (like Google or Facebook) will use this to contact the requesting app and tell them that the user said yes ?

在此步骤中，开发人员将设置有关该应用程序的一些信息，例如应用程序的名称或网站，以及最重要的是重定向URI 。 提供商(例如Google或Facebook)将使用此联系人与发出请求的应用程序联系，并告知用户该用户回答“ 是” 。

Once the app is registered, the provider will give that-hot-new-app.com a clientId and a clientSecret which will be used in the communications between them. They work sort of like a username and password for the application.

一旦注册了该应用程序，提供商将为该hot-new-app.com提供一个clientId和一个clientSecret ，它们将用于它们之间的通信。 它们的工作方式类似于该应用程序的用户名和密码。

It's very important that you keep your clientSecret in a secure location and don't share it with strangers. If someone gets access to it, they could request private user data from the provider on your behalf, and then use it for evil!

将clientSecret放在安全的位置并且不要与陌生人共享非常重要。 如果有人可以访问它，他们可以代表您从提供者那里请求私人用户数据，然后将其用于邪恶！

We don't want that.

我们不想要那个。

手放在腰部或肩膀上 (Hands on waists or shoulders)

Apart from setting up all those things, the developer has to find out what kind of data the provider gives access to, and how it’s segmented.

除了设置所有这些内容外，开发人员还必须找出提供者可以访问的数据类型以及如何对其进行分段。

These “segments” are known as scopes and they define access rights, usually separated in read/write categories. So, for example, that-hot-new-app.com can request for “profile:read” and “contacts:read” scopes. This means they can read whatever the provider assigns to the “profile” and “contacts” segments. Other things won’t be accessible, for example your posts or what content you like.

这些“段”称为作用域 ，它们定义访问权限，通常分为读/写类别。 因此，例如， that-hot-new-app.com 可以请求“ 个人资料：阅读 ”和“ 联系人：阅读 ”范围。 这意味着他们可以读取提供者分配给“个人资料”和“联系人”细分的任何内容。 其他内容将无法访问，例如您的帖子或您喜欢的内容。

Well, just to make things simple for now on, let’s say that that-hot-new-app.com is a website that integrates with Typeform, a service for creating beautiful and smart forms and also the company I work for. You definitely want in on the hottest thing right now, and quick, so on their website you click on “Log in with Typeform” to get right into the action. What’s next?

好吧，现在就让事情变得简单吧，让我们说那hot-new-app.com是一个与Typeform集成的网站， Typeform是用于创建美观和智能表单的服务，也是我工作的公司。 您绝对想立即进入最热门的话题，并且很快，因此在他们的网站上单击“使用Typeform登录”可以立即采取行动。 下一步是什么？

Here’s a home-made, organic, and cholesterol-free diagram to use as a map for the whole thing. It may look a bit complicated but don’t worry, we’ll examine each step up next.

这是一张自制的，有机的，不含胆固醇的图表，可以用作整个地图。 它可能看起来有些复杂，但是请放心，我们接下来将检查每个步骤。

授权：OAuth舞蹈的第一步 (Authorize: the first step in the OAuth dance)

So, you take the initiative and click on “Connect with Typeform”. Here, that-hot-new-app.com (THNA from now on, ’cause I’m getting tired of writing dash-separated words) will send you to Typeform’s authorize endpoint (/oauth/authorize) and provide:

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

• their clientId (remember, that’s THNA’s username)

  他们的clientId(请记住，这是THNA的用户名)

• their desired scopes (or access rights)
  他们想要的范围(或访问权限)
• and their redirect URI again (Typeform already knows it from when we set up the whole thing, but we send it again as an extra layer of security)
  以及它们的重定向URI(Typeform在设置整个组件时就已经知道了，但是再次发送它作为额外的安全层)

That URL will look something like this:

该URL如下所示：

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

Typeform will use this information to generate a consent screen where you can review what sort of things you’re authorizing THNA to see and do.

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

Once you have thoroughly read what you’re consenting to and happily click on “Allow”, Typeform will send you to the redirect URI with a temporary, like so:

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

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

令牌：tangOAuth需要2吗？ (Token: it takes 2 to tangOAuth ?)

All this back and forth feels like someone’s taking you for a tango spin, right?

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

The second step of the OAuth dance is when THNA receives that code, and exchanges it for an OAuth Token.

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

So THNA takes that code and sends it back again to Typeform, along with the redirect URI (yes, again!), and the client secret (that’s the app’s password!).

因此， THNA接收该代码，并将其与重定向URI(是，再次！)和客户端密码(即应用程序的密码！)一起发送回Typeform。

As reward for a dance well danced, THNA will get a shiny OAuth Token ✨ which it can use to interact with Typeform on behalf of the user, that is… you!

作为舞蹈出色的奖励， THNA将获得一个闪亮的OAuth令牌✨，它可以代表用户(即您)与Typeform进行交互。

留在我身边，与我一起摇摆 (Stay with me, sway with me)

From now on, in every request THNA makes to Typeform on your behalf, they’ll have to include an Authorization header with that access token. With it, Typeform (or any other provider) can identify:

从现在开始，在THNA代表您向Typeform发出的每个请求中，它们都必须包含带有该访问令牌的Authorization标头。 使用它，Typeform(或任何其他提供程序)可以识别：

• who’s asking for the data (in this case, THNA)

  谁在要求数据(在本例中为THNA )

• who’s the data about (you!)
  谁的数据有关(您！)

• and also make sure they have the correct authorization to access that data (only what you consented to).

  并确保他们具有访问该数据的正确授权 (仅限您同意的内容)。

准备去舞池了吗？ (Ready for the dance floor ?)

So now that you know all the steps and spins of the OAuth dancing technique you should be ready to create your own choreographies, I mean, integrations, and make the Internet an even greater place.

因此，既然您知道了OAuth跳舞技术的所有步骤和旋转步骤，就应该准备创建自己的舞蹈编排，即集成，并使Internet变得更加广阔。

Drawings by yours truly, cover photo by Gez Xavier Mansfield on Unsplash.

真正由您绘制的图画，由盖兹 ·泽维尔·曼斯菲尔德 ( Gez Xavier Mansfield)摄于Unsplash上 。

翻译自: https://www.freecodecamp.org/news/how-to-dance-the-oauth-a-step-by-step-lesson-fd2364d89742/

oauth0 oauth2