Ionic 5 Google Recaptcha 不显示 - ng-recaptcha

Question

我想创建一个带有注册和 Google Recaptcha 的网络应用程序。我的目标是 this example:

我想用普通版使用，但是Google Recaptcha 不会显示在HTML。我做错了什么？ 这是我的代码，有什么遗漏请写信给我。

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { RecaptchaModule, RECAPTCHA_SETTINGS, RecaptchaSettings } from 'ng-recaptcha';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, RecaptchaModule],
  providers: [
    StatusBar,
    SplashScreen,
    {
      provide: RECAPTCHA_SETTINGS,
  useValue: {
    siteKey: '6Lee7qgZAAAAAC6i7J0fkf0_7ShBQKSXx8MafWHZ',
  } as RecaptchaSettings,
},
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
],
bootstrap: [AppComponent]
})
export class AppModule {}

home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
    <re-captcha (resolved)="resolveCaptcha($event)"></re-captcha>
</ion-content>

home.page.ts

import { Component } from '@angular/core';
import { RecaptchaModule } from 'ng-recaptcha'; // I don't if I need this import in this file 

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() {}

  resolveCaptcha(event)
  {
    console.log(event)
  }

}

感谢您的帮助。

Answer 1

我找到了问题的答案：

*.html

<re-captcha (resolved)="resolved($event)"></re-captcha>

*.page.ts

  resolved(response: string) {
    console.log(`Resolved captcha with response: ${response}`);    if(response != null)
    if(response != null && response != undefined) {
      this.captchaPassed = !this.captchaPassed;
    }
  }

*.module.ts

import { RecaptchaComponent, RECAPTCHA_SETTINGS, RecaptchaSettings, RecaptchaModule } from 'ng-recaptcha' // muss  hinzugefühgt werden /** nur wenn es auf einer seite sein soll */

@NgModule({
  imports: [
    CommonModule,
    ...
    RecaptchaModule,
  ],
  declarations: [RegisterPage],

  providers: [
    {
      provide: RECAPTCHA_SETTINGS,
      useValue: {
        siteKey: '6Lee7qgZAAAAAC6i7J0fkf0_7ShBQKSXx8MafWHZ',
      } as RecaptchaSettings,
    },
  ],
})