web-dev-qa-db-ja.com

非表示のreCaptchaコールバックで変数を渡す

Googleの新しい非表示のreCaptchaを使用するCMSアプリケーションでWebサイトのフォームを作成しています。

しかし、私はreCaptchaのコールバックを使用する方法に固執していますか？

キャプチャを使用する前は、コードは非常に単純でした。

[〜＃〜] html [〜＃〜]

<form>
    Form input fields here...
    <button id="a23k4l234lj2l-submit-button"></button>
</form>

jQuery

$('#a23k4l234lj2l-submit-button').click(function (e) {
    e.preventDefault();
    var that = $(this);
    if(Abayo.validate(that)) {
        Abayo.submit(that);
    }
})

Abayoライブラリには、特定のフォームを検証し、フォームデータを処理するスクリプトにデータを送信する関数があります。

ここで、reCaptchaをフォームに追加します。 documentation は次のように述べています。

1 data-size = 'invisible'でdivを作成します。

<div class="g-recaptcha"
      data-sitekey="your_site_key"
      data-callback="onSubmit"
      data-size="invisible">
</div>

2javascriptメソッドからgrecaptcha.executeを呼び出します。

grecaptcha.execute();

これは機能しますが、キャプチャのコールバック関数は、ユーザーの応答を確認するための応答コードのみを提供します。

ユーザーの応答g-recaptcha-responseが、コールバック関数の入力になります。

応答は、サーバーに要求を送信できるかどうかのみを示します。

必要なのは、送信ボタン、DOM要素、またはボタンと一致するフォームからデータを取得するためのボタンの任意の種類のIDの場所です。

次のコードでは、フォームからデータを取得してサーバーに送信できませんか？

$('#a23k4l234lj2l-submit-button').click(function (e) {
    e.preventDefault();
    grecaptcha.execute();
})

var onSubmit = function(response) {
    // var that cannot be defined, I don't have a DOM element anywhere?
    var that = ????
    if(Abayo.validate(that)) {
        Abayo.submit(that);
    }
}

質問

ReCaptchaコールバックでDOM要素を取得する方法はありますか？

javascriptjqueryhtmlrecaptcha
9
PIDZB

プログラムでreCAPTCHAを作成できます。

まず、キャプチャdivを作成します。

<div id="myCaptcha" />

次に、キャプチャをレンダリングし、トークンを使用してデータを渡します。

var that = $(this);
grecaptcha.render('myCaptcha', { 
  sitekey: 'xxx', 
  callback: function(token) {
    Abayo.submit(token, that) 
  }
});

詳細はこちら https://developers.google.com/recaptcha/docs/invisible#js_api

9
Jaanus

onSubmit関数を次のように動的に設定してみましたか（divタグをdata-callback="onSubmit"と同じままにします）：

$('#a23k4l234lj2l-submit-button').click(function (e) {
    e.preventDefault();
    var that = $(this);
    if(Abayo.validate(that)) {
      window.onSubmit = function(){ // defining onSubmit function dynamically here
        Abayo.submit(that); // you can access `that` here
      };
      grecaptcha.execute();
    }
})

注：このコードを確認するのに便利なサイトキーがありません。したがって、これは実際のコードサンプルではなくアプローチと見なしてください。

1
Vivek Athalye