要在Angular应用程序中使用Google reCAPTCHA,可以按照以下步骤进行操作:
npm install ng-recaptcha
app.module.ts
文件中导入和配置reCAPTCHA模块:import { RecaptchaModule, RECAPTCHA_SETTINGS, RecaptchaSettings } from 'ng-recaptcha';
@NgModule({
imports: [
RecaptchaModule
],
providers: [
{
provide: RECAPTCHA_SETTINGS,
useValue: { siteKey: 'YOUR_SITE_KEY' } as RecaptchaSettings,
},
],
})
export class AppModule { }
确保将YOUR_SITE_KEY
替换为您在Google reCAPTCHA控制台中生成的站点密钥。
resolved
事件将在用户完成reCAPTCHA验证后触发。
onCaptchaResolved
方法:onCaptchaResolved(token: string) {
// 在这里处理reCAPTCHA令牌
console.log(token);
}
在这个方法中,您可以处理收到的reCAPTCHA令牌。
这是一个完整的示例组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-recaptcha',
template: `
`,
})
export class RecaptchaComponent {
onCaptchaResolved(token: string) {
// 在这里处理reCAPTCHA令牌
console.log(token);
}
}
这样,您就可以在Angular应用程序中使用reCAPTCHA并获取令牌结果了。