Invisible reCAPTCHA without execute

Sorry if this is a support issue and shouldn’t go here. I have a question about invisible reCAPTCHA.

In your docs, you state

You will also need to invoke the “execute()” method manually. This can be done by either obtaining a reference to RecaptchaComponent via @ViewChild(), or by using inline template reference:

However, my understanding of invisible reCAPTCHA is that calling the execute method manually is a special case, necessary only if you want to explicitly call for the challenge to appear. It is not necessary in the normal course of events. The normal flow is that when the button associated with the reCAPTCHA is pressed, Google decides whether or it seems to be a robot, puts up the challenge if it decides it is, then calls the callback specified as the data-callback attribute if it believes the user is a human or the challenge is passed.

This is how I want things to work. I don’t want to explicitly call for the challenge to appear, and I don’t think I need or want to call execute. I tried that, and as I suspected, the challenge came up every time, which is definitely not what I want. . I just want resolve to be called when Google thinks things are OK. Does the component support that, and if so please help me understand how, since I am too dense to figure it out myself.

[jpinxten]

@kostadin-dimitrov Here is some working code:

@ViewChild('captchaRef') captchaRef: RecaptchaComponent;

executeReCaptcha() {
    this.captchaRef.execute();
}

getReCaptchaResponse(response: string) {
    this.someForm.patchValue({
        'g-recaptcha-response': response
    });
    // Submit your form
}

<form [formGroup]="someForm" (ngSubmit)="executeReCaptcha()">
    <re-captcha 
    #captchaRef siteKey="{{recaptchaPublicKey}}"
    (resolved)="getReCaptchaResponse($event)" size="invisible">
    </re-captcha>

    <button type="submit">Submit</button>
</form>

[Manipulos]

I had the same problem with “Cannot contact reCAPTCHA. Check your connection and try again.”

but i fixed it by resetting on login failed

onSubmit(){

if (this.loginForm.valid) {
this.errorMessage= "";

 this.authServiceSubscription = this.authService.loginSponsorUser(this.loginForm.value).subscribe(loginResult=>{
   console.log("Sponsor login success");
   this.authService.changeSponsorUserStatusToAuthenticated();
   this.router.navigate(['/sponsors/dashboard']);

 },(err)=>{
    console.log("There was an error login in",err.error);
    this.errorMessage = "Hubo un error en el login: "+err.error;
    this.captchaRef.reset();
 });
}