Flutter Web使用Firebase Auth手机号验证时如何彻底移除reCAPTCHA横幅

问题根因 #

Firebase Auth 手机号验证流程默认会在页面右下角自动注入grecaptcha-badge容器用于reCAPTCHA校验，默认配置下该容器不会在验证完成后自动销毁，因此会出现校验完成后横幅残留的问题。

推荐解决方案（稳定合规） #

通过自定义reCAPTCHA容器实现完全可控的生命周期管理，步骤如下：

1. 在web项目的index.html中提前添加隐藏的自定义reCAPTCHA容器

<body>
  <!-- 其他原有内容 -->
  <div id="custom-recaptcha-container" style="display: none;"></div>
</body>

2. 调用手机号登录接口时，传入自定义配置的RecaptchaVerifier实例，指定绑定到你提前创建的容器

// 初始化自定义verifier
final RecaptchaVerifier verifier = RecaptchaVerifier(
  container: 'custom-recaptcha-container',
  // 可选配置：设为invisible可实现无感知验证，无需用户手动点击
  size: RecaptchaVerifierSize.invisible,
  theme: RecaptchaVerifierTheme.light,
);

// 传入verifier调用登录方法
final ConfirmationResult confirmationResult = await _auth.signInWithPhoneNumber(
  phoneNumber,
  verifier,
);

3. 验证流程完成（无论成功/失败）后，手动销毁verifier实例即可自动移除关联的reCAPTCHA元素

// 完成短信验证后执行
await confirmationResult.confirm(smsCode);
// 销毁reCAPTCHA实例
verifier.clear();

临时应急方案 #

如果不想修改现有验证逻辑，可直接通过DOM操作移除默认生成的横幅元素：

import 'package:universal_html/html.dart' as html;

// 验证流程结束后执行
final badgeElement = html.document.querySelector('.grecaptcha-badge');
if (badgeElement != null) {
  badgeElement.remove();
}

注意：如果使用invisible模式的reCAPTCHA，需保证页面其他位置显式标注了reCAPTCHA服务的使用说明，避免违反谷歌服务条款。

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