如何使用 Identity Server 3 保护 Web api

Question

我正在构建一个 MVC Web 应用程序，它使用 openID Connect 混合流向 Identity Server 3 进行身份验证。MVC Web 应用程序包含用于从 een ApiController 获取异步 JSON 数据的 jQuery 脚本。该 ApiController 是同一个 MVC Web 应用程序的一部分。

我不希望每个人都能从 API 访问数据，所以我也想保护 API。我向 ApiController 添加了一个 [authorize] 属性。当使用 JQuery ajax 请求请求 API 时，我收到以下错误消息：

XMLHttpRequest 无法加载 https://localhost:44371/identity/connect/authorize?....etc。 对预检请求的响应未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:13079” 使用权。响应的 HTTP 状态代码为 405。

但是，当我直接在浏览器中向 API 方法发出请求时，我会被正确重定向到 Identity Server 的登录页面..

那么，这里到底有什么问题？我读到了一些关于不允许通过“后通道”请求/授权端点的内容，但我不明白“前通道”和“后通道”之间有什么区别。是否有可能我混淆了错误的 OAuth 流程？混合流可能不是正确的吗？

我还发现 API 通常是一个单独的应用程序，但构建一个单独的 API 应用程序（例如需要不记名令牌）是否总是必要/最佳实践？

请为我指明正确的方向。

Answer 1

您的身份服务器上的授权方法不允许 ajax 调用。在这种特殊情况下，即使指定 CORS 标头也无济于事。也许您可以返回禁止响应而不是重定向，并通过 window.location 手动将客户端重定向到所需位置

Answer 2

您需要允许从其他域访问您的 IdentityServer，这是通过允许“跨源资源共享”或简称 CORS 来完成的。在 IdentityServer 中，实现这一点的最简单方法是在您的 Javascript 客户端的客户端配置中，请参阅IdentityServer docs on CORS：

配置 CORS 的一种方法是在客户端配置上使用 AllowedCorsOrigins 集合。只需将客户端的来源添加到集合中，IdentityServer 中的默认配置将参考这些值以允许来自来源的跨域调用。

您看到的错误是浏览器告诉您，当它询问 IdentityServer 是否允许来自您的 Javscript 客户端的请求时，它返回的响应基本上是拒绝，因为在“ Access-Control-Allow-Origin”响应标头。事实上，响应中根本没有标头，这意味着 CORS 未启用。

如果您按照从文档here 添加 JavaScript 客户端的快速入门操作，所有必要的代码都在此处详细说明，您需要进行客户端配置并设置 IdentityServer 以允许 CORS。