如何将 oauth 与第一方客户端 js 应用程序一起使用?

How to use oauth with 1st party client-side js app?

我们产品的型号是这样的:

Api 后端(无头)

我已经设置了 oauth 并准备好与 resource owner credentials grant 一起使用。任何想使用我们的 api 的人都可以使用 API 密钥或他们的 username/password。当然,他们还需要他们的客户端 ID 和密码。

访问 Api

的 SPA 前端

我构建了一个 SPA,它将使用 api 为我们的客户提供门户 GUI。鉴于此客户端应用程序由我们拥有和管理(因此它是一个受信任的应用程序)我如何仅使用 username/password 和 oauth 来安全地验证用户?


最初它使用的是只需要 username/pass 的 JWT 身份验证系统,但现在我们已经实现了 oauth,我想进行整合。让每个用户还需要手头有他们的客户端 ID 和密码才能登录是不合理的,但我希望用户可以从 GUI 完全访问 api。

我一直在考虑使用 CSRF 令牌,但是当服务器端没有生成任何内容时,它如何与我的应用一起工作?

我不确定如何进行。

编辑:非常相似to the problem here

您不应使用来自 JavaScript 应用程序的资源所有者凭据授予。您拥有和管理该应用程序这一事实并不能使其成为受信任的应用程序。

可信客户端是可以保密的应用程序。 SPA 或任何 JavaScript 应用都无法保密。

对于不受信任的客户端,您应该使用 implicit grant

我决定使用the solution described here

And here is a snippet of my implementation

TL;DR 版本是

  1. 在应用程序和 api
  2. 之间创建代理
  3. 在代理中存储客户端 ID 和密码
  4. App 使用密码授权类型登录 -- 代理拦截登录请求并插入客户端 ID 和密码
  5. 登录响应代理 returns 访问令牌 作为加密的 cookie
  6. 客户端存储 cookie 并发送 api 请求(到代理)
  7. 代理解密 cookie 并将访问令牌插入授权 header,然后转发到 api 端点

对我来说,这比在 api 本身上实现一些自定义有几个优点:

  • 无需在 oauth 服务器上进行自定义授权
  • ID/secret 已安全地从应用程序中隐藏,并且仍然可以使用密码授予
  • oauth 服务器可以识别客户端(不需要为每个用户单独的客户端 ID)