新的 Google reCaptcha：如何更改文本“我不是机器人”

Question

我在我们的瑜伽网站上安装了最新的 Google reCaptcha 工具。现在用户对出现在复选框旁边的文本“我不是机器人”感到困惑。

我们的大多数用户不知道“机器人”一词在此上下文中的含义，他们认为表单已损坏。他们也觉得使用我们的表格不太安全，因为在瑜伽网站上看到“机器人”这个词很奇怪。

如何将文本“我不是机器人”更改为用户可以理解的其他内容？

文档在这一点上似乎保持沉默...

此外，reCaptcha 的内容似乎已通过远程 JS 和 CSS 完全锁定。我尝试使用以下 javascript 更改 Googles recaptcha-anchor-label 的文本，但未成功：

<script type="text/javascript">
    $(document).ready(function () {
        $("#recaptcha-anchor-label").text("Something different.");
    });
</script>

Answer 1

目前无法使用他们的工具。如果您想使用不同的方法来阻止机器人：卸载 reCaptcha，并使用您可以控制的东西，也许是一个与瑜伽有关的简单随机问题和答案。

Answer 2

可以通过在 hl 脚本参数中使用 language codes 将 Google Recaptcha 中的“我不是机器人”更改为不同的语言。 p>

这就是你强制西班牙语的方式，例如：

<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=es">

来源：Google ReCaptcha Docs

Answer 3

这是不可能的，因为Same Origin Policy 禁止任何脚本（在您的网站上）尝试访问具有另一个来源（Google 服务器）的 iframe（验证码）。

如果我们拥有两台服务器，运行下面的代码应该没有问题:)

$( ".g-recaptcha > div > div > iframe" ).contents().find( "#recaptcha-anchor-label" ).text('Custom Text');

Answer 4

您无法更改该特定文本，因为它属于第三方 iframe，尽管有一种解决方法可以完全满足 OP 的要求。

您可以在父 div 上附加一个新的 div，您可以在标签文本上控制、对齐和重叠它，因为 Google Captcha 始终具有固定大小。因此，according to documentation，考虑到您的代码中可能有主验证码div 和class="g-recaptcha"，您只需这样做：

$('.g-recaptcha').append('<div id="new_label"></div>');  
$('#new_label').text("My own text");
$('#new_label').css({"position":"absolute", "width":"160px", "top":"27px", "left":"53px", "background-color":"#f9f9f9"});

它有效:)

Answer 5

回到这个老问题 - 现在有一个不可见版本的 reCAPTCHA 小部件，可让您自行设计 UI。您可以将挑战的执行绑定到您创建的按钮或在后台以编程方式调用它。

我在此处引用文档页面以供快速参考，您可以阅读有关此here 的更多信息。

必要的属性是类名“g-recaptcha”、data-sitekey 属性中的站点密钥，以及数据回调属性中用于处理验证码完成的 JavaScript 回调名称。

头：

   <script src="https://www.google.com/recaptcha/api.js" async defer></script>
   <script>
     function onSubmit(token) {
       document.getElementById("demo-form").submit();
     }
   </script>

---

主体：

  <form id='demo-form' action="?" method="POST">
    <button class="g-recaptcha" data-sitekey="your_site_key" data-callck='onSubmit'>Submit</button>
    <br/>
  </form>

Answer 6

我在这里使用了客户端验证码，这是我的代码。它在我的门户网站上运行良好。

 this.canvas = document.getElementById( 'myCanvas' ) as HTMLCanvasElement;
    var context = this.canvas.getContext( '2d' );
    context.clearRect( 0, 0, this.canvas.width, this.canvas.height );
    var alpha = [];
    alpha = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H','J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
        'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
         '2', '3', '4', '5', '6', '7', '8', '9'];
    var i;
    for ( i = 0; i < 6; i++ ) {
        var a = alpha[Math.floor( Math.random() * alpha.length )];
        var b = alpha[Math.floor( Math.random() * alpha.length )];
        var c = alpha[Math.floor( Math.random() * alpha.length )];
        var d = alpha[Math.floor( Math.random() * alpha.length )];
        var e = alpha[Math.floor( Math.random() * alpha.length )];
        var f = alpha[Math.floor( Math.random() * alpha.length )];
        var g = alpha[Math.floor( Math.random() * alpha.length )];
    }
    this.captchaCode = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' ' + f + ' ' + g;
    var ctext = this.captchaCode;
    this.loginForm.controls['captcha'].setValue( this.captchaCode.replace( /\s/g, "" ) );

这是我正在绘制的画布图像

 /*Text to image captcha */
    var imageObj = new Image();
    imageObj.onload = function() {
        context.drawImage( imageObj, 0, 0 );
        context.font = "24px arial";
        context.fillText( ctext, 84, 32 );
    };
    imageObj.src = 'assets/modules/dummy-assets/common/img/captcha2.jpg';