reCAPTCHA – популярный инструмент, используемый для защиты веб-сайтов от спама и злоупотреблений. Он обеспечивает дополнительный уровень безопасности, проверяя, что пользователь является человеком, а не ботом. В этой статье мы рассмотрим различные методы реализации reCAPTCHA в приложении React с использованием TypeScript. Мы предоставим примеры кода для демонстрации каждого метода, обеспечивая четкое понимание процесса реализации.

Метод 1: использование пакета response-google-recaptcha
Самый простой способ интегрировать reCAPTCHA в приложение React — использовать пакет «react-google-recaptcha». Вот пример того, как его использовать:

import ReCAPTCHA from "react-google-recaptcha";
function MyForm() {
  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    // Handle form submission logic
  };
  return (
    <form onSubmit={handleSubmit}>
      {/* Other form fields */}
      <ReCAPTCHA sitekey="YOUR_SITE_KEY" />
      <button type="submit">Submit</button>
    </form>
  );
}

Метод 2: интеграция вручную
Если вы предпочитаете не использовать внешний пакет, вы можете вручную интегрировать reCAPTCHA в свое приложение React. Выполните следующие действия:

Шаг 1. Добавьте скрипт reCAPTCHA в свой HTML-файл:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Шаг 2. Создайте компонент для отображения виджета reCAPTCHA:

import { useEffect } from "react";
function ReCAPTCHAWidget() {
  useEffect(() => {
    const onLoadCallback = () => {
      // Render the reCAPTCHA widget
      window.grecaptcha.render("recaptcha-container", {
        sitekey: "YOUR_SITE_KEY",
        callback: (response: string) => {
          // Handle the reCAPTCHA response
        },
      });
    };
    const script = document.createElement("script");
    script.src = "https://www.google.com/recaptcha/api.js?onload=onLoadCallback";
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);
    return () => {
      // Clean up the script on unmount
      document.body.removeChild(script);
    };
  }, []);
  return <div id="recaptcha-container"></div>;
}

Метод 3: интеграция reCAPTCHA v3
reCAPTCHA v3 — это версия reCAPTCHA, которая работает в фоновом режиме и не требует вмешательства пользователя. Вот пример того, как интегрировать reCAPTCHA v3 в приложение React:

import { useEffect } from "react";
function MyComponent() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY";
    document.body.appendChild(script);
    return () => {
      // Clean up the script on unmount
      document.body.removeChild(script);
    };
  }, []);
  const handleSubmit = async () => {
    const response = await window.grecaptcha.execute("YOUR_SITE_KEY", { action: "submit" });
    // Handle the reCAPTCHA response
  };
  return (
    <form onSubmit={handleSubmit}>
      {/* Other form fields */}
      <button type="submit">Submit</button>
    </form>
  );
}

Реализация reCAPTCHA в приложении React с использованием TypeScript имеет решающее значение для обеспечения безопасности и целостности ваших форм. В этой статье мы рассмотрели три различных метода: использование пакета «react-google-recaptcha», интеграцию вручную и интеграцию reCAPTCHA v3. Каждый метод имеет свои преимущества и может быть адаптирован для удовлетворения конкретных требований проекта. Выберите метод, который лучше всего соответствует вашим потребностям, и обеспечьте безопасность пользователей на своем веб-сайте.