ng-recaptcha：Google reCAPTCHA的Angular组件教程

---

项目介绍

ng-recaptcha 是一个专为 Angular 应用设计的 Google reCAPTCHA 组件库，它支持 reCAPTCHA v2 和 v3 的集成。这个组件简化了在 Angular 项目中添加 reCAPTCHA 功能的复杂度，无论是为了基本的网站验证还是更复杂的用户行为分析。

• 特性：简单配置、高度可配置性、支持 v2 图形验证码和 v3 隐形验证。
• 兼容性：支持多个 Angular 版本，确保与最新技术栈同步。
• 灵活性：可通过全局设置或个体组件属性来控制其行为。

---

项目快速启动

安装 ng-recaptcha

首先，你需要在你的 Angular 项目中安装 ng-recaptcha 包：

npm install ng-recaptcha --save

或者，如果你使用 Yarn：

yarn add ng-recaptcha

基本使用（reCAPTCHA v2）

1. 在你的主模块（通常是 app.module.ts）导入 RecaptchaModule：

   import { RecaptchaModule } from 'ng-recaptcha';
   
   @NgModule({
     imports: [
       BrowserModule,
       RecaptchaModule
     ],
     ...
   })
   

2. 然后，在你想使用 reCAPTCHA 的组件模板中添加 <re-captcha> 标签，并传入你的 siteKey：

   <!-- 在组件的HTML文件中 -->
   <re-captcha (resolved)="onCaptchaResolved($event)" siteKey="YOUR_SITE_KEY"></re-captcha>
   

   在组件类中处理事件：

   // 组件的TypeScript文件
   export class YourComponent {
     onCaptchaResolved(response: string) {
       console.log("Captcha 解决，响应:", response);
     }
   }
   

使用 reCAPTCHA v3

对于 v3 API 的集成，你需要导入 RecaptchaV3Module 并提供你的 v3 siteKey：

import { RECAPTCHA_V3_SITE_KEY, RecaptchaV3Module } from 'ng-recaptcha';
...
@NgModule({
  ...
  providers: [
    [provide: RECAPTCHA_V3_SITE_KEY, useValue: 'YOUR_V3_SITE_KEY']
  ],
  imports: [
    ..., 
    RecaptchaV3Module
  ],
  ...
})

并在服务中使用 ReCaptchaV3Service 来执行动作并获取令牌：

export class AnotherComponent {
  constructor(private recaptchaV3Service: ReCaptchaV3Service) {}

  performAction() {
    this.recaptchaV3Service.execute('your-action')
      .subscribe(token => console.log('v3 Token:', token));
  }
}

---

应用案例和最佳实践

• 表单集成：通过引入 RecaptchaFormsModule，可以将 reCAPTCHA 整合到 Angular 表单中，实现双向数据绑定。

  import { RecaptchaFormsModule } from 'ng-recaptcha';
  

• 全球化配置：可以在应用级别设置默认的 reCAPTCHA 属性，减少重复代码。

  providers: [
    [provide: RECAPTCHA_SETTINGS, useValue: { siteKey: 'YOUR_GLOBAL_SITE_KEY' }]
  ],
  

• 错误处理：合理利用 errored 事件，提供友好的用户体验，提醒用户重新尝试验证。

---

典型生态项目

虽然 ng-recaptcha 自身是一个独立的项目，但它在构建安全的登录系统、评论区、注册表单等场景下是很多 Angular 应用的核心组成部分。由于专注于 reCAPTCHA 的整合，它并未直接与其他特定的生态项目关联。然而，任何依赖于用户身份验证和防止自动化工具滥用的 Angular 项目，都可以视作其生态的一部分，比如结合 Angular Material 构建的现代UI认证流程。

---

以上就是 ng-recaptcha 的基础使用和一些关键点，它使得在 Angular 中添加 reCAPTCHA 验证变得简单高效。记得替换 'YOUR_SITE_KEY' 和 'YOUR_V3_SITE_KEY' 为你自己的密钥。