集成在angular2/angular4重新驗證碼

背景集成在angular2/angular4重新驗證碼

我試圖整合與角4做了一個單頁的應用程序我設置了sitekey與grecaptcha.render(elt, {sitekey : 'XXX-my-public-key'});再次驗證碼。

問題

當我打電話grecaptcha.render()，我不能肯定的ReCaptcha JS被加載。因此，有時候，我得到這個錯誤：

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

問題

我如何可以肯定的是重新驗證碼呼籲grecaptcha.render()完全加載之後？

這裏是代碼中的相關部分：

的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'}); 
    }

來源

2017-08-13 Arnaud Denoyelle

-1

嘗試使用這個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) { 

    } 
}

來源

2018-01-31 19:01:07

集成在angular2/angular4重新驗證碼

回答

相關問題