javascript - 使用 Auth0 和客户端 Node.js 服务器在 SPA 中进行身份验证

Question

背景

我有两个应用程序:

• Angular2 单页应用程序
• 带有 Express 的 Node.JS

我想通过使用 Express 服务器公开的 API 来验证和授权登录 Angular2 应用程序的用户。我想使用 Auth0 作为我的 IDP。我希望整个应用程序(客户端+服务器)是定制的。同时:

1. 我不想使用 Auth0 Lock
2. 我不想使用刷新和重定向(为了获得良好的用户体验和简化的流程)
3. 我不想将 auth0.js 库发送到 Angular2 应用(以最大程度地减少负载和客户端代码复杂性)。
4. 我想将服务器返回的身份验证数据保留在 localStorage 中(而不是passport.js 设置 cookie 并刷新)
5. 我最好不想为这些目的设置数据库，尽管这是可能的。

建议的架构

红色箭头表示身份验证流程。
5 是通用 API 请求。

实际问题

1. 使用这种架构有什么禁忌吗？
2. 如何实现它以及我需要通过 4 个请求/响应中的每一个传递什么？ (最简单的场景和先决条件)？
3. 对于该领域的初学者来说，是否有任何资源可以帮助我更好地了解 OAuth 和身份验证？

Answer 1

第一季度

鉴于 OAuth2 将 HTTP 重定向用于其指定的大部分功能，采用此类架构并施加如此多的约束将减少您可以利用的可能性。除此之外，我没有发现任何重大问题。

第二季度

假设您不想使用重定向，您需要使用的 OAuth2 流是资源所有者密码授予 (ROPC)，主要是因为 OAuth2 提供了四个流，它是唯一能够满足您要求的流。

• ❌授权代码授予(基于重定向)
• ❌ 隐式授予(基于重定向)
• ✅ 资源所有者密码授予
• ❌ 客户端凭据授予(针对希望代表自己而不是最终用户访问 API 的客户端应用程序)

在请求 1 和 2 中，您将用户名和密码凭据首先传递到您自己的服务器，然后传递到授权服务器。在请求 3 和 4 中，成功的用户身份验证产生的访问 token 被传递到 AngularJS 应用程序，该应用程序可以将其存储在 localStorage 中以供以后使用。

这完全满足您的要求，但它不是最常用的架构。通常，SPA 将使用隐式授权来获取访问 token 。鉴于此授权正是为此目的进行了优化，它可以以良好的用户体验特征来实现，但是，它确实会利用重定向。

第三季度

OAuth2 specification itself并不难看，这将是我推荐的最佳资源。为了更高级和快速地介绍该主题，我还推荐 https://auth0.com/docs/protocols/oauth2 .