Angular 18兼容的Google reCAPTCHA v3包推荐及适配方案咨询

一、官方支持 Angular 18 的 reCAPTCHA v3 选项 #

• 直接使用 Google 官方 JS API：这是最稳定、无第三方依赖的方案，完全兼容所有 Angular 版本。reCAPTCHA v3 是隐式验证模式，无需 UI 组件，仅需调用 API 获取验证令牌即可。
• 等待 ng-recaptcha 适配更新：目前 ng-recaptcha 13.x 版本仅支持到 Angular 17，可关注其仓库的 Release 或 Issue 动态，官方大概率会推出适配 Angular 18 的 14.x 版本。

二、优化 ng-recaptcha 适配 Angular 18 的方案 #

如果你坚持使用 ng-recaptcha，当前的 overrides 临时方案可以优化得更稳妥：

1. 锁定依赖版本：在 package.json 中明确指定 ng-recaptcha 版本为 13.2.1（而非 ^13.2.1），避免意外更新到未适配的版本：

"ng-recaptcha": "13.2.1"

2. 全面测试核心功能：验证令牌获取、后端验证流程是否正常运行，重点检查是否因 Angular 18 的 API 变更（如信号、独立组件特性）导致兼容性问题。
3. 监控官方更新：一旦 ng-recaptcha 发布支持 Angular 18 的版本，立即升级并移除 overrides 配置，恢复正常依赖管理。

三、直接使用 Google 官方 API 的实现步骤 #

1. 引入官方脚本 #

在项目的 index.html 中添加 reCAPTCHA 脚本：

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

2. 封装服务 #

创建一个 Angular 服务来封装 reCAPTCHA API 调用：

import { Injectable } from '@angular/core';

declare var grecaptcha: any;

@Injectable({ providedIn: 'root' })
export class RecaptchaService {
  private readonly siteKey = '你的SiteKey';

  async getVerificationToken(action: string): Promise<string> {
    await grecaptcha.ready();
    return grecaptcha.execute(this.siteKey, { action });
  }
}

3. 在组件中使用 #

在需要验证的组件中调用服务获取令牌，再发送到后端验证：

import { Component } from '@angular/core';
import { RecaptchaService } from './recaptcha.service';

@Component({
  selector: 'app-submit-form',
  template: `<button (click)="handleSubmit()">提交表单</button>`
})
export class SubmitFormComponent {
  constructor(private recaptchaService: RecaptchaService) {}

  async handleSubmit() {
    try {
      const token = await this.recaptchaService.getVerificationToken('form_submit');
      // 将token发送到后端完成验证逻辑
      console.log('验证令牌:', token);
    } catch (error) {
      console.error('reCAPTCHA 获取失败:', error);
    }
  }
}

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