c# - 使用 OpenID Connect (AWS Cognito) 时如何避免 CORS 问题？

Question

我正在使用 Vue.js 和 .net core Web API 来设置一个网页。前端和后端完全分开。

我已将 API 配置为在 AWS Cognito 中使用 openid connect 和“授权代码授予”进行身份验证，如下所示:

services.AddAuthentication(options =>
        {
            options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
            options.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
        })
        .AddCookie()
        .AddOpenIdConnect(options =>
        {
            options.SignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
            options.ResponseType = OpenIdConnectResponseType.Code;
            options.MetadataAddress = cognitoSettings.AuthorityUrl;
            options.ClientId = cognitoSettings.ClientId;
            options.SaveTokens = false;
            options.TokenValidationParameters = new TokenValidationParameters
            {
                ValidateIssuer = true
            };
        });

当我从[授权] Controller 请求数据时，这在浏览器中工作正常，我被重定向到 Cognito 登录页面，并且在输入凭据后，我可以看到授权数据。

但是，如果我在 Vue 应用程序中使用 ajax(axios) 请求相同的资源，后端会返回 302，并且由于跨源策略，ajax 调用会失败。 (因为 Cognito 登录与我的后端位于不同的域)

所以我的问题是:如何才能让这个场景发挥作用？

• 我需要将 openid 身份验证移至我的前端吗 使这项工作有效并让后端仅使用不记名 token 授权？但随后我需要所有 openid 信息，例如姓名或 电子邮件地址位于后端而不是我的 Vue 应用程序中。那我怎样才能得到它们呢？

• 是否可以将响应代码从 302 更改为 401 前端可以对未经授权的调用使用react并重定向用户吗？ 但是我从哪里获取登录 URL，因为所有配置(client_id、metadataaddress)都是 在我的后端配置。

Answer 1

给您一些提示: * 你的 API 不应该使用 openid connect - 它应该只验证访问 token * 您的 SPA 应使用 Javascript 库实现 Open Id Connect

我的博客上有一个具有此架构的 Cognito 示例 UI - 您可以登录 - 请参阅此链接: https://authguidance.com/home/code-samples-quickstart/

博客上有一些相关的文章和代码示例 - 也许可以看到第一个 SPA 示例和 .Net Core 示例