使用MSAL 2.0做AAD B2C认证时TestCafe代理问题的绕过方案咨询

根因确认 #

问题本质是TestCafe默认代理机制会重写所有访问的应用URL，格式变为http://<testcafe-proxy-host>:<port>/<session-id>/<original-app-url>，MSAL 2.0初始化时会读取当前页面URL作为重定向URI校验依据，和AAD B2C应用注册中配置的原始应用URL不匹配，因此直接终止了跳转登录的流程。

可行解决方案 #

方案1：动态配置MSAL重定向URI（侵入性最低） #

在Angular应用的MSAL初始化逻辑中增加判断，当检测到当前URL是TestCafe代理格式时，动态提取原始应用URL作为重定向URI配置：

// app.module.ts 中MSAL实例化部分
function getRedirectUri(): string {
  const testCafeProxyRegex = /^https?:\/\/[^\/]+\/[a-zA-Z0-9]+\/(https?:\/\/.*)$/;
  const currentUrl = window.location.href;
  const match = currentUrl.match(testCafeProxyRegex);
  // TestCafe代理访问场景下返回原始应用URL作为重定向URI
  if (match) {
    return match[1];
  }
  // 正常访问场景返回预设的基础URL
  return '你的应用正式重定向URL';
}

@NgModule({
  imports: [
    MsalModule.forRoot({
      auth: {
        clientId: '你的客户端ID',
        authority: '你的B2C权威地址',
        redirectUri: getRedirectUri(),
        // 其余配置保持原有逻辑不变
      }
    }, {})
  ]
})

配置完成后无需修改AAD B2C的应用注册配置，直接运行测试即可。

方案2：配置TestCafe启动参数跳过B2C流量代理 #

启动TestCafe时增加以下参数，让AAD B2C相关的流量不经过TestCafe代理，避免URL重写导致的校验失败：

testcafe chrome tests/ --disable-http2 --proxy-bypass *.b2clogin.com

该方案需要测试环境网络可以直接访问AAD B2C域名，无需走额外的公司代理。

方案3：绕过UI登录流程直接注入认证信息（测试效率最高） #

如果测试用例不需要验证登录UI本身的逻辑，可以直接调用AAD B2C的ROPC流或者客户端凭证流拿到有效令牌，在TestCafe测试用例启动前将令牌写入应用对应的localStorage或sessionStorage，直接跳过登录跳转步骤：

// TestCafe测试用例前置逻辑
fixture`你的应用测试`
  .page`你的应用地址`
  .beforeEach(async t => {
    // 调用预先封装的B2C令牌获取工具函数拿到id_token和access_token
    const tokens = await getB2CTokens('测试账号', '测试密码');
    // 写入MSAL 2.0对应的存储键，按应用实际存储规则调整即可
    await t.eval(() => {
      localStorage.setItem('msal.idtoken', tokens.idToken);
      localStorage.setItem('msal.token.keys', JSON.stringify([tokens.accessTokenKey]));
      // 补充其余MSAL需要的存储字段
    });
  });

注意ROPC流需要在AAD B2C中单独启用，且仅建议在测试环境使用。

验证步骤 #

1. 优先选择方案1调整MSAL配置后运行测试，检查页面是否可以正常跳转到B2C登录页
2. 登录完成后检查是否可以正常跳转回应用，且认证状态符合预期
3. 若仍存在异常，可搭配方案2的启动参数共同使用

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