如何用AppAuth.js与Azure AD B2C实现React对接.NET3.1 Web API认证及配置URL问题？

一、获取正确的OpenID配置URL #

Azure AD B2C的OpenID配置URL遵循固定格式，需替换占位符为你的租户实际信息：

https://{租户名称}.b2clogin.com/{租户ID}/{用户流/策略名称}/v2.0/.well-known/openid-configuration

• 租户名称：你的Azure AD B2C租户域名（如xxx.onmicrosoft.com或自定义域名）
• 租户ID：租户的GUID标识符，或直接使用租户域名
• 用户流/策略名称：已发布的用户流名称（如B2C_1_signupsignin1，需确保该策略已在Azure门户中发布，否则配置URL会返回404）

示例URL：

https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_signupsignin/v2.0/.well-known/openid-configuration

二、调整@openid/appauth代码对接Azure AD B2C #

1. 修复配置获取逻辑 #

原代码的fetchFromIssuer方法可直接使用，但需确保URL正确，同时建议在catch块中打印详细错误信息，便于排查无提示报错：

// 替换为你的实际配置
const tenantName = "contoso.onmicrosoft.com";
const tenantId = "contoso.onmicrosoft.com"; // 或租户GUID
const policyName = "B2C_1_signupsignin";
const openIdConnectUrl = `https://${tenantName}.b2clogin.com/${tenantId}/${policyName}/v2.0/.well-known/openid-configuration`;

AuthorizationServiceConfiguration.fetchFromIssuer(openIdConnectUrl)
  .then(response => {
    console.log('Fetched service configuration', response);
    this.configuration = response;
    this.showMessage('配置获取完成');
    // 后续可发起授权请求
    this.initAuthorizationRequest();
  })
  .catch(error => {
    console.error('配置获取失败详情:', error);
    this.showMessage(`配置获取失败: ${error.message || JSON.stringify(error)}`);
  });

2. 构造正确的授权请求 #

Azure AD B2C对授权请求的参数有特定要求，需注意以下几点：

• 必须包含openid scope，否则无法触发OpenID Connect流程
• 如需调用.NET Web API，需添加API的专属scope（格式为https://{租户名称}/{API应用ID URI}/access_as_user）
• 回调地址必须与Azure AD B2C应用注册中配置的SPA类型重定向URI完全一致

示例授权请求代码：

initAuthorizationRequest() {
  // 生成随机state值，用于防CSRF攻击
  const generateState = () => {
    return Array.from(crypto.getRandomValues(new Uint8Array(16))).map(b => b.toString(16)).join('');
  };

  const request = new AuthorizationRequest({
    client_id: "你的SPA应用ID", // 从Azure应用注册中获取
    redirect_uri: "http://localhost:3000/auth-callback", // 与Azure配置的重定向URI一致
    scope: "openid offline_access https://contoso.onmicrosoft.com/api/access_as_user", // 按需调整
    response_type: AuthorizationRequest.RESPONSE_TYPE_CODE,
    state: generateState(),
    extras: {}
  });

  // 发起授权跳转
  this.authorizationHandler.performAuthorizationRequest(this.configuration, request);
}

三、排查无提示报错的常见原因 #

• CORS配置问题：在Azure AD B2C应用注册中，确保已将SPA的域名添加到"允许的来源"列表，且重定向URI设置为"单页应用"类型
• 策略未发布：Azure AD B2C的用户流/策略必须点击"发布"按钮生效，否则配置URL无法访问
• URL格式错误：检查租户名称、策略名称是否拼写正确，注意使用b2clogin.com域名（而非旧版的azurewebsites.net）
• AppAuth版本兼容：确保@openid/appauth为最新版本，避免旧版本对Azure AD B2C配置的解析问题

内容的提问来源于stack exchange，提问作者Jyothish Bhaskaran