基于Angular的Ionic iOS移动端应用集成reCAPTCHA V2方法问询

一、能否集成reCAPTCHA V2？ #

完全可以。虽然reCAPTCHA最初为网页场景设计，但Ionic基于WebView运行，支持加载标准Web组件，因此可以通过嵌入Web版reCAPTCHA V2实现验证功能。

二、具体实施步骤 #

1. 注册reCAPTCHA V2密钥 #

前往Google reCAPTCHA控制台，选择reCAPTCHA V2（推荐选"I'm not a robot"复选框类型），填写应用相关信息：

• 开发环境：域名填localhost
• 生产环境（Capacitor打包）：添加Android包名、iOS Bundle ID，同时可补充网页域名（如果有Web版本）
  提交后获取站点密钥（Site Key，前端用）和密钥（Secret Key，后端验证用）。

2. 引入reCAPTCHA资源 #

有两种方式可选：

方式一：直接引入官方脚本

在项目根目录的index.html中添加：

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

方式二：使用Angular封装库

安装ng-recaptcha：

npm install ng-recaptcha

在app.module.ts中导入并配置：

import { RecaptchaModule } from 'ng-recaptcha';

@NgModule({
  imports: [
    // 其他模块
    RecaptchaModule.forRoot({ siteKey: '你的站点密钥' })
  ]
})
export class AppModule { }

3. 在Ionic页面中添加验证组件 #

若用脚本引入：

在目标页面的模板中添加：

<div class="g-recaptcha" data-sitekey="你的站点密钥"></div>

若用ng-recaptcha：

模板中添加组件并绑定回调：

<re-captcha siteKey="你的站点密钥" (resolved)="onCaptchaSuccess($event)"></re-captcha>

组件类中处理验证结果：

onCaptchaSuccess(token: string) {
  // 将token传给后端做有效性验证
  console.log('验证成功，token:', token);
}

4. 适配移动端显示 #

Ionic WebView可能需要调整样式避免显示异常：

.g-recaptcha {
  transform: scale(0.9);
  transform-origin: 0 0;
}

同时在capacitor.config.ts中允许访问Google域名：

export default {
  server: {
    allowNavigation: ['*.google.com', '*.gstatic.com']
  }
};

5. 后端验证token有效性 #

前端拿到token后，后端需调用Google验证接口：

POST https://www.google.com/recaptcha/api/siteverify

请求参数：

• secret: 你的Secret Key
• response: 前端返回的token
• remoteip（可选）: 用户IP地址
  只有接口返回success: true时，才继续后续业务逻辑。

三、reCAPTCHA Enterprise 密钥与Team Id配置说明 #

创建reCAPTCHA Enterprise密钥 #

1. 进入Google Cloud控制台，先启用reCAPTCHA Enterprise API
2. 点击"创建密钥"，填写密钥名称，选择reCAPTCHA类型（支持V2/V3），添加应用标识（Android包名、iOS Bundle ID或Web域名）
3. 创建完成后即可获取站点密钥和密钥，用法和普通reCAPTCHA一致

Team Id相关说明 #

Team Id是Google Cloud中组织/团队的标识，个人项目无需额外配置；如果是团队协作项目，确保你有权限访问对应项目即可。若需查看Team Id，可在Google Cloud控制台的IAM与管理 > 设置中查看项目的组织ID（等效于Team Id）。

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