如何执行recaptcha2 invisible？角度 6

Question

我一直在努力在我的网站上添加一个不可见的验证码，并寻找最好的方法，我按照这里提供的说明进行操作：https://github.com/Enngage/ngx-captcha

我注意到“reCaptcha v2”部分中的说明没有解释如何通过验证码触发验证，所以我被阻止了，因为我发现验证码运行良好，但是，因为验证码是我登录中的附加组件页面，一旦用户点击“提交”按钮，它就会触发。

我遇到的问题是，似乎缺少一个变量，让我在验证码中执行回调函数，如下所述：https://developers.google.com/recaptcha/docs/invisible#programmatic_execute 我看到有一个带有“execute()”函数的变量 (grecaptcha)。所以它考虑了验证码验证。

目前，我的代码遵循以下结构： HTML: `

    <ngx-recaptcha2
    #captchaRef
    [siteKey]=captchaCode
    size="invisible"
    (resolved)="submitDataRC($event)"
    >
    </ngx-recaptcha2>

    <div>
         Form goes here...
         <button
         (click)="submitRecaptcha()"
         >Submit</button>
    </div>

`

TS `

@ViewChild('captchaRef') captchaRef: any;
captchaCode = 'abc'
        
      submitRecaptcha() {
        console.log('start submit method')   // I notice the execution prints this message
        console.log(this.captchaRef)
        this.navDisable = true;
        // this.captchaRef.execute() // This method is commented because it appears an error: execute is not a function of captchaRef
    }


        submitDataRC(captchaResponse: string) {  // I hope the captcha call this method with the token inside here
                code of the method here...
        }

`

我希望我解释得当。 提前致谢

Answer 1

如果你还在寻找这个，我在

execute()

属性中找到了

grecaptcha

方法。这是一个私有财产（所以使用它并不是很干净）但我没有找到任何其他方式来以编程方式执行它。

所以在你的情况下是

this.captchaRef.grecaptcha.execute()

.

另一种方法是使用 ReCaptchaV3，它在打字稿中看起来更容易使用。

希望有帮助。