使用 Auth0 和客户端 node.js 服务器在 SPA 中进行身份验证
Authentication in SPA using Auth0 and clients node.js server
背景
我有两个应用:
- Angular2 单页应用程序
- Node.JS 表示
我想通过使用由 express 服务器公开的 API 来验证和授权登录 Angular2 应用程序的用户。我想使用 Auth0 作为我的 IDP。我想要定制整个应用程序(客户端 + 服务器)。
同时:
- 我不想使用 Auth0 锁
- 我不想使用刷新和重定向(为了更好的用户体验和简化的流程)
- 我不想将 auth0.js 库发送到 Angular2 应用程序(以最小化负载和客户端代码的复杂性)。
- 我想将服务器返回的授权数据保存在 localStorage 中(而不是 passport.js 设置 cookie 和刷新)
- 最好,我不想为这些目的设置数据库,尽管这是可能的。
提议的架构
红色箭头表示身份验证流程。
5 是一个通用的 API 请求。
实际问题
- 使用这种架构有什么禁忌症吗?
- 我如何实现它以及我需要通过 4 requests/responses 中的每一个? (最简单的场景和前提条件)?
- 对于该领域的初学者,是否有任何资源可以帮助我更好地理解 OAuth 和一般身份验证?
Q1
鉴于 OAuth2 将 HTTP 重定向用于其指定功能的重要部分,使用诸如此类的架构并施加如此多的约束将减少您可以利用的可能性的数量。除此之外,我没有发现任何重大问题。
Q2
鉴于您不想使用重定向,您需要使用的 OAuth2 流程是资源所有者密码授予 (ROPC),主要是因为 OAuth2 提供的四个流程是唯一可以满足您要求的流程.
- ❌授权码授予(redirect-based)
- ❌ 隐式授权 (redirect-based)
- ✅ 授予资源所有者密码
- ❌ 客户端凭据授予(针对想要代表自己而不是 end-user 访问 API 的客户端应用程序)
在请求 1 和 2 中,您首先将用户名和密码凭据传递到您自己的服务器,然后再传递到授权服务器。在请求 3 和 4 中,成功的用户身份验证产生的访问令牌被传送到 AngularJS 应用程序,该应用程序可以将其存储在 localStorage
中供以后使用。
这完全符合您的要求,但它不是最常用的架构。通常,SPA 会使用隐式授权来获取访问令牌。鉴于此授权正是为此目的而优化的,它可以以良好的用户体验特性来实现,但是,它确实会利用重定向。
Q3
OAuth2 specification itself is not that hard on the eyes and it would be the best resource I would recommend. For a more high-level and quick intro into the topic I would also recommend https://auth0.com/docs/protocols/oauth2.
背景
我有两个应用:
- Angular2 单页应用程序
- Node.JS 表示
我想通过使用由 express 服务器公开的 API 来验证和授权登录 Angular2 应用程序的用户。我想使用 Auth0 作为我的 IDP。我想要定制整个应用程序(客户端 + 服务器)。 同时:
- 我不想使用 Auth0 锁
- 我不想使用刷新和重定向(为了更好的用户体验和简化的流程)
- 我不想将 auth0.js 库发送到 Angular2 应用程序(以最小化负载和客户端代码的复杂性)。
- 我想将服务器返回的授权数据保存在 localStorage 中(而不是 passport.js 设置 cookie 和刷新)
- 最好,我不想为这些目的设置数据库,尽管这是可能的。
提议的架构
红色箭头表示身份验证流程。
5 是一个通用的 API 请求。
实际问题
- 使用这种架构有什么禁忌症吗?
- 我如何实现它以及我需要通过 4 requests/responses 中的每一个? (最简单的场景和前提条件)?
- 对于该领域的初学者,是否有任何资源可以帮助我更好地理解 OAuth 和一般身份验证?
Q1
鉴于 OAuth2 将 HTTP 重定向用于其指定功能的重要部分,使用诸如此类的架构并施加如此多的约束将减少您可以利用的可能性的数量。除此之外,我没有发现任何重大问题。
Q2
鉴于您不想使用重定向,您需要使用的 OAuth2 流程是资源所有者密码授予 (ROPC),主要是因为 OAuth2 提供的四个流程是唯一可以满足您要求的流程.
- ❌授权码授予(redirect-based)
- ❌ 隐式授权 (redirect-based)
- ✅ 授予资源所有者密码
- ❌ 客户端凭据授予(针对想要代表自己而不是 end-user 访问 API 的客户端应用程序)
在请求 1 和 2 中,您首先将用户名和密码凭据传递到您自己的服务器,然后再传递到授权服务器。在请求 3 和 4 中,成功的用户身份验证产生的访问令牌被传送到 AngularJS 应用程序,该应用程序可以将其存储在 localStorage
中供以后使用。
这完全符合您的要求,但它不是最常用的架构。通常,SPA 会使用隐式授权来获取访问令牌。鉴于此授权正是为此目的而优化的,它可以以良好的用户体验特性来实现,但是,它确实会利用重定向。
Q3
OAuth2 specification itself is not that hard on the eyes and it would be the best resource I would recommend. For a more high-level and quick intro into the topic I would also recommend https://auth0.com/docs/protocols/oauth2.