Come aggiungere Non sono un robot captcha in Laravel Forms

Stai cercando di aggiungere Google reCAPTCHA nei tuoi moduli Laravel? Google reCAPTCHA aiuta a proteggere i moduli dai bot che risultano salvarci dallo spam. Se non stai proteggendo i tuoi moduli, probabilmente stai ricevendo un sacco di spam nel database.

Al momento in cui scriviamo, Google fornisce 2 versioni di reCAPTCHA: v2 e v3. Il reCAPTCHA v3 posiziona un’icona nell’angolo in basso a destra delle tue pagine e verifica le richieste con un punteggio. D’altra parte, reCAPTCHA v2 verifica le richieste con una sfida. In questo articolo, studiamo reCAPTCHA v2 e convalideremo le richieste con la casella di controllo "Non sono un robot".

Perché hai bisogno di Google reCAPTCHA?

Un bot Internet è un sistema che esegue script automatici su Internet. Prendono di mira i moduli del sito Web per inviare spam al database. Fondamentalmente, questo sistema funziona a un ritmo molto più elevato rispetto agli umani da soli. Vogliamo sempre che un vero essere umano interagisca con i moduli del nostro sito Web, non un bot.

Aggiungendo Google reCAPTCHA, possiamo proteggere i moduli del nostro sito Web da questi bot Internet, dai loro spam e abusi. È impossibile per un sistema automatizzato risolvere la sfida impostata da reCAPTCHA. E il tuo modulo non verrà inviato fino a quando la sfida non sarà risolta. Un essere umano può facilmente risolvere queste sfide e inviare un modulo.

Imposta Google reCAPTCHA sul tuo sito web Laravel

Per iniziare, devi prima registrare il sito su Google. Scegli l’opzione reCAPTCHA v2 e la casella di controllo "Non sono un robot" come mostrato nello screenshot qui sotto.

Al momento della registrazione del sito, copia la chiave del sito e la chiave segreta di cui avremo bisogno tra poco.

Dobbiamo aggiungere reCAPTCHA nel progetto Laravel. Per svolgere il compito, userò la libreria anhskohbo/no-captcha.

Apri il prompt dei comandi nella directory principale del tuo progetto ed esegui il comando:

composer require anhskohbo/no-captcha

Apri il file "config/app.php" e aggiungi la riga sottostante all’array "provider".

AnhskohboNoCaptchaNoCaptchaServiceProvider::class,

Aggiungi l’alias di classe all’array di alias:

'NoCaptcha' => AnhskohboNoCaptchaFacadesNoCaptcha::class,

Pubblica il file di configurazione usando il comando:

php artisan vendor:publish --provider="AnhskohboNoCaptchaNoCaptchaServiceProvider"

Quindi, apri il .envfile e specifica le chiavi reCAPTCHA come segue.

NOCAPTCHA_SECRET=secret-key
NOCAPTCHA_SITEKEY=site-key

Assicurati di sostituire i segnaposto secret-key, site-key con i valori effettivi.

Svuota la cache di configurazione eseguendo il comando seguente.

php artisan config:clear 

Aggiunta di Google reCAPTCHA al modulo in Laravel

A questo punto, hai completato la configurazione di base richiesta per reCAPTCHA. Ora scriviamo del codice e mettiamolo in azione.

Apri il file di visualizzazione in cui desideri aggiungere la casella di controllo Non sono un robot. Nella parte superiore del file blade inizializzare l’origine JS come segue:

{!! NoCaptcha::renderJs() !!}

Aggiungi la seguente istruzione a riga singola nel punto in cui desideri visualizzare la casella di controllo reCAPTCHA. Il posto migliore è prima del pulsante di invio.

{!! NoCaptcha::display() !!}

Ad esempio, creiamo un modulo con pochi campi e aggiungiamo reCAPTCHA utilizzando il codice sottostante.

{!! NoCaptcha::renderJs() !!}
 
@if ($errors->has('g-recaptcha-response'))
    <span class="help-block">
        <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
    </span>
@endif
<form action="{{ url('ROUTE_HERE') }}" method="post">
    <p>Name: <input type="text" name="fullname" /></p>
    <p>Email: <input type="email" name="email" /></p>
    <p>Message: <textarea name="message"></textarea></p>
    {!! NoCaptcha::display() !!}
    {{ csrf_field() }}
    <p><input type="submit" name="submit" value="Submit" /></p>
</form>

Dopo aver aggiunto le righe sopra, vedrai apparire reCAPTCHA come mostrato nello screenshot qui sotto.

Nel codice sopra, ho anche aggiunto un codice che visualizza un errore se si verifica durante la convalida di un reCAPTCHA.

Ora, dobbiamo convalidare il reCAPTCHA all’invio del modulo. Per raggiungere questo obiettivo, userò Laravel Validator come segue.

<?php
 
namespace AppHttpControllers;
 
use IlluminateHttpRequest;
use IlluminateSupportFacadesValidator;
 
class ContactController extends Controller
{
    ...
    ...
    public function store(Request $request)
    {
        $messages = [
            'g-recaptcha-response.required' => 'You must check the reCAPTCHA.',
            'g-recaptcha-response.captcha' => 'Captcha error! try again later or contact site admin.',
        ];
 
        $validator = Validator::make($request->all(), [
            'g-recaptcha-response' => 'required|captcha'
        ], $messages);
 
        if ($validator->fails()) {
            return redirect('ROUTE_HERE')
                        ->withErrors($validator)
                        ->withInput();
        }
 
        // process the form
    }   
}

Qui, ho incluso la facciata ‘Validator’ e convalidando un reCAPTCHA nel metodo ‘store’. Se non riesce a convalidare, genererà un errore.

Questo è tutto! Hai aggiunto con successo reCAPTCHA v2 con la casella di controllo Non sono un robot al modulo Laravel. Ora, il tuo modulo non verrà inviato fino a quando il visitatore non risolverà la sfida reCAPTCHA.

articoli Correlati

• Sistema di registrazione e accesso utente in Laravel
• Sistema di accesso social utilizzando Laravel Socialite
• Integrazione del gateway di pagamento Authorize.Net in Laravel