web-dev-qa-db-ja.com

Googleの新しいInvisible reCaptchaを実装する

ログインフォームにキャプチャを配置するPHP Webサイトを構築しています。 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. Indiv reCAPTCHAを有効にするには、divにパラメーターを入れるのではなく、htmlボタンに直接追加します。

    3a。 data-callback =””。これはチェックボックスcaptchaと同じように機能しますが、非表示の場合は必須です。

    3b。データバッジ：これにより、reCAPTCHAバッジ（つまり、ロゴと「reCAPTCHAで保護された」テキスト）の位置を変更できます。有効なオプションは「bottomright」（デフォルト）、「bottomleft」または「inline」で、ボタンのすぐ上にバッジを配置します。バッジをインラインにすると、バッジのCSSを直接​​制御できます。

  4. ユーザーの応答を確認しても変更はありません。

私が抱えている問題は、HTMLの実装にあります（したがって、ステップ3で助けが必要です。私が通常のreCaptchaで作業している残りの部分は、指示に従って同じものにする必要があります。データコールバックとデータバッジが何であり、どのように機能するかはわかりません。私のフォームがどのようにセットアップされているかで目に見えないreCaptchaを実装する方法のコード例は素晴らしいでしょう！

javascripthtmlrecaptcha
28
L.Johnson

目に見えないreCAPTCHA

Googleの新しいInvisible reCAPTCHAの実装は、サイトにv2を追加する方法と非常に似ています。通常のように独自のコンテナとして追加するか、フォーム送信ボタンに追加する新しい方法を使用できます。このガイドが正しい道に沿って役立つことを願っています。

スタンドアロン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つの可能な値があります：bottomleft、bottomright、inline。インラインでは、送信ボタンのすぐ上に表示され、スタイルをどのように設定するかを制御できます。

あなたの質問に

<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>

これがあなたと将来のコーダーに役立つことを願っています。テクノロジーの進化に合わせて、これを最新の状態に保ちます。

33
Allen

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

以下に簡単な例を示します。

<!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/

お役に立てれば！

20
Mch

クライアント+サーバー側を実装する方法を次に示します（php） Invisible reCaptcha機能：

  • クライアント側
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>reCaptcha</title>

    <!--api link-->
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <!--call back function-->
    <script>
        function onSubmit(token) {
            document.getElementById('reCaptchaForm').submit();
        }
    </script>
</head>
<body>
<div class="container">
    <form id="reCaptchaForm" action="signup.php" method="POST">
        <input type="text" placeholder="type anything">
        <!--Invisible reCaptcha configuration-->
        <button class="g-recaptcha" data-sitekey="<your site key>" data-callback='onSubmit'>Submit</button>
        <br/>
    </form>
</div>
</body>
</html>
  • サーバー側の検証：signup.phpファイルを作成します
<?php
//only run when form is submitted
if(isset($_POST['g-recaptcha-response'])) {
    $secretKey = '<your secret key>';
    $response = $_POST['g-recaptcha-response'];     
    $remoteIp = $_SERVER['REMOTE_ADDR'];


    $reCaptchaValidationUrl = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$response&remoteip=$remoteIp");
    $result = json_decode($reCaptchaValidationUrl, TRUE);

    //get response along side with all results
    print_r($result);

    if($result['success'] == 1) {
        //True - What happens when user is verified
        $userMessage = '<div>Success: you\'ve made it :)</div>';
    } else {
        //False - What happens when user is not verified
        $userMessage = '<div>Fail: please try again :(</div>';
    }
}
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>reCAPTCHA Response</title>
    </head>
    <body>
        <?php
            if(!empty($userMessage)) {
                echo $userMessage;
            }
        ?>
    </body>
</html>
18
Jonca33

次に、workingの例を示します。

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ReCAPTCHA Example</title>
</head>
<body>
<div class="container">

  <form method="post" action="/contact/" id="contact-form">
    <h3 class="title-divider">
      <span>Contact Us</span>
    </h3>
    <input type="text" name="name">
    <div class="captcha"><!-- BEGIN: ReCAPTCHA implementation example. -->
      <div id="recaptcha-demo" class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA_SITE_KEY" data-callback="onSuccess" data-bind="form-submit"></div>
      <script>
          var onSuccess = function (response) {
              var errorDivs = document.getElementsByClassName("recaptcha-error");
              if (errorDivs.length) {
                  errorDivs[0].className = "";
              }
              var errorMsgs = document.getElementsByClassName("recaptcha-error-message");
              if (errorMsgs.length) {
                  errorMsgs[0].parentNode.removeChild(errorMsgs[0]);
              }
              document.getElementById("contact-form").submit();
          };</script><!-- END: ReCAPTCHA implementation example. -->
    </div>
    <button id="form-submit" type="submit">Submit</button>
  </form>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</div>
</body>
</html>

YOUR_RECAPTCHA_SITE_KEYをGoogle ReCAPTCHAサイトキーに変更することを忘れないでください。

次のステップは、実際にデータを検証することです。これは、エンドポイントにPOSTリクエストを行うことで行われます https://www.google.com/recaptcha/api/siteverify に、秘密鍵とreCAPTCHAからのデータが含まれます、g-recaptcha-responseで識別されます。 CMS /フレームワークに応じて、さまざまな方法で実行できます。

画面の右下隅にreCaptchaバッジがあることに気付いたかもしれません。これは、検証チェックボックスが削除されたため、フォームがreCaptchaによって保護されていることをユーザーに知らせるために存在します。ただし、このバッジをインラインに設定し、CSSで変更することにより、このバッジを非表示にすることができます。

<style>
    .grecaptcha-badge {display: none;}
</style>

GoogleはreCaptcha機能を有効にするためにユーザー情報を収集するため、利用規約でユーザーにその使用を警告する必要があることに注意してください。バッジを非表示にする場合は、どこかに情報段落を追加できます代わりにページで。

0
dtar