Azure AD B2C登录用户流集成reCAPTCHA v3技术求助

由于Azure AD B2C内置用户流不支持直接在登录流程中添加reCAPTCHA v3，可通过自定义登录页面嵌入reCAPTCHA脚本 + API连接器验证token的方式实现，无需替换现有用户流，步骤如下：

1. 准备reCAPTCHA v3密钥 #

• 登录Google reCAPTCHA控制台，注册站点并选择reCAPTCHA v3类型
• 填写Azure AD B2C的域名（格式如your-tenant-name.b2clogin.com），完成后获取Site Key和Secret Key

2. 自定义B2C登录页面 #

• 在Azure门户的AD B2C资源中，进入目标用户名密码登录流，启用「自定义页面」功能
• 上传或托管自定义HTML登录页面，在页面中嵌入reCAPTCHA v3脚本：

  <script src="https://www.google.com/recaptcha/api.js?render=你的Site-Key"></script>
  

• 为登录表单添加提交事件监听，获取reCAPTCHA token并传入B2C：

  // 监听登录表单提交（表单ID需匹配B2C默认表单ID，通常为loginForm）
  document.getElementById('loginForm').addEventListener('submit', function(e) {
    e.preventDefault();
    grecaptcha.ready(function() {
      // 执行reCAPTCHA验证，action设为login
      grecaptcha.execute('你的Site-Key', {action: 'login'}).then(function(token) {
        // 创建隐藏字段存储token，字段名需与后续API连接器接收参数一致
        const recaptchaInput = document.createElement('input');
        recaptchaInput.type = 'hidden';
        recaptchaInput.name = 'g-recaptcha-response';
        recaptchaInput.value = token;
        document.getElementById('loginForm').appendChild(recaptchaInput);
        // 提交表单
        document.getElementById('loginForm').submit();
      });
    });
  });
  

3. 创建API连接器验证reCAPTCHA token #

• 在Azure AD B2C中新建「API连接器」，配置API端点（可使用Azure Function、自定义Web API等）
• 实现reCAPTCHA token验证逻辑，示例Azure Function（Node.js）：

  module.exports = async function(context, req) {
    const recaptchaToken = req.body['g-recaptcha-response'];
    const secretKey = '你的Secret-Key';
    const verifyUrl = `https://www.google.com/recaptcha/api/siteverify?secret=${secretKey}&response=${recaptchaToken}`;
  
    try {
      const response = await fetch(verifyUrl);
      const verifyResult = await response.json();
  
      // 根据验证结果返回B2C要求的响应格式
      if (verifyResult.success && verifyResult.score >= 0.5) { // 可调整分数阈值
        context.res = {
          status: 200,
          body: {
            "version": "1.0.0",
            "action": "Continue",
            "status": "Success"
          }
        };
      } else {
        context.res = {
          status: 400,
          body: {
            "version": "1.0.0",
            "action": "ShowBlockPage",
            "status": "Error",
            "userMessage": "验证码验证失败，请重试。"
          }
        };
      }
    } catch (error) {
      context.res = {
        status: 500,
        body: {
          "version": "1.0.0",
          "action": "ShowBlockPage",
          "status": "Error",
          "userMessage": "验证服务异常，请稍后再试。"
        }
      };
    }
  };
  

4. 关联API连接器到登录用户流 #

• 回到目标登录用户流的编辑页面，找到「API连接器」配置项
• 在「登录前」步骤中添加刚才创建的API连接器，保存用户流

注意事项 #

• 确保自定义页面的域名已添加到Azure AD B2C的「CORS允许列表」中
• reCAPTCHA分数阈值（示例中为0.5）可根据业务风险调整，分数越高验证越严格
• API连接器需配置正确的身份验证（如API密钥），避免被恶意调用

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