php - 導入 - recaptcha 無料




Googleから新しいInvisible reCaptchaを実装する (3)

私はログインフォームにcaptchaを置くPHPウェブサイトを構築しています。 私はGoogleの新しいInvisible reCaptchaを使いましたが、実装に問題があります(HTML部分、PHPが動作しています)。

私が「通常の」reCaptchaのコードは次のとおりです(GoogleのreCaptchaの指示に従って、これが動作します):

<form action=test.php method="POST">
   <input type="text" name="email" placeholder="Email">
   <input type="password" name="password" placeholder="Password">

   <!-- <Google reCaptcha> -->
   <div class="g-recaptcha" data-sitekey="<sitekey>"></div>
   <!-- </Google reCaptcha> -->

   <input type="submit" name="login" class="loginmodal-submit" value="Login">
</form>

申し込み時に確認メールに指示が送信されました(確認のために約24時間かかりました)。 それは次のように述べています:

見えないreCAPTCHAインテグレーション

  1. reCAPTCHA v2でサイトを統合していない場合は、デベロッパーガイドの実装の詳細に従ってください。

  2. Invisible reCAPTCHAのホワイトリストに登録されているサイトのキーを確認してください。

  3. Invisible reCAPTCHAを有効にするには、パラメータをdivに入れるのではなく、HTMLボタンに直接追加できます。

    3a。 data-callback = "" これはチェックボックスのcaptchaのように機能しますが、不可視の場合には必要です。

    3b。 data-badge:これにより、reCAPTCHAバッジ(すなわち、ロゴと 'reCAPTCHAによって保護された'テキスト)の位置を変更できます。 有効なオプションは 'bottomright'(デフォルト)、 'bottomleft'または 'inline'で、バッジをボタンの真上に置きます。 バッジをインラインで作成すると、バッジのCSSを直接​​制御できます。

  4. ユーザーの応答が変更されていないことを確認します。

私が持っている問題は、HTMLの実装です(したがって、私はステップ3の助けが必要です。1,2,4が私のために働いています)。 残りの部分は、通常のreCaptchaで作業しており、指示に従って、同じことをする必要があります。 私は、データコールバックとデータバッジが何で、どのように動作するのか理解していません。 私のフォームがどのように設定されているのか見えないreCaptchaを実装する方法のコード例は素晴らしいでしょう!


見えないreCAPTCHA

Googleの新しいInvisible reCAPTCHAの実装は、v2をGoogleのサイトに追加する方法と非常によく似ています。 通常のように独自のコンテナとして追加することも、フォーム送信ボタンに追加する新しい方法として追加することもできます。 私はこのガイドが正しい道に沿ってあなたを助けてくれることを願っています。

スタンドアロンCAPTCHAコンテナ

recaptchaを実装するには、いくつかのことが必要です。

- Sitekey
- Class
- Callback
- Bind

これがあなたの最終目標になります。

<div class="g-recaptcha" data-sitekey="<sitekey>" data-bind="recaptcha-submit" data-callback="submitForm"></div>

スタンドアローン方式を使用する場合は、データバインドを送信ボタンのIDに設定する必要があります。 あなたがこのセットを持っていないなら、あなたのキャプチャは見えないでしょう。

フォームを送信するには、コールバックも使用する必要があります。 目に見えないキャプチャは、送信ボタンからすべてのイベントをキャンセルするので、実際に送信を渡すにはコールバックが必要です。

<script>
function submitForm() {
    var form = document.getElementById("ContactForm");
    if (validate_form(form)) {
        form.submit();
    } else {
        grecaptcha.reset();
    }
}
</script>

コールバックの例では、カスタムフォームの検証もあります。 検証が失敗したときにreCAPTCHAをリセットすることは非常に重要です。そうしないと、CAPTCHAが期限切れになるまでフォームを再送信できなくなります。

見えないCAPTCHAボタン

これの多くは、上記のスタンドアロンCAPTCHAと同じですが、コンテナを持つ代わりに、すべてが送信ボタンに配置されます。

これがあなたの目標です。

