Azure B2C自定义策略：unifiedssp页面ReCAPTCHA Enterprise集成及值读取问题

可以在Unified SSP页面的表单中添加隐藏字段存储ReCAPTCHA Token，但直接用JS动态添加字段后B2C无法读取的问题，核心是B2C的表单处理机制不会自动识别未提前注册的动态字段，需要结合自定义策略配置+特定的JS写法来解决，具体步骤如下：

1. 先在自定义策略中定义对应自定义声明 #

首先要在策略的<ClaimsSchema>里声明存储Token的字段，确保B2C有对应的声明容器来存储值：

<ClaimsSchema>
  <ClaimType Id="captchaToken">
    <DisplayName>ReCAPTCHA Enterprise Token</DisplayName>
    <DataType>string</DataType>
    <UserInputType>Hidden</UserInputType>
  </ClaimType>
</ClaimsSchema>

2. 在Unified SSP的技术配置中关联声明 #

找到使用Unified SSP的技术配置（比如LocalAccountSigninWithLogonEmail），添加该声明作为输入输出，让B2C在表单提交时读取并传递这个字段值：

<TechnicalProfile Id="LocalAccountSigninWithLogonEmail">
  <!-- 其他现有配置 -->
  <InputClaims>
    <InputClaim ClaimTypeReferenceId="captchaToken" />
  </InputClaims>
  <OutputClaims>
    <OutputClaim ClaimTypeReferenceId="captchaToken" />
  </OutputClaims>
</TechnicalProfile>

3. 编写正确的页面自定义JS代码 #

不能直接随意添加隐藏字段，要确保字段名称和声明ID完全匹配，并且在表单提交前完成Token赋值，同时让B2C的表单机制识别到这个字段：

// 等待B2C页面完全加载
document.addEventListener('DOMContentLoaded', function() {
  // 定位到Unified SSP的表单容器（根据实际页面结构调整选择器）
  const formContainer = document.querySelector('.entryForm');
  if (!formContainer) return;

  // 创建隐藏字段，name必须和声明ID完全一致
  const captchaInput = document.createElement('input');
  captchaInput.type = 'hidden';
  captchaInput.name = 'captchaToken';
  captchaInput.id = 'captchaToken';
  
  // 将字段插入到表单内部（必须放在B2C的表单元素范围内）
  formContainer.querySelector('form').appendChild(captchaInput);

  // 监听表单提交事件，先获取ReCAPTCHA Token再提交
  const loginForm = formContainer.querySelector('form');
  loginForm.addEventListener('submit', async function(e) {
    // 阻止默认提交，先获取Token
    e.preventDefault();
    
    // 调用ReCAPTCHA Enterprise获取Token（替换为你的站点密钥和动作）
    const token = await grecaptcha.enterprise.execute('YOUR_RECAPTCHA_SITE_KEY', { action: 'password_reset' });
    
    // 赋值给隐藏字段
    captchaInput.value = token;
    
    // 重新提交表单
    loginForm.submit();
  });
});

4. 排查常见问题 #

• 字段名称不匹配：隐藏字段的name属性必须和策略中声明的Id完全一致（大小写敏感），否则B2C无法映射到声明。
• CSP限制：检查B2C的内容安全策略（CSP）是否允许加载ReCAPTCHA的脚本，以及允许inline JS执行（或者将自定义JS放在允许的源中）。
• 表单容器选择器错误：不同版本的Unified SSP页面结构可能有差异，需要调整querySelector的选择器来定位正确的表单容器。

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