如何在第一方客户端js应用程序中使用oauth？

Question

我们产品的型号如下：

Api后端（无头）

我已经设置了oauth并准备使用 resource owner credentials grant 。任何想要使用我们的api的人都可以使用API​​密钥或其用户名/密码。当然，他们也需要他们的客户ID和秘密。

访问Api的SPA前端

我已经构建了一个SPA，它将使用api为我们的客户提供门户GUI。鉴于此客户端应用程序由我们拥有和管理（因此它是受信任的应用程序）如何使用oauth仅使用用户名/密码安全地验证用户？

---

最初它使用的是JWT auth系统，只需要用户名/通过，但现在我们已经实现了oauth，我想整合。让每个用户都需要拥有客户端ID和秘密来登录是不合理的，但我希望用户能够从GUI完全访问api。

我正在考虑使用CSRF令牌，但是当服务器端没有生成任何内容时，如何使用我的应用程序？

我不知道该怎么办。

编辑：非常相似to the problem here。

Answer 1

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

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

您应该将implicit grant用于不受信任的客户端。

Answer 2

我决定使用the solution described here。

And here is a snippet of my implementation

TL; DR版本

1. 在app和api之间创建代理
2. 将客户端ID和密码存储在代理
中
3. App使用密码授予类型登录 - 代理拦截登录请求并插入客户端ID和密码
4. 登录时，代理会将访问令牌作为加密Cookie
返回
5. 客户端存储cookie并使用api请求发送（发送给代理）
6. 代理解密cookie并在转发到api端点之前将访问令牌插入授权标头

对我来说，这比在api上实现自定义的东西有几个优点：

• 无需在oauth服务器上进行自定义授权
• ID / secret在应用程序中安全隐藏，仍然可以使用密码授予
• oauth服务器可以识别客户端（不需要为每个用户提供单独的客户端ID）