Посібник з додавання Google reCAPTCHA v3 до вашого веб-сайту Laravel

Останнє оновлення Жов 17, 2021

Зміст

Отримайте ключ сайту та секретний ключ reCAPTCHA

Встановіть та налаштуйте бібліотеку Laravel reCAPTCHA

Додайте Google reCAPTCHA v3 на свій веб-сайт Laravel

Раніше я опублікував статтю про додавання Google reCAPTCHA до форм Laravel. Потім Google представив наступну версію v3 reCAPTCHA. Один з наших читачів запитав, як інтегрувати reCAPTCHA v3 в додаток Laravel.

reCAPTCHA v3 має дещо іншу поведінку. На відміну від попередньої версії reCAPTCHA, вам не потрібно вносити капчу всередину форми. У цій версії вашим відвідувачам не потрібно розгадувати головоломку. Натомість ви побачите піктограму reCAPTCHA у нижньому правому куті вашого веб-сайту. Ця версія reCAPTCHA v3 бореться з ботами у фоновому режимі. Найголовніше, вам не потрібно додавати капчу в будь-якій формі. Просто додайте його один раз, і це захистить усі форми вашого веб-сайту.

У цій статті ми вивчаємо, як користувач може додати reCAPTCHA v3 на свій веб-сайт Laravel. Додавання reCAPTCHA захищає ваш веб-сайт від ботів та спаму.

Отримайте ключ сайту та секретний ключ reCAPTCHA

Для початку потрібно спочатку зареєструвати свій сайт у Google reCAPTCHA. Перейдіть до Google reCAPTCHA та натисніть на значок "+", щоб зареєструвати свій сайт. На наступній сторінці додайте домен свого веб-сайту, виберіть опцію ‘reCAPTCHA v3’. Якщо ви хочете протестувати його на локальному сервері, то до поля домену слід додати ‘localhost’.

Після натискання кнопки подати ви отримаєте ключ сайту та секретний ключ. Скопіюйте ці ключі. Вони потребуватимуть подальших кроків.

Встановіть та налаштуйте бібліотеку Laravel reCAPTCHA

Перейдіть до свого проекту Laravel та встановіть бібліотеку biscolab, яка створена для інтеграції reCAPTCHA в Laravel. Відкрийте термінал у кореневому каталозі проекту та запустіть команду:

composer require biscolab/laravel-recaptcha

Після встановлення бібліотеки опублікуйте файл конфігурації, використовуючи команду нижче.

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

Відкрийте .envфайл у своєму редакторі та додайте свій сайт та секретні ключі reCAPTCHA, як показано нижче.

RECAPTCHA_SITE_KEY=ADD_YOUR_SITE_KEY
RECAPTCHA_SECRET_KEY=ADD_YOUR_SECRET_KEY

Не забудьте замінити заповнювачі "ADD_YOUR_SITE_KEY" та "ADD_YOUR_SECRET_KEY" на фактичні значення. Далі відкрийте config/recaptcha.phpта встановіть версію на v3.

return [
    ...
    'version' => 'v3',
    ...
];

Після цього очистіть кеш конфігурації за допомогою команди:

php artisan config:cache

Додайте Google reCAPTCHA v3 на свій веб-сайт Laravel

Ми закінчили з усіма налаштуваннями і налаштовані на додавання reCAPTCHA на веб-сайті. Для цього потрібно спочатку додати мета-тег HTML для csrf-token у розділі head.

<meta name="csrf-token" content="{{ csrf_token() }}">

Якщо ваш веб-сайт вже додав цей тег, просто проігноруйте наведений вище крок. Потім вставте htmlScriptTagJsApi()помічник перед закриттям тегу head.

<!DOCTYPE html>
<html>
    <head>
        ...
        ...
        {!! htmlScriptTagJsApi() !!}
    </head>

Тепер перейдіть на свій веб-сайт, перезавантажте його, і ви побачите піктограму reCAPTCHA в правому нижньому куті сторінки. Це означає, що ваш веб-сайт тепер захищений Google reCAPTCHA.

Ви закінчили з додаванням Google reCAPTCHA на своєму веб-сайті Laravel. Для подальшої цікавості, якщо ви хочете побачити відповідь reCAPTCHA, вам потрібно трохи змінити код у тезі head.

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

Перезавантажте сторінку та перевірте на консолі браузера, ви побачите відповідь Google reCAPTCHA. У моєму випадку це показано на знімку екрана нижче.

Пов’язані статті

Джерело запису: artisansweb.net