Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

По мере того, как веб-приложения и мобильные приложения становятся все более популярными, растет и риск спама и других вредоносных действий. CAPTCHA может быть удобной мерой безопасности, которую стоит интегрировать для предотвращения подобных угроз безопасности.

CAPTCHA — это минимальная функция безопасности, обычно интегрируемая с веб-формами для предотвращения автоматических атак со стороны спам-ботов. Это гарантирует, что пользователь, обращающийся к приложению, действительно является человеком, а не ботом, выполняющим вредоносный код.

Что такое капча?

Аббревиатура CAPTCHA расшифровывается как «Полностью автоматизированный общедоступный тест Тьюринга, чтобы различать компьютеры и людей». Это относится к компьютерному тесту, который проверяет, является ли конкретный пользователь, взаимодействующий с вашим приложением, человеком, а не ботом.

instagram viewer

Существуют различные типы тестов CAPTCHA, которые вы можете интегрировать в свое приложение, такие как текстовые и звуковые CAPTCHA. Однако самым популярным и эффективным типом является Google reCAPTCHA. Он проверяет, чтобы отличить реальных пользователей от ботов, используя расширенные алгоритмы анализа рисков.

Google reCAPTCHA поставляется в двух версиях:

  • reCAPTCHA V3: эта версия работает в фоновом режиме и определяет общий балл на основе поведения пользователя.
  • reCAPTCHA V2: эта версия помещает флажок «Я не робот» в форму аутентификации.

В этом руководстве мы рассмотрим Google reCAPTCHA V2. Читайте дальше, чтобы узнать, как интегрировать его в приложение React.

Зарегистрируйте приложение React в административной консоли reCAPTCHA.

Для начала вам необходимо зарегистрировать свое приложение в консоли разработчика reCAPTCHA. Направляйтесь к Консоль администратора reCAPTCHA от Google, войдите в свою учетную запись Google и заполните необходимые данные формы.

Укажите имя ярлыка, выберите reCAPTCHA V2, а в раскрывающемся списке выберите запросы на проверку, установив флажок «Я не робот». Наконец, укажите доменное имя вашего приложения. Для локальной разработки введите локальный хост как доменное имя.

Как только ваше приложение будет зарегистрировано, сайт перенаправит вас на новую страницу с вашим сгенерированным секретом и ключами сайта.

Создайте React-клиент

Этот проект состоит из двух частей: вы создадите клиент React, который отображает простую форму входа с помощью Google reCAPTCHA и Экспресс-сервер, который отправляет POST-запросы к API reCAPTCHA для проверки токена, сгенерированного после того, как пользователь завершит reCAPTCHA. испытание.

Создайте папку проекта локально для размещения файлов проекта. Следующий, создать React-приложение и измените текущий каталог на каталог клиента. В корневом каталоге папки вашего клиента создайте файл .env для хранения секретного ключа API и ключа сайта.

REACT_APP_reCAPTCHA_SITE_KEY = 'ключ сайта'
REACT_APP_reCAPTCHA_SECRET_KEY = 'Секретный ключ'

Вы можете найти код этого проекта в его Репозиторий GitHub.

Установите необходимые пакеты

Установите Axios, вы будете использовать эту библиотеку для выполнения HTTP-запросов из браузера и React-Google-reCAPTCHA. Этот пакет предоставляет специфичную для React реализацию API reCAPTCHA.

npm установить реакцию-recaptcha-google axios --save

Интегрируйте Google reCAPTCHA в приложение React

Открой файл src/App.js, удалите шаблонный код React и добавьте следующий код:

Этот компонент будет отображать простую форму входа, которая включает виджет Google reCAPTCHA.

Сначала импортируйте пакеты React, Axios и react-google-recaptcha:

Импортировать Реагировать, {useState, useRef} от«реагировать»;
Импортировать Аксиос отаксиос;
Импортировать ReCAPTCHA от'реагировать-гугл-рекапча';

Затем определите три переменные состояния: successMsg, errorMsg и validToken. Ваш код обновит эти состояния после успешной отправки формы и проверки reCAPTCHA. Дополнительно получите сайт и секретные ключи из файла ENV.

