Yandex Cloud Captcha интеграция в проект Larave/React (Breeze)

Веб-приложения часто требуют защиту от ботов и автоматизированных запросов. Одним из способов реализации такой защиты является использование капчи, например, 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.