Ionic Angular - Android平台集成reCaptcha遇技术问题求助

我之前在Ionic项目里集成reCaptcha的时候，完完全全踩过和你一样的坑！给你分享几个亲测有效的解决思路：

1. 把Ionic WebView从file://改成HTTP协议（最推荐） #

你遇到的核心问题是：Web版reCaptcha不认file://协议，而Android原生密钥是给原生SDK用的，不是给WebView里的Web脚本用的。所以先把WebView的协议换成带域名的HTTP，就能用Web密钥正常验证了：

• 在项目的config.xml里添加这些配置：

<!-- 设置WebView使用http协议，域名localhost -->
<preference name="Scheme" value="http" />
<preference name="Hostname" value="localhost" />
<!-- 调试阶段允许不安全的文件模式，生产环境记得去掉！ -->
<preference name="AndroidInsecureFileModeEnabled" value="true" />

• 去Google reCAPTCHA后台创建Web密钥，把以下域名加入白名单：
  • http://localhost
  • http://localhost:8100（Ionic默认调试端口）
  • 你生产环境的域名（如果有Web端的话）

这样WebView里的reCaptcha脚本就会识别到合法域名，不会再报invalid domain错误了。

2. 使用原生reCaptcha插件（适合纯原生验证场景） #

如果你的需求是完全依赖原生APP的验证（不用Web版脚本），可以用Capacitor或Cordova的原生reCaptcha插件，比如：

• Capacitor的@capacitor-firebase/authentication插件，支持原生reCaptcha验证
• Cordova的cordova-plugin-recaptcha插件

这类插件会调用Android/iOS的原生reCaptcha SDK，此时你创建的Android/iOS密钥就能正常工作（只需要白名单包名和签名），完全绕开Web域名的限制。

3. 关于Angular封装工具的注意事项 #

如果你用的是Angular的reCaptcha封装组件（比如ng-recaptcha），本质上还是调用Web版的reCaptcha脚本，所以必须先完成上面第一个步骤——把WebView改成HTTP协议并配置好Web密钥的白名单，组件才能正常工作。

简单总结下：Web版reCaptcha看域名，原生版看包名/签名，别搞混了！我当时就是一开始误用了Android密钥配Web脚本，折腾了好久才明白这个区别。

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