loader gif

reCAPTCHA

Hvordan legge inn ReCaptcha på nettside som bruker PHP.

Se demo her: https://gudjon.kattahub.no/dennefilen.php

 

Steg 1. Få generert reCAPTCHA API key

Du må registrere ditt domene og få en API-nøkkel fra google for å bruke reCAPTCHA.
Dette gjør du her: https://www.google.com/recaptcha/admin

I dette eksemplet, så skal jeg lage for subdomenet gudjon.kattahub.no og ikke for hele kattahub.no
Jeg legger derfor inn gudjon.kattahub.no som domene.
Jeg velger v2 og «I’m not a robot»

Når siden er registrert, så kan du hente ut nøklene som du så bruker på nettsiden og i koden.

Jeg har alt i samme fil, som jeg kaller for dennefilen.php

Steg 2. Inkluder javascript-api fra google.

Du må inkludere javaskritet som snakker med Google-api i header. Se linje 3

<html>
    <head>
    <script src='https://www.google.com/recaptcha/api.js' async defer ></script>       
    </head>
<body>

Steg 3. Legg inn SITE KEY i formen du skal bruke.

Legg merke til at linjene 2 til 4 er samme div. Det er kun satt opp på flere linjer for bedre oversikt.
Det er denne som viser boksen «I’m not a robot.

<form action="dennefilen.php" method="POST">     
<div class="g-recaptcha"
     data-sitekey="6LejBoUdAAhjkcfdshfsdSpe"
     data-callback="callback"></div>
  <br />
  <button id="submit-button" type="submit">Submit</button>
</form>

Steg 4. PHP-koden.

if(!empty($_POST['g-recaptcha-response'])) // Start - sjekker om det var haket av for g-recaptcha
{
      $secret = '6LejBoUdAAAAAvcxzvxxxxczsmo7'; // SECRET KEY fra google
      $verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);
      $responseData = json_decode($verifyResponse);
      if($responseData->success) {
        // Hvis alt er OK, så kan vi sende kontaktskjema, eller jobbe mot databasen.
        // Jeg velger her bare å legge melding i variabel, som jeg så skriver ut med echo på netsiden
          $message = "ALT OK og vi kan gå videre";
          
      } else {
        $message = "Kunne ikke verifisere - var site-key og sectret key riktig?";
        }
     echo $message;
 } // slutt

Deaktivere Sumit-knappen inntil det er haket av for «I’m not a robot»


Det kan være hendig å deaktivere submit-knappen frem til det er haket av for «I’m not a robot»
Dette gjør vi med callback-funksjon i javascript.
Det første vi må gjøre, er å legge til disabled i taggen for knappen.
Vi må også ha id på knappen – hos meg ser den slik ut: id=»submit-button» – denne bruker jeg så i selve javascriptet.

<button id="submit-button" type="submit" disabled> Submit </button>

Deretter legger vi inn følgende kode helt nederst i filen, før vi avslutter body-taggen.

    <script type="text/javascript">
      function callback() {
        const submitButton = document.getElementById("submit-button");
        submitButton.removeAttribute("disabled");
      }
    </script>
</body>

Se demo her: https://gudjon.kattahub.no/dennefilen.php