Jak dodać Nie jestem robotem captcha w Laravel Forms

Ostatnia aktualizacja paź 18, 2021

Zadowolony

Skonfiguruj Google reCAPTCHA na swojej stronie Laravel

Dodanie Google reCAPTCHA do formularza w Laravel

Czy chcesz dodać Google reCAPTCHA do swoich formularzy Laravel? Google reCAPTCHA pomaga chronić formularze przed botami, które w rezultacie chronią nas przed spamem. Jeśli nie chronisz swoich formularzy, prawdopodobnie dostajesz mnóstwo spamu do bazy danych.

W chwili pisania tego tekstu Google udostępnia 2 wersje reCAPTCHA – v2 i v3. ReCAPTCHA v3 umieszcza ikonę w prawym dolnym rogu twoich stron i weryfikuje żądania za pomocą wyniku. Z drugiej strony reCAPTCHA v2 weryfikuje żądania za pomocą wyzwania. W tym artykule przyjrzymy się reCAPTCHA v2 i zweryfikujemy żądania za pomocą pola wyboru „Nie jestem robotem".

Dlaczego potrzebujesz Google reCAPTCHA?

Bot internetowy to system, który uruchamia automatyczne skrypty w Internecie. Ich celem jest wysyłanie spamu do bazy danych z formularzy witryn internetowych. Zasadniczo ten system działa znacznie szybciej niż sami ludzie. Zawsze chcemy, aby w kontakt z naszymi formularzami internetowymi wchodził prawdziwy człowiek, a nie bot.

Dodając Google reCAPTCHA, możemy chronić formularze naszej witryny przed tymi botami internetowymi, ich spamem i nadużyciami. Zautomatyzowany system nie jest w stanie sprostać wyzwaniu postawionemu przez reCAPTCHA. Twój formularz nie zostanie przesłany, dopóki wyzwanie nie zostanie rozwiązane. Człowiek może łatwo rozwiązać te wyzwania i złożyć formularz.

Skonfiguruj Google reCAPTCHA na swojej stronie Laravel

Aby rozpocząć, musisz najpierw zarejestrować witrynę w Google. Wybierz opcję reCAPTCHA v2 i pole wyboru „Nie jestem robotem”, jak pokazano na zrzucie ekranu poniżej.

Po zarejestrowaniu strony skopiuj klucz strony i tajny klucz, których będziemy potrzebować za chwilę.

Musimy dodać reCAPTCHA w projekcie Laravel. Do wykonania zadania użyję biblioteki anhskohbo/no-captcha.

Otwórz wiersz poleceń w katalogu głównym swojego projektu i uruchom polecenie:


composer require anhskohbo/no-captcha

Otwórz plik 'config/app.php’ i dodaj poniższy wiersz do tablicy 'providers’.


AnhskohboNoCaptchaNoCaptchaServiceProvider::class,

Dodaj alias klasy do tablicy aliasów:


'NoCaptcha' => AnhskohboNoCaptchaFacadesNoCaptcha::class,

Opublikuj plik konfiguracyjny za pomocą polecenia:


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

Następnie otwórz .envplik i określ klucze reCAPTCHA w następujący sposób.


NOCAPTCHA_SECRET=secret-key
NOCAPTCHA_SITEKEY=site-key

Pamiętaj, aby zastąpić symbole zastępcze tajny klucz, klucz witryny rzeczywistymi wartościami.

Wyczyść pamięć podręczną konfiguracji, uruchamiając poniższe polecenie.


php artisan config:clear

Dodanie Google reCAPTCHA do formularza w Laravel

Na tym etapie kończysz podstawową konfigurację wymaganą do reCAPTCHA. Teraz napiszmy trochę kodu i zróbmy go w akcji.

Otwórz plik widoku, w którym chcesz dodać pole wyboru Nie jestem robotem. W górnej części pliku blade zainicjuj źródło JS w następujący sposób:


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

Dodaj poniższą jednowierszową instrukcję w miejscu, w którym chcesz wyświetlić pole wyboru reCAPTCHA. Najlepsze miejsce jest przed przyciskiem przesyłania.


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

Jako przykład stwórzmy formularz z kilkoma polami i dodajmy do niego reCAPTCHA za pomocą poniższego kodu.


{!! 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>

Po dodaniu powyższych linii zobaczysz, że reCAPTCHA pojawi się, jak pokazano na poniższym zrzucie ekranu.

W powyższym kodzie dodałem również kod, który wyświetla błąd, jeśli wystąpi podczas walidacji reCAPTCHA.

Teraz musimy zweryfikować reCAPTCHA podczas przesyłania formularza. Aby to osiągnąć, użyję Laravel Validator w następujący sposób.


<?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
    }   
}

Tutaj umieściłem fasadę 'Validator’ i walidację reCAPTCHA w metodzie 'store’. Jeśli nie uda się zweryfikować, zgłosi błąd.

Otóż to! Pomyślnie dodałeś reCAPTCHA v2 z polem wyboru Nie jestem robotem do formularza Laravel. Teraz Twój formularz nie zostanie przesłany, dopóki odwiedzający nie rozwiąże wyzwania reCAPTCHA.

Powiązane artykuły

Źródło nagrywania: artisansweb.net