Azure B2C for Angular 8应用程序，带有Angular auth oidc客户端-b2clogin端点POST CORS错误

我在angular 8应用程序中使用了“新”Azure B2C端点：

• https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/oauth2/v2.0/authorize
• https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/oauth2/v2.0/token

STS服务器如下所示：

• https://{tenant}.b2clogin.com/tfp/{tenant}/B2C_1_SuSi_v2/oauth2/v2.0/

但问题是oidc库向https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/oauth2/v2.0/token？p=b2c_1_susi_v2

我得到了CORS错误：

CORS策略已阻止在“https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/oauth2/v2.0/token？p=b2c_1_susi_v2”从源“”访问XMLHttpRequest：请求的资源上不存在“访问控制允许源”头

我做错了什么？这是PKCE的代码流

以下是我的App.module.ts的核心：

---

几年前，我为Azure AD CORS对SPA的支持而苦苦挣扎——为了让oidc客户端正常工作，我不得不编写一些变通方法

到2020年，支持情况更好，CORS+PKCE现在都得到了支持。如果它有用，结合此处发布的其他资源，请参阅my，了解如何使SPA和API协同工作。

更新 这在相当长的一段时间内都是不正确的-Damien Bod的angular auth oidc客户端确实与带有PKCE的Azure AD B2C一起工作。在互联网上寻找他的文章，它描述了每一步

我已经成功地使用了大约一年了

---

好的，所以我发现（艰难的方式）PKCE的代码流根本不适用于SPA

但隐式流确实有效

我很确定这是Azure B2C的问题，因为所有这些CORS错误

---

但我不是这方面的专家。如果有人在Azure B2C上有代码流PKCE的工作示例，请分享

我可以确认Azure AD B2C的令牌端点不允许CORS。警告：隐式授权已被弃用-但根据我所建立的Azure AD B2C不支持SPA的PKCE！：（@GazB从MSAL.js 2.x开始支持Azure Ad的身份验证代码流B2C@Niladri现在是这样。：）但这仍然只是在Alpha版本中，而且由于V1需要很长时间才能获得稳定的版本，所以考虑6-12个月的时间是没有用的。谁知道到时候会有什么结果。对于Azure B2C，请在此处注册您的应用程序以获取身份验证代码+PKCE和CORS

export function loadConfig(oidcConfigService: OidcConfigService, httpClient: HttpClient) {
  if (!environment.production) {
    console.log("APP_INITIALIZER STARTING");
  }

  return () =>
    httpClient
      .get(`${window.location.origin}/api/oidc`)
      .pipe(
        take(1),
        switchMap((config: OidcConfig) => of(config)),
        tap(config => {
          oidcConfig = config;
        }),
        map(
          config =>
            `https://${config.tenant}.b2clogin.com/${
              config.tenant
            }.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=B2C_1_SuSi_v2`
        )
      )
      .toPromise()
      .then(wellKnownUri => oidcConfigService.load_using_custom_stsServer(wellKnownUri));
}

export class AppModule {
  constructor(
    private oidcSecurityService: OidcSecurityService,
    private oidcConfigService: OidcConfigService
  ) {
    this.oidcConfigService.onConfigurationLoaded.subscribe((configResult: ConfigResult) => {
      // Use the configResult to set the configurations

      const config: OpenIdConfiguration = {
        stsServer: configResult.customConfig.stsServer,
        redirect_url: oidcConfig.redirect_url,
        client_id: oidcConfig.client_id,
        scope: oidcConfig.scope, // "code",
        response_type: oidcConfig.response_type,
        post_logout_redirect_uri: oidcConfig.post_logout_redirect_uri,
        silent_renew: true,
        silent_renew_url: "/silent-renew.html",
        post_login_route: oidcConfig.post_login_route,
        forbidden_route: oidcConfig.forbidden_route,
        unauthorized_route: oidcConfig.unauthorized_route,
        auto_userinfo: oidcConfig.auto_userinfo,
        log_console_debug_active: !environment.production
        // all other properties you want to set
      };

      this.oidcSecurityService.setupModule(config, configResult.authWellknownEndpoints);
    });
    if (!environment.production) {
      console.log("APP STARTING");
    }
  }
}