Implementieren Sie das neue Invisible reCaptcha von Google

Question 1

Ich baue eine PHP-Website, auf der ich ein Captcha in das Anmeldeformular einfügen möchte. Ich ging mit Googles neuem Unsichtbares reCaptcha aber ich habe Probleme mit der Implementierung (HTML-Teil, PHP funktioniert).

Der Code, den ich jetzt für das “normale” reCaptcha habe, ist der folgende (wie gemäß der Google reCaptcha-Anweisung und dies funktioniert):

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

Als ich mich anmeldete, wurden einige Anweisungen in der Bestätigungs-E-Mail gesendet (es dauerte ungefähr 24 Stunden, bis ich die Bestätigung erhielt). Das sagt folgendes:

Unsichtbare reCAPTCHA-Integration

Wenn Sie Ihre Website nicht mit reCAPTCHA v2 integriert haben, folgen Sie bitte unserem Entwicklerhandbuch für Details zur Implementierung.

Bitte stellen Sie sicher, dass Ihr Websiteschlüssel für Invisible reCAPTCHA auf die weiße Liste gesetzt wurde.

Um das unsichtbare reCAPTCHA zu aktivieren, können Sie die Parameter anstatt in ein div-Element direkt zu einer HTML-Schaltfläche hinzufügen.

3a. data-callback=””. Dies funktioniert genauso wie das Checkbox-Captcha, ist aber für unsichtbar erforderlich.

3b. Daten-Badge: Damit können Sie das reCAPTCHA-Badge (d. h. Logo und „Geschützt durch reCAPTCHA“-Text) neu positionieren. Gültige Optionen wie „bottomright“ (Standard), „bottomleft“ oder „inline“, wodurch das Badge direkt über der Schaltfläche platziert wird. Wenn Sie das Abzeichen inline erstellen, können Sie das CSS des Abzeichens direkt steuern.

Die Überprüfung der Antwort des Benutzers hat keine Änderungen.

Das Problem, das ich habe, ist die HTML-Implementierung (daher brauche ich Hilfe bei Schritt 3. 1,2 und 4 funktionieren bei mir). Den Rest habe ich mit normalem reCaptcha gearbeitet und laut Anleitung sollte es das Gleiche sein. Ich verstehe nicht, was der Daten-Callback und das Daten-Badge ist und wie es funktioniert. Ein Codebeispiel, wie man unsichtbares reCaptcha mit der Einrichtung meines Formulars implementiert, wäre großartig!

Question 2

Unsichtbares reCAPTCHA

Die Implementierung von Googles neuem Invisible reCAPTCHA ähnelt sehr dem Hinzufügen von v2 zu unserer Website. Sie können es wie gewohnt als eigenen Container hinzufügen oder mit der neuen Methode, es der Schaltfläche zum Senden des Formulars hinzuzufügen. Ich hoffe, dieser Leitfaden hilft Ihnen auf dem richtigen Weg.

Eigenständiger CAPTCHA-Container

Die Implementierung von recaptcha erfordert ein paar Dinge:

- Sitekey
- Class
- Callback
- Bind

Dies wird Ihr letztes Ziel sein.

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

Wenn Sie die eigenständige Methode verwenden, müssen Sie data-bind auf die ID Ihrer Submit-Schaltfläche setzen. Wenn Sie dieses Set nicht haben, ist Ihr Captcha nicht unsichtbar.

Auch zum Absenden des Formulars muss ein Rückruf verwendet werden. Ein unsichtbares Captcha bricht alle Ereignisse der Submit-Schaltfläche ab, sodass Sie den Callback benötigen, um die Submission tatsächlich weiterzuleiten.

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

Beachten Sie im Beispielrückruf, dass es auch eine benutzerdefinierte Formularvalidierung gibt. Es ist sehr wichtig, dass Sie das reCAPTCHA zurücksetzen, wenn die Validierung fehlschlägt, da Sie sonst das Formular nicht erneut senden können, bis das CAPTCHA abläuft.

Unsichtbarer CAPTCHA-Button

Vieles davon ist das gleiche wie beim eigenständigen CAPTCHA oben, aber anstatt einen Container zu haben, wird alles auf der Schaltfläche „Senden“ platziert.

