Cloudflare Turnstile — бесплатный инструмент для замены CAPTCHA. Вот как вы можете интегрировать Cloudflare Turnstile в ваше приложение Laravel.
Появление нового пакета ryangjchandler/laravel-cloudflare-turnstile для интеграции Cloudflare Turnstile в Laravel представляет собой удобный способ автоматизации процесса. Давайте рассмотрим, как можно использовать этот пакет для интеграции Cloudflare Turnstile в вашем приложении Laravel.
Шаг 1: Установка пакета
Установите пакет через Composer, выполнив следующую команду в корневой директории вашего проекта Laravel:
composer require ryangjchandler/laravel-cloudflare-turnstile
Шаг 2: Настройка конфигурации
Добавьте следующие конфигурационные значения в ваш файл config/services.php:
return [
// ...
'turnstile' => [
'key' => env('TURNSTILE_SITE_KEY'),
'secret' => env('TURNSTILE_SECRET_KEY'),
],
];
Затем добавьте ключ сайта и секретный ключ Cloudflare Turnstile в ваш файл .env:
TURNSTILE_SITE_KEY="1x00000000000000000000AA"
TURNSTILE_SECRET_KEY="2x0000000000000000000000000000000AA"
Шаг 3: Использование в представлениях
В вашем макете Blade, включите скрипты Turnstile, используя директиву Blade @turnstileScripts. Это должно быть добавлено в <head> вашего документа:
<html>
<head>
@turnstileScripts()
</head>
<body>
{{ $slot }}
</body>
</html>
Затем, внутри формы, используйте компонент <x-turnstile /> для вывода соответствующей разметки с вашим ключом сайта:
<form action="/" method="POST">
<x-turnstile />
<button>
Submit
</button>
</form>
Шаг 4: Валидация на сервере
На сервере используйте предоставленное правило валидации для проверки ответа CAPTCHA. Вы можете использовать макрос Rule::turnstile() или внедрить правило через контейнер:
use Illuminate\Validation\Rule;
public function submit(Request $request)
{
$request->validate([
'cf-turnstile-response' => ['required', Rule::turnstile()],
]);
}
Или через внедрение зависимостей:
use RyanChandler\LaravelCloudflareTurnstile\Rules\Turnstile;
public function submit(Request $request, Turnstile $turnstile)
{
$request->validate([
'cf-turnstile-response' => ['required', $turnstile],
]);
}
Шаг 5: Настройка виджета
Вы можете настроить виджет, передавая атрибуты компоненту <x-turnstile />. Для получения дополнительной информации о параметрах обратитесь к официальной документации.
Шаг 6: Интеграция с Livewire
Пакет также может легко интегрироваться с Livewire. После успешной валидации свойство, указанное в wire:model, будет обновлено с токеном Turnstile:
<x-turnstile wire:model="yourModel" />
0 комментариев