如何在单页应用程序 (SPA) 中实现 ReCaptcha

Posted 2023-03-09

【中文标题】如何在单页应用程序 (SPA) 中实现 ReCaptcha

【英文标题】：How do I implement ReCaptcha in a Single Page Application (SPA)

【发布时间】：2014-07-10 23:04:54

【问题描述】：

我有一个单页应用程序 (SPA)，我想将 ReCaptcha 添加到其中。 此应用程序使用 IIS 作为平面 html、Css 和 javascript 托管，此 SPA 反过来与单独的 REST 服务器（使用 CORS）对话以获取所有动态内容。

REST 服务器是使用 ASP.net WebAPI 编写的。问题是;我看到的所有 ReCaptcha 示例都使用 ASP.net MVC（或其他语言）将 html 注入网页，我无法在这个庄园使用 ASP.net 修改网页。希望其他人也有同样的问题。

我真的在寻找一些 2 部分，首先是属于客户端的 HTML，其次是 REST 服务器上的控制器，以便与 google 进行验证。即使这是我可以转换的另一种语言，这也会很有用！

【问题讨论】：

当然，经过数小时的搜索，在我提交 10 分钟后，我发现了一些可行的方法。签出codeproject.com/Articles/116250/Custom-reCaptcha-Validation。如果可行，将发布。

【参考方案1】：

看起来我想要的只是在没有插件的情况下使用 reCaptcha (https://developers.google.com/recaptcha/docs/display)

【参考方案2】：

我在我的 Angular 项目中使用了 ngx-captcha。 以下是我在重新验证复选框被选中之前保持提交按钮处于禁用状态的方法。

   //code
 <ngx-recaptcha2 (success)="handleSuccess($event)"   #captchaElem [siteKey]="siteKey" formControlName="recaptcha">
                </ngx-recaptcha2>

一旦验证码被填充，它就会发出一个成功事件，所以在方法中使用它来创建一个变量 true/false，基于该变量你可以启用/禁用提交按钮

【讨论】：

欢迎来到 Stack Overflow！您在上面提供的答案并没有真正解决最初提出的问题。如果您想为相关问题提供信息，例如“如何禁用我的提交按钮，直到以角度按下 recaptcha”，请随时单独提出问题并添加您自己的答案。