1

我在我的 angular 8 应用程序中使用了Damien Bod 的 angular-auth-oidc-client和“新”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://{租户}.b2clogin.com/tfp/{租户}/B2C_1_SuSi_v2/oauth2/v2.0/

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

我得到CORS错误：

从源“ https://192.168.3.2:4200 ”访问“https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/oauth2/v2.0/token?p=b2c_1_susi_v2”处的 XMLHttpRequest已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我在这里做错了什么？这是带有 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");
    }
  }
}
4

2 回答 2

1

几年前，我在 Azure AD CORS 对 SPA 的支持上苦苦挣扎——不得不编写一些变通方法来让 oidc-client 正常工作。

自 2020 年起支持更好，现在都支持 CORS + PKCE。如果它有用，请结合此处发布的其他资源，请参阅我的Azure AD 教程，了解如何让 SPA 和 API 协同工作。

于 2019-07-25T20:09:14.957 回答
0

更新

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

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

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

但是隐式流确实有效！

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

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

于 2019-07-26T16:10:27.030 回答