如何在Angular 17独立组件中使用ReCaptcha

针对你遇到的找不到ReCaptchaV3提供者、无法配置站点密钥的问题，按照以下步骤操作即可解决：

1. 在app.config.ts中配置ReCaptcha V3提供者 #

ng-recaptcha v13+专门提供了支持Angular独立组件的provideRecaptchaV3函数，无需使用NgModule。打开app.config.ts，添加如下配置：

import { ApplicationConfig } from '@angular/core';
import { provideRecaptchaV3 } from 'ng-recaptcha';
import { environment } from './environments/environment.development';

export const appConfig: ApplicationConfig = {
  providers: [
    // 保留你已有的其他提供者
    provideRecaptchaV3({
      siteKey: environment.recaptchaSiteKey // 从环境变量读取站点密钥
    })
  ]
};

2. 配置环境变量中的站点密钥 #

在environment.development.ts（生产环境对应environment.ts）中添加你的ReCaptcha V3站点密钥：

export const environment = {
  production: false,
  recaptchaSiteKey: '你的ReCaptcha V3站点密钥'
};

3. 组件中正常使用ReCaptchaV3Service #

你当前的组件代码无需大幅修改，只要确保ReCaptchaV3Service被正确注入即可。如果担心首次提交时脚本加载延迟，可以在ngOnInit中预加载脚本：

ngOnInit(): void {
  this.usernameForm = new FormGroup({
    username: new FormControl(null, [
      Validators.required,
      Validators.minLength(3),
    ]),
  });
  // 预加载ReCaptcha脚本（可选优化）
  this.recaptchaV3Service.load();
}

排查要点 #

• 确认使用的ng-recaptcha版本是^13.0.0及以上，该版本才支持独立组件API。
• 检查站点密钥是否为ReCaptcha V3类型，V2密钥无法用于V3服务。
• 确保provideRecaptchaV3已正确导入并添加到app.config的providers数组中。

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