Intégration de re-captcha dans angular2/angular4

ContexteIntégration de re-captcha dans angular2/angular4

Je suis en train d'intégrer re-captcha dans une seule application page faite avec angulaire 4. Je mets le SiteKey avec grecaptcha.render(elt, {sitekey : 'XXX-my-public-key'});.

Problème

Quand j'appelle grecaptcha.render(), je ne peux pas être sûr que le recaptcha js est chargé. Par conséquent, parfois, je reçois cette erreur:

LoginComponent_Host.html:1 ERROR ReferenceError: grecaptcha is not defined

Question

Comment puis-je être sûr que re-captcha est complètement chargée avant d'appeler grecaptcha.render()?

Voici les pièces pertinentes du code:

index.html

<html> 
    <head> 
    <script src='https://www.google.com/recaptcha/api.js'></script> 
    </head> 
</html>

login.component.html

<div #captchaDiv class="m-t"></div>

login.component.ts

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.less'] 
}) 
export class LoginComponent implements OnInit, AfterViewInit { 

    @ViewChild('captchaDiv') 
    captchaDiv: ElementRef; 

    [...] 

    ngOnInit(): void { 
    grecaptcha.render(this.captchaDiv.nativeElement, {sitekey : 'XXX-my-public-key'}); 
    }

Source

2017-08-13 Arnaud Denoyelle

-1

essayer d'utiliser ce RecaptchaModule, https://www.npmjs.com/package/ng-recaptcha

@Component({ 
    selector: 'my-app', 
    template: `<re-captcha (resolved)="resolved($event)" siteKey="YOUR_SITE_KEY"></re-captcha>`, 
}) export class MyApp { 
    resolved(captchaResponse: string) { 

    } 
}

Source

2018-01-31 19:01:07

Intégration de re-captcha dans angular2/angular4

Répondre

Questions connexes