Okta OpenID Connect - OWIN 静态文件中间件 SPA

Question

我有一个 Angular (2.x) Spa 应用程序，它使用来自后端的 webapi 调用。 Spa 的资产通过 Owin 静态文件中间件托管 而不是返回视图的 MVC 控制器 。我正在尝试使用 OpenID Connect oauth2 代码流与 Okta 集成以实现 SSO。因此，我希望像下面这样的简单示例能够工作：

https://github.com/oktadeveloper/okta-oidc-spa-osw-aspne

但是，该示例使用控制器操作来托管视图。最重要的是，我的 webapi 端点上有一个 Authorize 属性，returns 302 请求 okta /oauth2/v1/authorize 端点最终给我一个如下所示的错误：

XMLHttpRequest cannot load https://xxxxx.okta.com/oauth2/v1/authorize?client_id=xxxxx&re…xxxxx. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:54544' is therefore not allowed access.

我在我的 webapi 配置上启用了 CORS，但也没有导致任何更改。

配置如下：

app.SetDefaultSignInAsAuthenticationType(CookieAuthenticationDefaults.AuthenticationType);
            app.UseCookieAuthentication(new CookieAuthenticationOptions { });
            app.UseOpenIdConnectAuthentication(new OpenIdConnectAuthenticationOptions
            {
                ClientId = "xxxxxx",
                Authority = "https://xxxxx.okta.com",
                ClientSecret = "xxxxxxx"
            });

所以有几个问题，我什至应该使用 OpenIdConnectAuthentication 中间件，我如何获得重定向以处理我没有控制器操作来标记授权属性的静态资产。等等。示例项目的另一件事看起来像是 okta 登录的弹出窗口小部件，如果您在检测到未经授权的用户时只是重定向到它们，这似乎是不必要的。

Answer 1

OpenID Connect 确实适用于 SPA，尽管在您的场景中使用隐式流而不是代码流可能更有意义。请参阅此一般答案：Authentication for SPA

选择隐式还是代码取决于您最终希望 SPA 访问的内容。您是希望 SPA 直接持有访问令牌（隐式），还是希望它保留在服务器上（代码）？没有一个简单的答案，因为这在很大程度上取决于您的应用程序的构建方式以及您需要它做什么。

另一个可能更简单的选择是在您的 SPA 中使用 Okta 登录小部件，它可以为您处理很多这样的事情。 tutorial 在 Angular 应用程序中进行设置。

完全披露：我在 Okta 工作。

Okta OpenID Connect - OWIN 静态文件中间件 SPA

Okta OpenID Connect - OWIN Static File Middleware SPA

asp.net-web-api2

owin-middleware

openid-connect

okta