web-dev-qa-db-ja.com

<form>のない「ロボットではない」reCAPTCHAですが、代わりにAJAX

"私はロボットじゃない" Recpatcha を使用する従来の方法は、クライアント側で<form>を使用するようです。

<form action="post.php" method="POST">
    <div class="g-recaptcha" data-sitekey="6Lc_0f4SAAAAAF9ZA_d7Dxi9qRbPMMNW-tLSvhe6"></div>
    <button type="submit">Sign in</button>
</form>

<script src='https://www.google.com/recaptcha/api.js'></script>

次に、いくつかのg-recaptcha-responseがサーバーに送信されます。

ただし、私のコードでは<form>を使用せず、代わりにAJAX呼び出しを使用します：

$('#btn-post').click(function(e) { 
  $.ajax({
    type: "POST",
    url: "post.php",
    data: {
      action: 'post',
      text: $("#text").val(),
      ajaxMode: "true"
    },
    success: function(data) { },
    error: function(data) { } 
  }); } });

このソリューションでg-recaptcha-responseの答えを得る方法は？

javascriptajaxcaptcharecaptchaforms
12
Basj

フォームを使用し、フォームの送信を中断します。通常どおりフォームを設定します。

<form action="post.php" method="POST" id="my-form">
    <div class="g-recaptcha" data-sitekey="6Lc_0f4SAAAAAF9ZA_d7Dxi9qRbPMMNW-tLSvhe6"></div>
    <input type="text" id="text">
    <button type="submit">Sign in</button>
</form>

<script src='https://www.google.com/recaptcha/api.js'></script>

次に、jQueryを使用してフォームの送信を中断し、 シリアル化 して、Ajaxを介してデータを渡すことができます。

$('#my-form').submit(function(e) {
    e.preventDefault();
    $this = $(this);
    $.ajax({
        type: "POST",
        url: "post.php",
        data: $this.serialize()
    }).done(function(data) {
    }).fail(function( jqXHR, textStatus ) {
        alert( "Request failed: " + textStatus );
    });
});

successとerrorの代わりに.doneと.failを使用したことに気付くと思いますが、これは 推奨される方法です。応答の処理 。

7
Styphon

フォームと送信メカニズムをそれぞれ使用せずに実装しました。したがって、純粋なAJAXソリューション。

HTMLコード：

<div id="recaptcha-service" class="g-recaptcha"
 data-callback="recaptchaCallback"
 data-sitekey=""></div>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=en"></script>

JavaScriptコード：

window.recaptchaCallback = undefined;

jQuery(document).ready(function($) {

  window.recaptchaCallback = function recaptchaCallback(response) {
    $.ajax({
      method: "POST",
      url: "http://example.com/service.ajax.php",
      data: { 'g-recaptcha-response': response },
    })
      .done(function(msg) {
        console.log(msg);
      })
      .fail(function(jqXHR, textStatus) {
        console.log(textStatus);
      });
  }

});

ポイントはコールバック（この場合はrecaptchaCallback）を使用することです。

より完全な例は https://Gist.github.com/martinburger/f9f37770c655c25d5f7b179278815084 にあります。この例では、サーバー側でのGoogleのPHP実装（ https://github.com/google/recaptcha ））を使用しています。

9
Martin

回答を完全にするために、可能なリンクだけを使用したいとします...

<form id="g-recap">
  <div class="g-recaptcha" data-sitekey="{{ gcaptcha key }}" ></div>
</form>
<a href="/recaptchaured/path">Verify</a>

$('a').on('click',function(e) {
   e.preventDefault();
   document.location =  $(this).attr('href') + '?' + $('#g-recap').serialize()
});
2
zak