JavaScriptを使用してReCaptchaをリロードする方法は?


177

エラーが発生したとき(つまり、ユーザー名が既に使用されているとき)にRecaptchaイメージを更新したいので、AJAXのサインアップフォームがあります。

JavaScriptを使用して再読み込みするReCaptchaと互換性のあるコードを探しています。


1
気にしないでください。ユーザー名が使用されている場合、CAPTCHAを変更するのはなぜですか?
10

18
@SLaks:おそらく彼が最初にキャプチャをチェックし、次にユーザーをチェックするため-そしてキャプチャが使用されると、それはもはや有効ではありません。悪意のあるユーザーの周囲でこれを逆に行うと、サーバーに簡単に欠陥が生じ、総当たり攻撃を行わずにブルートフォースを使用してすべてのユーザーのリストを取得できます。
Tomasz Nurkiewicz

1
@TomaszNurkiewicz更新:悪意のあるユーザーが検証のために同じ再キャプチャを2回以上送信することはできません。つまり、ブルートフォースはここでは不可能です。captchaを更新する理由は、ユーザーがもう一度入力できるようにするためです。
トニーセピア2017

私は熟練した攻撃者がタイミング攻撃を悪用して、ボット検証の場所に応じてどのデータが間違っているかを見つけることができると思います。私は最初のチェックとして私のものを保持し、失敗した場合はすぐに拒否することも好みます。また、サーバーへの負荷を減らし、拒否されるときにDBクエリを実行しないようにします
Steve Byrne

回答:



370

reCaptcha v2の場合、以下を使用します。

grecaptcha.reset();

reCaptcha v1を使用している場合(おそらく使用しない場合):

Recaptcha.reload();

これは、にすでに読み込まれているRecaptchaがある場合に行われますwindow

(下記の@SebiHのコメントに基づいて更新。)


20
新しいreCAPTCHAを使用しているユーザー向け:行がgrecaptcha.reset();documenation)に変更されました
SebiH

私はgrecaptcha.reset();自分の反応アプリにこれを使用しており、完全に機能します
yussan

4
grecaptchaがロードされているかどうかわからない場合は、次を使用してくださいif (window.grecaptcha) grecaptcha.reset();
fred727

これによりキャプチャが再読み込みされますが、キャプチャ応答のフィールド値は削除されていないようで、フォームは有効なままです。
ダミアングリーン

58

バージョン1を使用している場合

Recaptcha.reload();

バージョン2を使用している場合

grecaptcha.reset();

1
承認された回答をコピーし、3年後に再投稿しました。緊急事態。
PRホワイトヘッド

@PRWhitehead編集履歴をご覧ください。ところで、反対票をありがとう。
Dasun

編集していません。APIへの変更を反映するために承認済み回答が更新されてから3か月後に最初に追加しました-最初の回答の関連性と最初に追加されてからの年数に影響を与えました。これは、受け入れられた回答の方が役立つため、反対票を投じました。
PRホワイトヘッド

2
同じ問題に直面したため、この回答を追加しました。受け入れられた答えは当時の正解を反映していますが、それは十分に明確ではありませんでした。少なくとも私にとっては、それが明確な分離を備えた新しい回答として追加することを決めた理由です(受け入れられた回答はバージョンとの違いに気付かなかった)。
Dasun

8
grecaptcha.reset(opt_widget_id)

reCAPTCHAウィジェットをリセットします。オプションのウィジェットIDを渡すことができます。渡さない場合、関数は作成された最初のウィジェットをリセットします。(Googleのウェブページから)


ページの最初のキャプチャのみをリセットします
Maxwell sc

@ Maxwells.cあなたも投稿を読みましたか?オプションで、ウィジェットIDを渡してn番目のウィジェットを削除できます。合格しなかった場合、最初のものがリセットされます。
Kutalia 2017

1
ウィジェットIDとは正確には何ですか?recaptcha <div>のHTML IDを渡してみましたが、「無効なRecaptchaクライアントID」というエラーが発生しました。render()メソッドが必要なIDを返すと思うので、ウィジェットを明示的にレンダリングする必要があると思います。
ピート

6

これを試して

<script type="text/javascript" src="//www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
          function showRecaptcha() {
            Recaptcha.create("YOURPUBLICKEY", 'captchadiv', {
              theme: 'red',
              callback: Recaptcha.focus_response_field
            });
          }
 </script>

<div id="captchadiv"></div>

showRecaptchaを呼び出すと、captchadivに新しいrecaptchaインスタンスが入力されます。


コードを変更してshowRecaptcha onloadを呼び出すことができますか?これは役に立ちますか?
ティム・

6

または、更新ボタンのクリックをシミュレートすることもできます

// If recaptcha object exists, refresh it
    if (typeof Recaptcha != "undefined") {
      jQuery('#recaptcha_reload').click();
    }

1
どういうわけか、Recaptchaそしてgrecaptcha私のページではどちらも未定義です。これは、わずかな変更で、私の仕事:if( $("#recaptcha_reload").length > 0 ){ ....
ネイトビットのInt

私はそれを使用して、要素の数を数えることなく配列の反復がいつ終了するかを知りました。
m3nda 2015年



2

reCAPTCHA APIのバージョン1.0を使用している場合は、バージョン2.0にアップグレードしてください(バージョン1.0はサポートされなくなりました)

grecaptcha.reset();キャプチャをリセットするために使用します。


0

新しいrecaptcha 2.0を使用している場合は、次のコードを使用してください。

ScriptManager.RegisterStartupScript(this, this.GetType(), "CaptchaReload", "$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});", true);

単純なJavaScript

<script>$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});</script>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.