Dies wird Ihr Ziel sein.

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

Hier gibt es etwas Neues, Daten-Badge. Dies ist ein div, das in das DOM eingefügt wird, das die Eingaben enthält, die für die Funktion von reCAPTCHA erforderlich sind. Es hat drei mögliche Werte: bottomleft, bottomright, inline. Inline zeigt es direkt über der Senden-Schaltfläche an und ermöglicht es Ihnen, zu steuern, wie es gestaltet werden soll.

Zu deiner Frage

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

Oder

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

Ich hoffe, das hilft Ihnen und zukünftigen Programmierern. Ich werde dies auf dem neuesten Stand halten, wenn sich die Technologie weiterentwickelt.

Question 3

So implementieren Sie eine Client- und Serverseite (php) Unsichtbare reCaptcha-Funktionalität:

Client-Seite

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

Serverseitige Validierung: Erstellen Sie a signup.php Datei

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

Question 4

Wenn Sie nach einer vollständig anpassbaren allgemeinen Lösung suchen, die sogar mit mehreren Formularen auf derselben Seite funktioniert, werde ich das reCaptcha-Widget explizit mithilfe von rendern render=explizit und onload=aFunctionCallback Parameter.

Hier ist ein einfaches Beispiel:

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

Wie Sie sehen, füge ich einem Formular ein leeres div-Element hinzu. Um zu identifizieren, welche Formulare mit reCaptcha geschützt werden sollen, füge ich diesem Element einen Klassennamen hinzu. In unserem Beispiel verwende ich den Klassennamen „recaptcha-holder“.

Die Callback-Funktion durchläuft alle vorhandenen Formulare und wenn sie unser eingefügtes Element mit dem Klassennamen „recaptcha-holder“ findet, rendert sie das reCaptcha-Widget.

Ich habe diese Lösung für mein Invisible reCaptcha für WordPress-Plugin verwendet. Wenn jemand sehen möchte, wie das funktioniert, kann das Plugin im WordPress-Verzeichnis heruntergeladen werden:

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

Hoffe das hilft!

Question 5

Hier ist ein Arbeiten Beispiel:

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

Wechseln nicht vergessen YOUR_RECAPTCHA_SITE_KEY zu Ihrem Google ReCAPTCHA-Site-Schlüssel.

Der nächste Schritt besteht darin, die Daten tatsächlich zu validieren. Dies erfolgt durch eine POST-Anforderung an den Endpunkt https://www.google.com/recaptcha/api/siteverifydas Ihren geheimen Schlüssel und die Daten aus dem reCAPTCHA enthält, das durch identifiziert wird g-recaptcha-Antwort. Abhängig von Ihrem CMS/Framework gibt es viele verschiedene Möglichkeiten, dies zu tun.

Möglicherweise ist Ihnen das reCaptcha-Badge in der unteren rechten Ecke des Bildschirms aufgefallen. Dies dient dazu, Benutzer wissen zu lassen, dass ein Formular durch reCaptcha geschützt ist, nachdem das Überprüfungskästchen entfernt wurde. Es ist jedoch möglich, dieses Abzeichen auszublenden, indem Sie es als Inline konfigurieren und dann mit CSS ändern.

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

Bitte beachten Sie, dass Google Benutzerinformationen sammelt, um die reCaptcha-Funktion zu aktivieren, und dass Sie gemäß den Nutzungsbedingungen von Google aufgefordert werden, die Benutzer auf die Verwendung aufmerksam zu machen. Wenn Sie das Abzeichen ausblenden, können Sie stattdessen irgendwo auf der Seite einen informativen Absatz hinzufügen.

Question 6

Melden Sie sich mit Ihrem Google-Konto an
Besuchen Sie den Google-Recaptcha-Link.

Folgen Sie dann dem Link zur Code-Integration, folgen Sie dem Code für die client- und serverseitige Validierung. https://developers.google.com/recaptcha/docs/invisible
Erhöhen oder verringern Sie die Sicherheitsstufe einmal, nachdem Sie das Recaptcha erstellt haben, gehen Sie hier zu den erweiterten Einstellungen, https://www.google.com/recaptcha/admin#list