Integroi Google Invisible reCAPTCHA PHP: hen
Captchan lisääminen verkkosivustolomakkeisiin on nykyään välttämätöntä. Muuten postilaatikkosi ja tietokanta täyttävät tonnia roskapostia. Se vain tuhlaa aikaa sähköpostien puhdistamiseen ja vie myös ylimääräistä tilaa palvelintietokannassa.
Google reCAPTCHA on parempi tapa suojata lomakkeesi botteja vastaan. ReCAPTCHA: n avulla jatkat lomakkeitasi vain, jos sillä on todellisia ihmisen vuorovaikutuksia.
Tässä artikkelissa tutkitaan, miten Google Invisible reCAPTCHA integroidaan verkkosivustolomakkeisiin PHP: n kanssa. Invisible reCAPTCHA: n tapauksessa vierailijoiden ei tarvitse ratkaista pulmia. Sen on vahvistettava pyyntö taustalla palvelinpuolella.
Rekisteröi sivusto ja hanki API-avaimet
Aloita rekisteröimällä sivustosi täällä – https://www.google.com/recaptcha/admin.
Nosta vaihtoehto ‘Invisible reCAPTCHA badge’ reCAPTCHA v2: sta.
Lisää verkkotunnuksesi samassa muodossa. Voit lisätä niin monta verkkotunnusta kuin haluat. Paikalliselle palvelimelle lisätään toimialue localhostina. Kun lähetät lomakkeen, saat API-avaimet. Kopioi nämä avaimet. Se vaaditaan seuraavissa vaiheissa.
Integroi Google Invisible reCAPTCHA
Näkymättömän reCAPTCHA: n lisääminen lomakkeeseen vaatii hieman erilaista lähestymistapaa. Meidän on välitettävä data-attribuutit painikkeeseen ja lähetettävä lomake JavaScriptin avulla seuraavasti.
<form method="post" id="userForm">
<p><input type="text" class="form-control" name="fullname" placeholder="Enter full name" /></p>
<p><button class="g-recaptcha btn btn-primary" data-sitekey="YOUR_SITE_KEY" data-callback="submitForm">Submit</button></p>
</form>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
function submitForm() {
document.getElementById('userForm').submit();
}
</script>Tämä koodi lisää Näkymätön reCAPTCHA-lomakkeen. Jos lataat sivun uudelleen, näet reCAPTCHA-logon sivun oikeassa alakulmassa.
Tässä olemme siirtäneet reCAPTCHA-sivuston avaimen data-sitekey-attribuutille ja menetelmän nimen ‘submForm’ attribuutille ‘data-callback’. Kun käyttäjä napsauttaa painiketta, se kutsuu takaisinsoittomenetelmän, joka lähettää lomakkeen JavaScriptiä käyttäen.
Nyt on aika tarkistaa palvelinpuoli. Tarkistamme reCAPTCHA-vastauksen arvon Google API: n URL-osoitteeseen seuraavasti.
if (isset($_POST['g-recaptcha-response'])) {
$secret_key = 'YOUR_SECRET_KEY';
$url = 'https://www.google.com/recaptcha/api/siteverify?secret='.$secret_key.'&response='.$_POST['g-recaptcha-response'];
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HEADER, false);
$data = curl_exec($curl);
curl_close($curl);
$responseCaptchaData = json_decode($data);
if($responseCaptchaData->success) {
echo 'Captcha verified';
//proceed with form values
} else {
echo 'Verification failed';
}
}Kun oikea ihminen lähettää lomakkeen, se luo reCAPTCHA-vastauksen, jonka yllä oleva koodi vahvistaa Google-sovellusliittymällä. Jos lomake lähetetään bottien kautta, yllä oleva vahvistus epäonnistuu. Lomaketta tulisi jatkaa vain, jos vastaus onnistuu.
Lopullinen koodimme on seuraava.
<?php
if (isset($_POST['g-recaptcha-response'])) {
$secret_key = 'YOUR_SECRET_KEY';
$url = 'https://www.google.com/recaptcha/api/siteverify?secret='.$secret_key.'&response='.$_POST['g-recaptcha-response'];
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HEADER, false);
$data = curl_exec($curl);
curl_close($curl);
$responseCaptchaData = json_decode($data);
if($responseCaptchaData->success) {
echo 'Captcha verified';
//proceed with form values
} else {
echo 'Verification failed';
}
}
?>
<form method="post" id="userForm">
<p><input type="text" class="form-control" name="fullname" placeholder="Enter full name" /></p>
<p><button class="g-recaptcha btn btn-primary" data-sitekey="YOUR_SITE_KEY" data-callback="submitForm">Submit</button></p>
</form>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
function submitForm() {
document.getElementById('userForm').submit();
}
</script>Se siitä! Nauti roskapostin ilmaisista lomakkeista verkkosivustollasi. Haluaisin kuulla ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.