Recently, I have been trying to implement an invisible captcha into my website. In order to achieve this, I turned to the guidance provided by Enngage on their ngx-captcha GitHub page: https://github.com/Enngage/ngx-captcha
While following the instructions under the "reCaptcha v2" section, I realized that there was no clear explanation on how to trigger the validation of the captcha. This posed a problem for me because although the captcha appeared to be functioning correctly, it needed to activate when the user clicked the 'submit' button on the login page where it was located.
The issue that I encountered seemed to stem from a missing variable that would allow me to execute the callback function within the captcha, similar to what is detailed in Google's documentation here: https://developers.google.com/recaptcha/docs/invisible#programmatic_execute It appeared that there was a variable (grecaptcha) with an 'execute()' function that facilitated captcha validation.
Currently, the structure of my code looks like this:
<ngx-recaptcha2
#captchaRef
[siteKey]=captchaCode
size="invisible"
(resolved)="submitDataRC($event)"
>
</ngx-recaptcha2>
<div>
Form content goes here...
<button
(click)="submitRecaptcha()"
>Submit</button>
</div>Within the TypeScript file:
@ViewChild('captchaRef') captchaRef: any;
captchaCode = 'abc'
submitRecaptcha() {
console.log('start submit method') // The execution of this message indicates the start of the submission process
console.log(this.captchaRef)
this.navDisable = true;
// this.captchaRef.execute() // An error occurs when attempting to use this method: execute is not a function of captchaRef
}
submitDataRC(captchaResponse: string) { // It is expected that this method will be called by the captcha with the token embedded
Code implementation goes here...
}I hope that I have articulated my issue clearly. Thank you in advance for any assistance.