Сейчас ваша корзина пуста!
Веб-приложения часто требуют защиту от ботов и автоматизированных запросов. Одним из способов реализации такой защиты является использование капчи, например, Yandex Smart Captcha. В этом руководстве мы рассмотрим, как интегрировать и оптимизировать Yandex Cloud Captcha в вашем приложении, а также улучшить взаимодействие с сервером, используя Laravel на стороне сервера и React на клиенте.
Серверная часть: PHP
В данном коде реализован класс YandexCaptchaService
, который отвечает за валидацию токена, полученного от Yandex Smart Captcha. Он отправляет запрос на валидацию, а затем возвращает JSON-ответ с результатом.
<?php
namespace App\Services;
use App\Models\Rpc\RpcInfoModel;
use GuzzleHttp\Client;
use GuzzleHttp\Exception\GuzzleException;
use Illuminate\Http\Request;
class YandexCaptchaService
{
protected Client $client;
public function __construct()
{
$this->client = new Client();
}
/**
* Проверка капч
* @throws GuzzleException
*/
public function check(Request $request): \Illuminate\Http\JsonResponse
{
$token = $request->input('smartToken');
$args = http_build_query([
"secret" => 'ваш_секретный_ключ',
"token" => $token,
"ip" => $_SERVER['REMOTE_ADDR'],
]);
$response = $this->client->get("https://smartcaptcha.yandexcloud.net/validate?$args");
$codeResponse = $response->getStatusCode();
$responseBody = $response->getBody();
$result = json_decode($responseBody);
if ($codeResponse != 200) {
return response()->json(['status' => false, 'message' => $result->message]);
}
return response()->json(['status' => $result->status === "ok", 'message' => $result->message]);
}
}
Клиентская часть: React
Теперь давайте оптимизируем React-компонент, который отвечает за работу с Yandex Captcha. Мы упростим обработку состояния и сделаем код более читабельным.
npm i @yandex/smart-captcha
import { SmartCaptcha } from '@yandex/smart-captcha';
import React, { useEffect, useState } from 'react';
import axios from 'axios';
export const YandexCaptcha = ({ setError, disabledButton }) => {
const [token, setToken] = useState('');
const [message, setMessage] = useState('');
useEffect(() => {
if (token) {
sendRequest(token);
} else {
disabledButton(true);
}
}, [token]);
const sendRequest = async (token) => {
try {
const response = await axios.post('/check-captcha', { smartToken: token });
if (response?.data) {
const { status, message } = response.data;
setError(status);
setMessage(message);
disabledButton(!status);
}
} catch (error) {
console.error(error);
setError(false);
disabledButton(true);
}
};
return (
<div className="mt-5 w-full">
{message && (
<div className="flex items-center p-4 mb-4 text-sm text-black rounded-lg bg-yellow-50 mt-5" role="alert">
<svg
className="flex-shrink-0 inline w-4 h-4 me-3"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
</svg>
<span className="sr-only">Внимание!</span>
<div>
<span className="font-medium">YandexCaptcha:</span> {message}.
</div>
</div>
)}
<SmartCaptcha sitekey="ваш_ключ_сайта" onSuccess={setToken} />
</div>
);
};
Заключение
Интеграция и оптимизация Yandex Smart Captcha в ваше веб-приложение — это важный шаг для обеспечения безопасности. Улучшая код, вы делаете его более поддерживаемым и удобным для расширения. Не забывайте тестировать вашу реализацию, чтобы убедиться, что все работает корректно. Цены https://yandex.cloud/ru/docs/smartcaptcha/pricing
Больше на БЛОГ | RUVEM.RU | НОВОСТИ В ИТ
Subscribe to get the latest posts sent to your email.