最新の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>
この古い質問に戻ると、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>
Google Recaptchaの「ロボットではない」を別の言語に変更するには、 言語コード を使用します。 hlスクリプトパラメーター。
これは、たとえばスペイン語を強制する方法です。
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=es">
サードパーティiframe
に属しているため、その特定のテキストを変更することはできませんが、OPが求めているものを正確に満たす回避策があります。
新しいdiv
を親に追加できますdiv
は、Google Captchaのサイズが常に固定されていることを考慮して、ラベルテキストで制御、整列、およびオーバーラップできます。したがって、 ドキュメントによる 、コードにメインキャプチャ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をアンインストールし、制御可能なものを使用します。おそらく、ヨガに関する簡単なランダムな質問と回答です。
Same Origin Policy は、別のOrigin(Googleサーバー)を持つiframe(captcha)にアクセスしようとするスクリプト(サイト上にある)を禁止するため、これは不可能です。
両方のサーバーを所有している場合、以下のコードを実行しても問題ありません。
$( ".g-recaptcha > div > div > iframe" ).contents().find( "#recaptcha-anchor-label" ).text('Custom Text');
ここではクライアント側のキャプチャを使用しましたが、これは私のコードです。ポータルで正常に機能しています。
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';