在前端通过OAuth成功认证后，如何与后端交互？

Question

我想建立小型应用程序。会有一些用户。我不想做自己的用户系统。我想将我的应用程序与oauth/oauth2.0集成。

集成我的前端应用程序和oauth 2.0没有问题。有很多有用的文章，如何做到这一点，即使在 stackoverflow.com 上。例如，这篇文章非常有帮助。

但是。在前端成功授权后，我该怎么办？当然，我可以在客户端上有标志，上面写着“好的，伙计，用户已通过身份验证”，但是我现在应该如何与我的后端交互呢？我不能只提出一些请求。后端——一些提供API功能的应用程序。每个人都可以访问这个api。

所以，我的FE和BE之间需要一些身份验证系统。这个系统应该如何工作？

ps我的英语有一些问题，可能我不能正确地“问谷歌”。你能提供正确的问题吗，请：）或者至少给出一些关于我问题的文章。

我正在寻找概念。我不想为我当前的问题找到一些解决方案。我不认为我使用哪个 FE 和 BE 是问题（无论如何，我将在下面提供有关它的信息）

FE和BE将使用JSON进行通信。FE会发出请求，BE会发送JSON响应。我的应用程序将具有这种结构（可能）：

• 前端 - 可能是 AngularJS
• 后端 - 可能是 Laravel（Laravel将实现逻辑，结构中也有数据库）

也许像google.com、vk.com、twitter.com等“服务提供者”记得用户的状态？在FE上成功认证后，我可以从BE询问用户状态？

Answer 1

让我们使用OAuth概念开始，这里的FE是客户端，这里的BE是资源服务器。

• 由于客户端已授权，因此授权服务器应向客户端授予访问令牌。
• 客户端使用访问令牌向资源服务器发出请求
• 资源服务器验证访问令牌，如果有效，则处理请求。

您可能会问，什么是访问令牌，访问令牌是由授权服务器颁发的，授权给客户端，并由资源服务器识别。

访问令牌是一个字符串，指示授权信息（例如用户信息、权限范围、过期时间......

为了安全起见，访问令牌可能会加密，您应该确保资源服务器可以解密它。

有关详细信息，请阅读OAuth2.0规范https://www.rfc-editor.org/rfc/rfc6749.

Answer 2

我非常仔细地通读了所有的答案，超过一半的回答者完全没有回答这个问题。OP正在询问FE之间的初始连接

您的后端如何知道 OAuth 令牌是否有效？请记住，您的BE可以向服务提供商发送请求

总结：

在用户授权后，FE从服务提供商接收OAuth令牌。FE将OAuth令牌传递给BE。BE向服务提供商发送OAuth令牌以验证OAuth标记。服务提供商用用户名/电子邮件信息回复BE。然后，您可以使用用户名/电子邮件创建帐户。

然后，在您的BE创建帐户之后，您的BE应该生成自己的OAuth令牌实现。然后，您向您的FE发送这个OAuth令牌，并且在每次请求时，您的FE都会在报头中向您的BE发送这个令牌。因为只有您的BE拥有验证这个令牌的密钥，所以您的应用程序将非常安全。您甚至可以在每次请求时刷新BE的OAuth令牌，每次都给FE一个新的密钥。如果有人从您的FE中窃取了OAuth令牌，该令牌将很快失效，因为您的be已经为您的FE创建了一个新的OAuth令牌。

有更多关于BE如何验证OAuth令牌的信息。如何验证资源服务器的OAuth 2.0访问令牌？

Answer 3

在创建API时，我们有3个主要的安全问题。

>

身份验证：像谷歌这样的身份验证提供商只是部分解决方案。因为您不希望提示用户登录/确认每个API请求的身份，所以您必须自己为后续请求实现身份验证。您必须存储，后端可以访问：

< li >用户的ID。(取自身份提供商，例如:电子邮件) < li >用户令牌。(您生成的临时令牌，可以通过API代码进行验证)

授权：您的后端必须根据用户ID实施规则（这是您自己的事）。

传输安全：HTTPS和过期Cookie是安全的，其他人无法重播。（HTTPS正在对流量进行加密，因此可以击败中间人攻击，而过期的cookie可以在稍后时间击败重播攻击）

因此，您的API/后端有一个随机字符串的电子邮件查找表。现在，您不必暴露用户的ID。令牌是无意义和临时的。

在这个系统中，流程是这样工作的：

User-Agent    IdentityProvider (Google/Twitter)   Front-End    Back-End
 |-----------------"https://your.app.com"---------->|
                                                    |---cookies-->|
                                 your backend knows the user or not.
                                       if backend recognizes cookie, 
                          user is authenticated and can use your API

其他：

                                             if the user is unknown:
                                                    |<--"unknown"-|
                     |<----"your/login.js"----------+
                "Do you Authorize this app?"
 |<------------------+
 |--------"yes"----->|
                     +----------auth token--------->|
                     |<---------/your/moreinfo.js---|
                     |-------access_token ---------->|
                1. verify access token
                2. save new user info, or update existing user
                3. generate expiring, random string as your own API token
                                                    +----------->|
 |<-------------- set cookie: your API token --------------------|

现在，用户可以直接使用您的API：

 |--------------- some API request, with cookie ---------------->|
 |<-------------- some reply, depends on your logic, rules ------|

编辑

基于讨论 - 添加后端可以通过使用身份提供程序验证访问令牌来对用户进行身份验证：

例如，Google公开这个endpoint来检查一个令牌< code>XYZ123:

https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=XYZ123