web-dev-qa-db-ja.com

新しいGoogle reCaptcha:「私はロボットではない」というテキストを変更する方法

最新のGoogle reCaptchaツールをヨガのWebサイトにインストールしました。これで、ユーザーはチェックボックスの横に表示されるテキスト「私はロボットではありません」について混乱しています。

私たちのユーザーのほとんどは、この文脈で「ロボット」という言葉が何を意味するのか知らず、フォームが壊れていると考えています。また、ヨガのウェブサイトで「ロボット」という言葉を見るのは奇妙であるため、フォームを使用しても安全性が低いと感じています。

「私はロボットではない」というテキストを、ユーザーが理解できる別のテキストに変更するにはどうすればよいですか?

ドキュメントはこの点については静かに見えます...

また、reRecaptchaの内容は、リモートJSとCSSを介して完全にロックダウンされているようです。次のjavascriptを使用してGoogleのテキストを変更しようとして失敗しましたrecaptcha-anchor-label

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

この古い質問に戻ると、reCAPTCHAウィジェットの非表示バージョンがあり、独自にUIを設計できます。チャレンジの実行を作成したボタンにバインドしたり、プログラムでバックグラウンドで呼び出したりできます。

クイックリファレンスとしてここにドキュメントページを引用しています。これについて詳しくは、こちらをご覧ください here

必要な属性は、クラス名「g-recaptcha」、data-sitekey属性のサイトキー、およびdata-callback属性のcaptchaの完了を処理する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>
1
Nearoo

Google Recaptchaの「ロボットではない」を別の言語に変更するには、 言語コード を使用します。 hlスクリプトパラメーター。

これは、たとえばスペイン語を強制する方法です。

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

ソース: Google ReCaptcha Docs

26
sr9yar

サードパーティiframeに属しているため、その特定のテキストを変更することはできませんが、OPが求めているものを正確に満たす回避策があります。

新しいdivを親に追加できますdivは、Google Captchaのサイズが常に固定されていることを考慮して、ラベルテキストで制御、整列、およびオーバーラップできます。したがって、 ドキュメントによる 、コードにメインキャプチャdivclass="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"});

それは動作します:)

enter image description here

現在、彼らのツールを使用することは不可能です。ロボットを停止する別の方法を使用する場合:reCaptchaをアンインストールし、制御可能なものを使用します。おそらく、ヨガに関する簡単なランダムな質問と回答です。

4
clairestreb

Same Origin Policy は、別のOrigin(Googleサーバー)を持つiframe(captcha)にアクセスしようとするスクリプト(サイト上にある)を禁止するため、これは不可能です。

両方のサーバーを所有している場合、以下のコードを実行しても問題ありません。

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

ここではクライアント側のキャプチャを使用しましたが、これは私のコードです。ポータルで正常に機能しています。

 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';
0
Nagnath Mungade