Hvordan legge inn ReCaptcha på nettside som bruker PHP.
Se demo her: https://gudjon.kattahub.no/dennefilen.php
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
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>
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>
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
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