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属性，它向okta / oauth2 / v1 / authorize端点返回302个请求，最终给出了如下错误：

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登录小部件，它可以为您处理很多这样的小部件。在Angular应用程序中设置了tutorial。

完全披露：我在Okta工作。

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

1 个答案: