如何从单页应用程序实现 OAuth 2.0 授权码授予？

Posted 2023-02-16

【中文标题】如何从单页应用程序实现 OAuth 2.0 授权码授予？

【英文标题】：How to implement OAuth 2.0 Authorization Code Grant from Single-Page Application?

【发布时间】：2019-02-01 01:24:11

【问题描述】：

我们有一个由 ASP.NET Web API 支持的 Angular SPA，它使用带有承载令牌的 OAuth 2.0 Resource Owner Password Credentials Grant 进行授权。 API 使用 Microsoft.Owin.Security.OAuth 来实现 OAuth。

我们正在尝试与将使用 Authorization Code Grant 的第三方应用程序集成，以便用户授权它代表他们访问我们的应用程序。

我们希望授权页面成为 SPA 的一部分，但我无法弄清楚如何将授权请求从 SPA 提交到 API 并将其重定向回第三方应用程序。

我尝试过使用 AJAX（与 SPA 中的所有其他 API 请求一样）和常规 html 表单（以便重定向响应重定向页面）。

我们最初是从 API 发回 JSON 响应并让 SPA 自己进行重定向，但如果出现错误，OWIN 会自动发送重定向响应；所以似乎没有任何方法可以避免重定向响应。

如果我通过 AJAX 发送请求，浏览器将自动跟随服务器发送的重定向响应，发送另一个 AJAX 请求而不是重定向页面。

如果我使用常规 HTML 表单发送请求，似乎没有任何方法可以发送带有承载令牌的所需 Authorization 标头。

【参考方案1】：

我最终使用了一个 HTML 表单并在表单正文中发送了当前的访问令牌。我在表单中为访问令牌创建了一个隐藏输入，并且仅在提交表单时设置其值（以减少用户或恶意脚本/扩展看到它的机会）。

在服务器端，我们的 OAuth 代码以前只在 Authorization 标头中查找访问令牌；我将其更改为也在请求表单 (IOwinRequest.ReadFormAsync) 中查看授权代码请求。

OAuth 代码现在向成功的授权代码请求发送重定向响应，而不是发送带有重定向 URI 的 JSON 响应。