функцияПриложение() {
константа [SuccessMsg, setSuccessMsg] = useState("")
константа [ErrorMsg, setErrorMsg] = useState("")
константа [valid_token, setValidToken] = useState([]);
константа SITE_KEY = процесс.env. REACT_APP_reCAPTCHA_SITE_KEY;
константа SECRET_KEY = процесс.env. REACT_APP_reCAPTCHA_SECRET_KEY;

Определите хук useRef, который ссылается на компонент reCAPTCHA, для захвата токена, сгенерированного после того, как пользователь завершит вызовы reCAPTCHA.

константа captchaRef = использоватьRef(нулевой);

Затем создайте функцию handleSubmit, которая будет вызываться, когда пользователь отправляет форму входа. Эта функция получает токен от компонента reCAPTCHA, а затем вызывает перезагрузить метод для сброса reCAPTCHA, чтобы разрешить последующие проверки.

Кроме того, он проверяет, существует ли токен, и вызывает функцию verifyToken для проверки токена. После проверки токена он обновит состояние validToken данными ответа API.

константа обработатьОтправить = асинхронный (е) => {
 e.preventDefault();
позволять токен = captchaRef.current.getValue();
 captchaRef.current.reset();
если (жетон) {
позволять действительный_токен = Ждите VerifyToken (токен);
 setValidToken (действительный_токен);
если (действительный_токен[0].успех истинный) {
консоль.бревно("проверено");
 setSuccessMsg("Ура!! вы отправили форму")
 } еще {
консоль.бревно("не подтверждено");
 установитьСообщениеОшибки(" Извини!! Подтвердите, что вы не бот")
 }
 }
 }

Наконец, определите функцию verifyToken, которая будет отправлять запрос POST на конечную точку сервера Express с помощью Axios, передавая токен reCAPTCHA и секретный ключ в теле запроса. Если запрос выполнен успешно, он помещает данные ответа в массив APIResponse и возвращает массив в качестве результата.

константа подтвердитьТокен = асинхронный (токен) => {
позволять APIответ = [];
пытаться {
позволять ответ = Ждите Аксиос.пост(` http://localhost: 8000/проверка-токен`, {
 reCAPTCHA_TOKEN: токен,
 Секретный_ключ: SECRET_KEY,
 });
 APIResponse.push (ответ['данные']);
возвращаться ответ API;
 } ловить (ошибка) {
консоль.лог (ошибка);
 }
 };

Наконец, верните форму с компонентом reCAPTCHA. Этот компонент использует хук ссылки и ключ сайта в качестве реквизита для настройки и отображения виджета reCAPTCHA.

Когда пользователь отправляет форму, компонент отображает сообщение об успешном завершении или ошибке на основе значения состояния validToken. Если токен reCAPTCHA действителен, то есть пользователь успешно выполнил вызовы reCAPTCHA, отображается сообщение об успешном выполнении, в противном случае отображается сообщение об ошибке.

возвращаться (
"Приложение">
"Заголовок приложения"> 
"logIn-форма">


 {valid_token.length > 0 && действительный_токен[0].успех истинный
? <h3className="успех текста">{УспехСообщение}h3>
: <h3className="текстовая ошибка">{ErrorMsg} h3>}


Имя пользователя</p>
"текст" заполнитель ="Имя пользователя..." />




Пароль</p>
"пароль" заполнитель = "Пароль..." />


 имя_класса="рекапча"
 ключ сайта={SITE_KEY}
 ссылка={captchaRef}
 />








экспортпо умолчанию Приложение

Наконец, запустите сервер разработки и перейдите в браузер http://localhost: 3000 для просмотра результатов.

Создайте экспресс-бэкенд

Для начала в корневом каталоге всей папки проекта создать веб-сервер Express, и установите эти пакеты:

npm установить экспресс-парсер cors axios body-parser

Настройте экспресс-сервер

Затем откройте файл index.js в папке проекта сервера и добавьте этот код:

константа экспресс = требовать('выражать')
константа аксиос = требовать(аксиос);
константа кор = требовать(корс);
константа приложение = экспресс();
константа парсер тела = требовать('парсер тела');
константа jsonParser = bodyParser.json();
константа ПОРТ = процесс.env. ПОРТ || 8000;


app.use(jsonParser);
app.use(cors());


приложение.пост("/проверить-токен", асинхронный (требование, разрешение) => {
константа { reCAPTCHA_TOKEN, Secret_Key} = req.body;


пытаться {
позволять ответ = Ждите аксиос.пост(` https://www.google.com/recaptcha/api/siteverify? секрет =${секретный_ключ}&ответ=${reCAPTCHA_TOKEN}`);
консоль.log(ответ.данные);


возвращаться рез.статус(200).json({
 успех:истинный,
 сообщение: "Токен успешно проверен",
 Verification_info: ответ.данные
 });
 } ловить(ошибка) {
консоль.лог (ошибка);


возвращаться рез.статус(500).json({
 успех:ЛОЖЬ,
 сообщение: "Ошибка проверки токена"
 })
 }
});
app.listen (ПОРТ, () => консоль.бревно(`Приложение запущено на порту ${ПОРТ}`));

Этот код делает следующее:

  • Сервер определяет маршрут Post, который отправляет асинхронный HTTP-запрос POST к API reCAPTCHA Google для проверьте токен reCAPTCHA с помощью Axios, передав секретный ключ для аутентификации в URL-адресе запроса.
  • Если токен reCAPTCHA успешно проверен, сервер отвечает объектом JSON, содержащим свойство «успех», для которого установлено значение «истина», свойство «сообщение». указывающее, что токен был успешно проверен, и свойство "verification_info", содержащее информацию о ответе на проверку от Google. API.
  • Если в процессе проверки возникает ошибка, сервер отвечает объектом JSON, содержащим Свойство "успех" имеет значение false, а свойство "сообщение" указывает, что произошла ошибка при проверке токен.

Наконец, запустите сервер узла и проверьте функциональность функции reCAPTCHA.

узел index.js

Могут ли reCAPTCHA гарантировать защиту от спам-ботов?

По данным Google, его служба reCAPTCHA имеет показатель успеха более 99%, что означает, что только небольшой процент спама может обойти функцию безопасности reCAPTCHA.

reCAPTCHA не является надежной, так как решительные злоумышленники все еще могут найти обходные пути. Но он остается важным инструментом, который может значительно снизить риск спам-ботов.