<button class="g-recaptcha" data-sitekey="<sitekey>" data-callback="submitForm" data-badge="inline" type="submit">Submit</button>

ここに何か新しい、データバッジがあります。 これはreCAPTCHAが機能するために必要な入力を含むDOMに挿入されるdivです。 ボトムレフト、ボトムライト、インラインの3つのパラメータがあります。 インラインでは、送信ボタンの上に直接表示され、どのようにスタイルを設定するかを制御できます。

あなたの質問に

<form action="test.php" method="POST" id="theForm">
    <script>
    function submitForm() {
        document.getElementById("theForm").submit();
    }
    </script>
    <input type="text" name="email" placeholder="Email">
    <input type="password" name="password" placeholder="Password">

    <div class="g-recaptcha" data-sitekey="<sitekey>" data-bind="recaptcha-submit" data-callback="submitForm"></div>

    <input type="submit" name="login" class="loginmodal-submit" id="recaptcha-submit" value="Login">
</form>

または

<form action="test.php" method="POST" id="theForm">
    <script>
    function submitForm() {
        document.getElementById("theForm").submit();
    }
    </script>
    <input type="text" name="email" placeholder="Email">
    <input type="password" name="password" placeholder="Password">

    <button class="loginmodal-submit g-recaptcha" data-sitekey="<sitekey>" data-callback="submitForm" data-badge="inline" type="submit" value="Login">Submit</button>
</form>

私はこれがあなたと将来のコーダーに役立つことを願っています。 技術が進化するにつれ、これを最新に保ちます。



同じページ上の複数のフォームでも機能する、完全にカスタマイズ可能な汎用ソリューションを探しているなら、 render = explicitおよびonload = aFunctionCallbackパラメータを使用してreCaptchaウィジェットを明示的にレンダリングします。

ここに簡単な例があります:

<!DOCTYPE html>
<html>
<body>

<form action="" method="post">
    <input type="text" name="first-name-1"> <br />
    <input type="text" name="last-name-1"> <br />

    <div class="recaptcha-holder"></div>

    <input type="submit" value="Submit">
</form>

<br /><br />

<form action="" method="post">
    <input type="text" name="first-name-2"> <br />
    <input type="text" name="last-name-2"> <br />

    <div class="recaptcha-holder"></div>

    <input type="submit" value="Submit">
</form>

<script type="text/javascript">

  var renderGoogleInvisibleRecaptcha = function() {
    for (var i = 0; i < document.forms.length; ++i) {
      var form = document.forms[i];
      var holder = form.querySelector('.recaptcha-holder');
      if (null === holder){
        continue;
      }

      (function(frm){

        var holderId = grecaptcha.render(holder,{
          'sitekey': 'CHANGE_ME_WITH_YOUR_SITE_KEY',
          'size': 'invisible',
          'badge' : 'bottomright', // possible values: bottomright, bottomleft, inline
          'callback' : function (recaptchaToken) {
            HTMLFormElement.prototype.submit.call(frm);
          }
        });

        frm.onsubmit = function (evt){
          evt.preventDefault();
          grecaptcha.execute(holderId);
        };

      })(form);
    }
  };


</script>

<script src="https://www.google.com/recaptcha/api.js?onload=renderGoogleInvisibleRecaptcha&render=explicit" async defer></script>

</body>
</html>

ご覧のとおり、空のdiv要素をフォームに追加しています。 どのフォームをreCaptchaで保護するべきかを特定するために、この要素にクラス名を追加します。 私の例では、私は 'recaptcha-holder'クラス名を使用しています。

コールバック関数はすべての既存のフォームを繰り返し処理し、注入された要素が 'recaptcha-holder'クラス名で見つかると、reCaptchaウィジェットをレンダリングします。

私は、このソリューションをWordPress用のInvisible reCaptchaプラグインで使用しています。 誰かがこの仕組みを見たいと思えば、プラグインはWordPressのディレクトリからダウンロードできます:

https://wordpress.org/plugins/invisible-recaptcha/

お役に立てれば!





recaptcha