En guide om hur du lägger till Google reCAPTCHA v3 till din Laravel-webbplats
Tidigare har jag publicerat en artikel om att lägga till Google reCAPTCHA i Laravel-formuläret. Google har sedan tagit nästa version v3 av reCAPTCHA. En av våra läsare frågade hur man integrerar reCAPTCHA v3 i en Laravel-applikation.
reCAPTCHA v3 har något annorlunda beteende. Till skillnad från den äldre versionen av reCAPTCHA behöver du inte placera captcha i ditt formulär. I den här versionen behöver dina besökare inte lösa ett pussel. Istället ser du reCAPTCHA-ikonen längst ned till höger på din webbplats. Denna v3-version av reCAPTCHA kämpar mot robotarna i bakgrunden. Viktigast är att du inte behöver lägga till captcha i alla former. Lägg bara till det en gång så skyddar det alla former av din webbplats.
I den här artikeln studerar vi hur en användare kan lägga till reCAPTCHA v3 till sin Laravel-webbplats. Lägga till reCAPTCHA skyddar din webbplats från bots och skräppost.
Skaffa platsnyckel och hemlig nyckel till reCAPTCHA
För att komma igång måste du först registrera din webbplats med Google reCAPTCHA. Gå till Google reCAPTCHA och klicka på ‘+’ ikonen för att registrera din webbplats. På nästa sida lägger du till domänen på din webbplats, väljer alternativet ‘reCAPTCHA v3’. Om du vill testa det på en lokal server ska du lägga till "localhost" till domänfältet.
När du har tryckt på knappen Skicka får du platsnyckeln och den hemliga nyckeln. Kopiera dessa nycklar. De kommer att kräva nästa steg.
Installera och konfigurera Laravel reCAPTCHA-bibliotek
Gå till ditt Laravel-projekt och installera biscolabs bibliotek som är byggt för att integrera reCAPTCHA i Laravel. Öppna terminalen i din projektkatalog och kör kommandot:
composer require biscolab/laravel-recaptchaVid installation av biblioteket, publicera konfigurationsfilen med kommandot nedan.
php artisan vendor:publish --provider="BiscolabReCaptchaReCaptchaServiceProvider"Öppna .envfilen i din redigerare och lägg till din webbplats och hemliga nycklar för reCAPTCHA som visas nedan.
RECAPTCHA_SITE_KEY=ADD_YOUR_SITE_KEY
RECAPTCHA_SECRET_KEY=ADD_YOUR_SECRET_KEYSe till att ersätta platshållarna ‘ADD_YOUR_SITE_KEY’ och ‘ADD_YOUR_SECRET_KEY’ med de faktiska värdena. Öppna sedan config/recaptcha.phpoch ställ in version till v3.
return [
...
'version' => 'v3',
...
];Efter detta rensar konfigurationscachen med kommandot:
php artisan config:cacheLägg till Google reCAPTCHA v3 till din Laravel-webbplats
Vi är klara med alla inställningar och redo att lägga till reCAPTCHA på webbplatsen. För detta måste du först lägga till HTML-metataggen för csrf-token i huvudavsnittet.
<meta name="csrf-token" content="{{ csrf_token() }}">Om din webbplats redan har lagt till den här taggen, ignorerar du bara ovanstående steg. Sätt sedan in htmlScriptTagJsApi()hjälpen innan du stänger huvudetiketten.
<!DOCTYPE html>
<html>
<head>
...
...
{!! htmlScriptTagJsApi() !!}
</head>Gå nu till din webbplats, ladda om den och du ska se reCAPTCHA-ikonen längst ned till höger på en sida. Det betyder att din webbplats nu är skyddad med Google reCAPTCHA.
Du är klar med att lägga till Google reCAPTCHA på din Laravel-webbplats. För ytterligare nyfikenhet, om du vill se svaret från reCAPTCHA måste du ändra koden något i huvudetiketten.
<head>
...
<meta name="csrf-token" content="{{ csrf_token() }}">
<script type="text/javascript">
function callbackThen(response){
// read HTTP status
console.log(response.status);
// read Promise object
response.json().then(function(data){
console.log(data);
});
}
function callbackCatch(error){
console.error('Error:', error)
}
</script>
{!! htmlScriptTagJsApi([
'callback_then' => 'callbackThen',
'callback_catch' => 'callbackCatch'
]) !!}
</head>Ladda om sidan och kolla in webbläsarkonsolen, du ser svaret från Google reCAPTCHA. I mitt fall visas det som en skärmdump nedan.
relaterade artiklar
- PayPal Payments Pro-integration i Laravel
- Hur man skapar en blogg med Laravel
- Hur man skapar honungspott för att bekämpa skräppost i Laravel