Question

<re-captcha
      class="recaptcha" (resolved)="resolved($event)" siteKey={{captchaSiteKey}}>
</re-captcha>
<button>submit</buttton>

当用户单击recaptcha并完成时，resolved方法将运行，并从后端检查共振是否正确。由于还必须验证后端的响应是否完全安全，因此后端响应大约需要1到1.5秒。当用户立即单击表单中的“提交”按钮时，该按钮不起作用，因为this.captchaResponse为假，并且只有在服务器响应在1到1.5秒后才变为true，因此有时用户必须单击“提交”在表单中单击两次。我不认为我们可以自定义Google Recaptcha复选标记动画并对其添加1到2秒的时间，因为该复选标记在后端响应到达之前就完成了，它仅与前端响应相关，因此给用户一种幻觉，即Recaptcha验证已完成，但在实际上，只有在后端响应到来后1到1.5秒才能完成。

resolved(captchaResponse: string) {
        console.log(captchaResponse)
        if(captchaResponse !== null) {
          this.data.verifyCaptcha(captchaResponse).subscribe((res: any)=>{
            if(res.success) {
              this.captchaResponse = true;
            }
          });
        } else {
          this.captchaResponse = false;
        }

        onSubmit() {
            this.loading = true;
            this.submitted = true;
            if (this.loginForm.invalid || !this.captchaResponse) {
                this.loading = false;
                return;
            }
            let frmData = this.loginForm.value;
        }
.....

Answer 1

您可以禁用表单的提交，直到this.captchaResponse为true为止，而不是在解析验证码和服务返回适当值之前允许提交。像

<button type="submit" [disabled]="!captchaResponse">Send</button>

如何应对Google Recaptcha后端验证响应延迟

1 个答案: