Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

S rostoucí popularitou webových a mobilních aplikací se zvyšuje i riziko spamu a jiné škodlivé činnosti. CAPTCHA mohou být užitečným bezpečnostním opatřením, které stojí za to integrovat, abyste zabránili těmto typům bezpečnostních hrozeb.

CAPTCHA je funkce minimálního zabezpečení, běžně integrovaná s webovými formuláři, aby se zabránilo automatizovaným útokům spambotů. Zajišťuje, že uživatel přistupující k aplikaci je skutečně člověk, a ne bot spouštějící škodlivý kód.

Co je CAPTCHA?

Zkratka CAPTCHA znamená Kompletně automatizovaný veřejný Turingův test, který odliší počítače a lidi. Odkazuje na počítačově generovaný test, který kontroluje, zda konkrétní uživatel interagující s vaší aplikací je člověk a ne bot.

Existují různé typy testů CAPTCHA, které můžete integrovat do své aplikace, jako jsou textové a zvukové CAPTCHA. Nejoblíbenějším a nejefektivnějším typem je však Google reCAPTCHA. Pomocí pokročilých algoritmů analýzy rizik kontroluje rozlišení mezi skutečnými uživateli a roboty.

instagram viewer

Google reCAPTCHA je k dispozici ve dvou verzích:

  • reCAPTCHA V3: Tato verze běží na pozadí a určuje celkové skóre na základě chování uživatele.
  • reCAPTCHA V2: Tato verze umístí do ověřovacího formuláře zaškrtávací políčko „Nejsem robot“.

Tato příručka prozkoumá Google reCAPTCHA V2. Čtěte dále a dozvíte se, jak jej integrovat do aplikace React.

Zaregistrujte aplikaci React v administrátorské konzoli reCAPTCHA

Chcete-li začít, musíte svou aplikaci zaregistrovat na vývojářské konzoli reCAPTCHA. Zamiřte k Administrátorská konzole reCAPTCHA společnosti Google, přihlaste se pomocí svého účtu Google a vyplňte požadované údaje formuláře.

Zadejte název štítku, vyberte reCAPTCHA V2a v rozevíracím seznamu vyberte požadavky na ověření pomocí zaškrtávacího políčka „Nejsem robot“. Nakonec zadejte název domény vaší aplikace. Pro místní rozvoj typ localhost jako název domény.

Jakmile je vaše aplikace zaregistrována, web vás přesměruje na novou stránku s vygenerovaným tajným klíčem a klíči webu.

Vytvořte klienta React

Tento projekt je dvojí: vytvoříte klienta React, který vykreslí jednoduchý přihlašovací formulář s Google reCAPTCHA a Expresní backend, který odesílá požadavky POST na rozhraní API reCAPTCHA k ověření tokenu vygenerovaného poté, co uživatel dokončí reCAPTCHA výzva.

Vytvořte lokálně složku projektu, do které budou uloženy soubory projektu. Další, vytvořit aplikaci React a změňte aktuální adresář na adresář klienta. V kořenovém adresáři složky vašeho klienta vytvořte soubor .env pro uložení tajného klíče API a klíče webu.

REACT_APP_reCAPTCHA_SITE_KEY = 'site key'
REACT_APP_reCAPTCHA_SECRET_KEY = 'tajný klíč'

Kód tohoto projektu najdete v něm úložiště GitHub.

Nainstalujte požadované balíčky

Nainstalujte Axios, budete tuto knihovnu používat k vytváření požadavků HTTP z prohlížeče a React-Google-reCAPTCHA. Tento balíček poskytuje implementaci specifickou pro React pro rozhraní reCAPTCHA API.

npm install reagovat-recaptcha-google axios --save

Integrujte Google reCAPTCHA do aplikace React

Otevři src/App.js soubor, smažte standardní kód React a přidejte kód níže:

Tato komponenta vykreslí jednoduchý přihlašovací formulář, který obsahuje widget Google reCAPTCHA.

Nejprve naimportujte balíčky React, Axios a respond-google-recaptcha:

import Reagovat, { useState, useRef } z'reagovat';
import Axios z'axios';
import ReCAPTCHA z'react-google-recaptcha';

Poté definujte tři stavové proměnné: successMsg, errorMsg a validToken. Váš kód tyto stavy aktualizuje po úspěšném odeslání formuláře a ověření reCAPTCHA. Kromě toho získejte web a tajné klíče ze souboru ENV.

funkceAplikace() {
konst [SuccessMsg, setSuccessMsg] = useState("")
konst [ErrorMsg, setErrorMsg] = useState("")
konst [platný_token, setValidToken] = useState([]);
konst SITE_KEY = process.env. REACT_APP_reCAPTCHA_SITE_KEY;
konst SECRET_KEY = process.env. REACT_APP_reCAPTCHA_SECRET_KEY;

Definujte háček useRef, který odkazuje na komponentu reCAPTCHA, pro zachycení tokenu vygenerovaného poté, co uživatel dokončí výzvy reCAPTCHA.

konst captchaRef = useRef(nula);

Poté vytvořte funkci handleSubmit, která se bude volat, když uživatel odešle přihlašovací formulář. Tato funkce získá token z komponenty reCAPTCHA a poté zavolá resetovat způsob resetování reCAPTCHA, aby bylo možné provést následné kontroly.

Kromě toho zkontroluje, zda token existuje, a zavolá funkci authenticToken, která token ověří. Jakmile token ověří, aktualizuje stav validToken pomocí dat odpovědi API.

konst handleSubmit = asynchronní (e) => {
 e.preventDefault();
nechat token = captchaRef.current.getValue();
 captchaRef.current.reset();
-li (token) {
nechat platný_token = čekat ověřitToken (token);
 setValidToken (platný_token);
-li (platný_token[0].úspěch skutečný) {
řídicí panel.log("ověřeno");
 setSuccessMsg("Hurá!! odeslali jste formulář")
 } jiný {
řídicí panel.log("Neověřeno");
 setErrorMsg(" Promiňte!! Ověřte, že nejste robot")
 }
 }
 }

Nakonec definujte funkci authenticToken, která odešle požadavek POST na koncový bod serveru Express pomocí Axios a předá token reCAPTCHA a tajný klíč v těle požadavku. Pokud je požadavek úspěšný, odešle data odpovědi do pole APIResponse a jako výsledek vrátí pole.

konst ověřitToken = asynchronní (token) => {
nechat APIResponse = [];
Snaž se {
nechat odpověď = čekat Axios.post(` http://localhost: 8000/ověřovací token`, {
 reCAPTCHA_TOKEN: token,
 Tajný_klíč: SECRET_KEY,
 });
 APIResponse.push (odpověď['data']);
vrátit se APIResponse;
 } chytit (chyba) {
řídicí panel.log (chyba);
 }
 };

Nakonec vraťte formulář s komponentou reCAPTCHA. Tato komponenta používá referenční háček a klíč webu jako rekvizity pro konfiguraci a zobrazení widgetu reCAPTCHA.

Když uživatel odešle formulář, komponenta vykreslí úspěšnou nebo chybovou zprávu na základě hodnoty stavu validToken. Pokud je token reCAPTCHA platný, což znamená, že uživatel úspěšně dokončil výzvy reCAPTCHA, zobrazí se zpráva o úspěchu, v opačném případě se zobrazí chybová zpráva.

vrátit se (
"Aplikace">
"Záhlaví aplikace"> 
"přihlašovací formulář">


 {valid_token.length > 0 && platný_token[0].úspěch skutečný
? <h3jméno třídy="textSuccess">{SuccessMsg}h3>
: <h3jméno třídy="textError">{ErrorMsg} h3>}


Uživatelské jméno</p>
"text" zástupný symbol="Uživatelské jméno..." />




Heslo</p>
"Heslo" zástupný symbol = "Heslo..." />


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








vývoznívýchozí Aplikace

Nakonec spusťte vývojový server a přejděte do svého prohlížeče http://localhost: 3000 pro zobrazení výsledků.

Vytvořte expresní backend

Chcete-li začít, v kořenovém adresáři celé složky projektu vytvořit expresní webový server, a nainstalujte tyto balíčky:

npm install express cors axios body-parser

Nastavte expresní server

Dále otevřete soubor index.js ve složce projektu serveru a přidejte tento kód:

konst vyjádřit = vyžadovat('vyjádřit')
konst axios = vyžadovat('axios');
konst kors = vyžadovat('cors');
konst app = express();
konst bodyParser = vyžadovat('body-parser');
konst jsonParser = bodyParser.json();
konst PORT = process.env. PORT || 8000;


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


app.post("/verify-token", asynchronní (req, res) => {
konst { reCAPTCHA_TOKEN, Secret_Key} = req.body;


Snaž se {
nechat odpověď = čekat axios.post(` https://www.google.com/recaptcha/api/siteverify? tajemství =${Secret_Key}&response=${reCAPTCHA_TOKEN}`);
řídicí panel.log (response.data);


vrátit se res.status(200.json({
 úspěch:skutečný,
 zpráva: "Token úspěšně ověřen",
 informace o ověření: response.data
 });
 } chytit(chyba) {
řídicí panel.log (chyba);


vrátit se res.status(500.json({
 úspěch:Nepravdivé,
 zpráva: "Chyba při ověřování tokenu"
 })
 }
});
app.listen (PORT, () => řídicí panel.log(`Aplikace byla spuštěna na portu ${PORT}`));

Tento kód dělá následující:

  • Server definuje cestu Post, která odešle asynchronní požadavek HTTP POST do rozhraní Google reCAPTCHA API ověřte token reCAPTCHA pomocí Axios a předejte tajný klíč pro ověření v adrese URL požadavku.
  • Pokud je token reCAPTCHA úspěšně ověřen, server odpoví objektem JSON obsahujícím vlastnost „success“ nastavenou na true, vlastnost „message“. označující, že token byl úspěšně ověřen, a vlastnost „verification_info“ obsahující informace o ověřovací odpovědi od společnosti Google API.
  • Pokud během procesu ověřování dojde k chybě, server odpoví objektem JSON obsahujícím a vlastnost "success" nastavena na hodnotu false a vlastnost "message" označující, že při ověřování došlo k chybě žeton.

Nakonec spusťte server uzlu a otestujte funkčnost funkce reCAPTCHA.

node index.js

Může reCAPTCHA zaručit bezpečnost před spamboty?

Podle Googlu má jeho služba reCAPTCHA úspěšnost přes 99 %, což znamená, že jen malé procento spamu dokáže obejít bezpečnostní funkci reCAPTCHA.

reCAPTCHA není spolehlivá, protože odhodlaní špatní herci stále mohou najít řešení. Zůstává však nezbytným nástrojem, který může výrazně snížit riziko ze spambotů.