Angular 8 应用程序的 Azure B2C，带有 angular-auth-oidc-client - b2clogin 端点 POST CORS 错误

Question

我在我的 angular 8 应用程序中使用了 Damien Bod's angular-auth-oidc-client 和 "new" 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

发出 POST 请求

我收到 CORS 错误：

Access to XMLHttpRequest at 'https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/oauth2/v2.0/token?p=b2c_1_susi_v2' from origin 'https://192.168.3.2:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

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

这是我的 App.module.ts 的核心：


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");
    }
  }
}

Answer 1

几年前，我一直在努力解决 Azure AD CORS 对 SPA 的支持 - 并且不得不编写一些解决方法以使 oidc-client 正常工作。

从 2020 年开始支持更好，现在同时支持 CORS + PKCE。如果有用，结合此处发布的其他资源，请参阅我的 Azure AD tutorial 获取 SPA 和 API 协同工作。

Answer 2

更新

这在很长一段时间内都不是真的 - Damien Bod 的 angular-auth-oidc-client 确实可以与带有 PKCE 的 Azure AD B2C 一起使用。在网上找他的文章，每一步都有描述。

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

好的，所以我发现（困难的方法）使用 PKCE 的代码流根本不适用于 SPA！

但是隐式流确实有效！

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

但我不是这些方面的专家。如果有人有 Code flow PKCE agains Azure B2C 的工作示例，请分享它！

Angular 8 应用程序的 Azure B2C，带有 angular-auth-oidc-client - b2clogin 端点 POST CORS 错误

Azure B2C for Angular 8 app with angular-auth-oidc-client - b2clogin endpoint POST CORS error

angular

azure

oauth-2.0

azure-ad-b2c

angular-oauth2-oidc

更新