新 Google reCaptcha:如何更改文本 "I'm not a robot"

New Google reCaptcha: How to change text "I'm not a robot"

我已经在我们的瑜伽网站上安装了最新的 Google reCaptcha 工具。现在用户对复选框旁边出现的文本 "I'm not a robot" 感到困惑。

我们的大多数用户不知道 "robot" 一词在这种情况下的含义,他们认为表格已损坏。他们也觉得使用我们的表格不太安全,因为在瑜伽网站上看到 "robot" 这个词很奇怪。

如何将文本 "I'm not a robot" 更改为用户可以理解的其他内容?

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

此外,reRecaptcha 的内容似乎已通过远程 JS 和 CSS 完全锁定。我尝试使用以下 javascript 更改 Googles recaptcha-anchor-label:

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

目前无法使用他们的工具。如果您想使用其他方法停止机器人:卸载 reCaptcha,并使用您可以控制的东西,也许是与瑜伽有关的简单随机问答。

可以将 Google Recaptcha 中的 "I'm not a robot" 更改为不同的语言,方法是对 使用 language codes hl 脚本参数。

这是强制使用西班牙语的方式,例如:

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

来源:Google ReCaptcha Docs

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

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

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

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

考虑到 Google 验证码始终具有固定大小,您可以在父 div 上附加新的 div 您可以控制、对齐和重叠标签文本。因此,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"});

有效:)

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

我在此处引用文档页面以供快速参考,您可以阅读更多相关内容 here

The necessary attributes are a class name 'g-recaptcha', your site key in the data-sitekey attribute, and the name of a JavaScript callback to handle completion of the captcha in the data-callback attribute.

负责人:

   <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>

我使用了客户端验证码,我的 code.its 在我的门户网站上运行良好。

 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, "" ) );

这是我画的canvas图片

 /*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';