Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Тъй като уеб и мобилните приложения стават все по-популярни, нараства и рискът от спам и друга злонамерена дейност. CAPTCHA може да бъде удобна мярка за сигурност, която си струва да се интегрира, за да се предотвратят тези видове заплахи за сигурността.

CAPTCHA е минимална защитна функция, обикновено интегрирана с уеб формуляри за предотвратяване на автоматизирани атаки от спам ботове. Той гарантира, че потребителят, осъществяващ достъп до приложение, наистина е човек, а не бот, изпълняващ злонамерен код.

Какво е CAPTCHA?

Акронимът CAPTCHA означава напълно автоматизиран публичен тест на Тюринг за разграничаване на компютрите и хората. Отнася се за компютърно генериран тест, който проверява дали конкретен потребител, взаимодействащ с вашето приложение, е човек, а не бот.

Има различни типове CAPTCHA тестове, които можете да интегрирате във вашето приложение, като текстови и аудио базирани CAPTCHA. Най-популярният и ефективен тип обаче е Google reCAPTCHA. Той проверява, за да разграничи реални потребители от ботове, използвайки усъвършенствани алгоритми за анализ на риска.

instagram viewer

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 инсталирайте react-recaptcha-google axios --save

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

Отвори src/App.js файл, изтрийте шаблонния код на React и добавете кода по-долу:

Този компонент ще изобрази прост формуляр за влизане, който включва приспособлението Google reCAPTCHA.

Първо импортирайте пакетите React, Axios и react-google-recaptcha:

импортиране Реагирайте, {useState, useRef} от"реагира";
импортиране Аксиос от"аксиос";
импортиране ReCAPTCHA от'react-google-recaptcha';

След това дефинирайте три променливи на състоянието: successMsg, errorMsg и validToken. Вашият код ще актуализира тези състояния при успешно изпращане на формуляр и проверка на reCAPTCHA. Освен това вземете сайта и секретните ключове от ENV файла.

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

Дефинирайте кука useRef, която препраща към компонента reCAPTCHA, за да улови токена, генериран след като потребителят изпълни предизвикателствата на reCAPTCHA.

конст captchaRef = useRef(нула);

След това създайте функция handleSubmit, която да се извиква, когато потребител изпрати формуляра за влизане. Тази функция получава токена от компонента reCAPTCHA и след това извиква нулиране метод за нулиране на reCAPTCHA, за да позволи последващи проверки.

Освен това той проверява дали токенът съществува и извиква функцията verifyToken, за да провери токена. След като потвърди токена, той ще актуализира състоянието validToken с данните за отговора на API.

конст handleSubmit = асинхронен (e) => {
 e.preventDefault();
позволявам токен = captchaRef.current.getValue();
 captchaRef.current.reset();
ако (токен) {
позволявам valid_token = изчакайте verifyToken (токен);
 setValidToken (валиден_токен);
ако (valid_token[0].успех вярно) {
конзола.log("проверено");
 setSuccessMsg(„Ура!! изпратихте формуляра")
 } друго {
конзола.log("Не е проверено");
 setErrorMsg(„Съжалявам!! Потвърдете, че не сте бот")
 }
 }
 }

И накрая, дефинирайте функцията verifyToken, която ще изпрати POST заявка до крайна точка на Express сървър с помощта на Axios, предавайки reCAPTCHA токена и секретния ключ в тялото на заявката. Ако заявката е успешна, тя изпраща данните за отговор към масива APIResponse и връща масива като резултат.

конст verifyToken = асинхронен (токен) => {
позволявам APIResponse = [];
опитвам {
позволявам отговор = изчакайте Axios.post(` http://localhost: 8000/проверка-токен`, {
 reCAPTCHA_TOKEN: токен,
 Secret_Key: SECRET_KEY,
 });
 APIResponse.push (отговор['данни']);
връщане APIResponse;
 } улов (грешка) {
конзола.log (грешка);
 }
 };

И накрая, върнете формуляр с компонента reCAPTCHA. Този компонент приема референтната кука и ключа на сайта като подпори за конфигуриране и показване на приспособлението reCAPTCHA.

Когато потребител изпрати формуляра, компонентът изобразява съобщение за успех или грешка въз основа на стойността на валидното състояние на Token. Ако токенът на reCAPTCHA е валиден, което означава, че потребителят е изпълнил успешно предизвикателствата на reCAPTCHA, той показва съобщението за успех, в противен случай показва съобщението за грешка.

връщане (
"приложение">
„Заглавка на приложението“> 
"форма за влизане">


 {valid_token.length > 0 && valid_token[0].успех вярно
? <h3className="textSuccess">{SuccessMsg}h3>
: <h3className="textError">{ErrorMsg} h3>}


Потребителско име</p>
"текст" заместител =„Потребителско име...“ />




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


 className="recaptcha"
 sitekey={SITE_KEY}
 ref={captchaRef}
 />








износпо подразбиране Приложение

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

Създайте Express Backend

За да започнете, в основната директория на цялата папка на проекта, създайте експресен уеб сървър, и инсталирайте тези пакети:

npm инсталирайте express cors axios body-parser

Настройте експресния сървър

След това отворете файла index.js в папката на проекта на сървъра и добавете този код:

конст експрес = изискват("експресен")
конст аксиос = изискват("аксиос");
конст корс = изискват("корс");
конст приложение = експрес();
конст bodyParser = изискват("body-parser");
конст jsonParser = bodyParser.json();
конст PORT = process.env. ПРИСТАНИЩЕ || 8000;


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


app.post("/проверете-токен", асинхронен (req, res) => {
конст { reCAPTCHA_TOKEN, Secret_Key} = req.body;


опитвам {
позволявам отговор = изчакайте axios.post(` https://www.google.com/recaptcha/api/siteverify? тайна=${Secret_Key}&отговор=${reCAPTCHA_TOKEN}`);
конзола.log (response.data);


връщане res.status(200).json({
 успех:вярно,
 съобщение: „Токенът е проверен успешно“,
 verification_info: response.data
 });
 } улов(грешка) {
конзола.log (грешка);


връщане res.status(500).json({
 успех:невярно,
 съобщение: „Грешка при проверка на токена“
 })
 }
});
app.listen (ПОРТ, () => конзола.log(`Приложението е стартирано на порт ${ПОРТ}`));

Този код прави следното:

  • Сървърът дефинира Post маршрут, който прави асинхронна HTTP POST заявка към reCAPTCHA API на Google за проверете токена reCAPTCHA с помощта на Axios, предавайки секретния ключ за удостоверяване в URL адреса на заявката.
  • Ако reCAPTCHA токенът е успешно проверен, сървърът отговаря с JSON обект, съдържащ свойство „успех“, зададено на true, свойство „съобщение“ което показва, че токенът е бил успешно проверен, и свойство „verification_info“, съдържащо информация за отговора за потвърждение от Google API.
  • Ако възникне грешка по време на процеса на проверка, сървърът отговаря с JSON обект, съдържащ a свойството "success" е зададено на false и свойството "message", което показва, че е имало грешка при проверката на жетон.

Накрая стартирайте сървъра на възела и тествайте функционалността на функцията reCAPTCHA.

възел index.js

Могат ли reCAPTCHA да гарантират сигурност срещу спам ботове?

Според Google, неговата услуга reCAPTCHA има успеваемост от над 99%, което означава, че само малък процент спам може да заобиколи защитната функция reCAPTCHA.

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