Ahogy a webes és mobilalkalmazások egyre népszerűbbek, úgy nő a spam és más rosszindulatú tevékenységek kockázata is. A CAPTCHA-k hasznos biztonsági intézkedést jelenthetnek, amelyet érdemes integrálni az ilyen típusú biztonsági fenyegetések megelőzésére.
A CAPTCHA egy minimális biztonsági funkció, amelyet általában webes űrlapokkal integrálnak, hogy megakadályozzák a spambotok automatizált támadásait. Biztosítja, hogy az alkalmazáshoz hozzáférő felhasználó valóban ember, és ne egy rosszindulatú kódot futtató bot.
Mi az a CAPTCHA?
A CAPTCHA mozaikszó a Completely Automated Public Turing Test (Teljesen automatizált nyilvános Turing-teszt) rövidítése, amellyel meg lehet különböztetni a számítógépeket és az embereket. Ez egy számítógép által generált tesztre vonatkozik, amely ellenőrzi, hogy az alkalmazással interakcióba lépő adott felhasználó ember-e, és nem bot.
Különféle típusú CAPTCHA-tesztek léteznek, amelyeket integrálhat az alkalmazásba, például szöveg- és hangalapú CAPTCHA-tesztek. A legnépszerűbb és leghatékonyabb típus azonban a Google reCAPTCHA. Speciális kockázatelemzési algoritmusok segítségével ellenőrzi, hogy különbséget tegyen a valódi felhasználók és a robotok között.
A Google reCAPTCHA két verzióban érhető el:
- reCAPTCHA V3: Ez a verzió a háttérben fut, és a felhasználó viselkedése alapján határozza meg az általános pontszámot.
- reCAPTCHA V2: Ez a verzió a „Nem vagyok robot” jelölőnégyzetet helyezi el a hitelesítési űrlapon.
Ez az útmutató a Google reCAPTCHA V2 verzióját mutatja be. Olvassa el, hogy megtudja, hogyan integrálhatja a React alkalmazásba.
Regisztrálja a React alkalmazást a reCAPTCHA felügyeleti konzolon
A kezdéshez regisztrálnia kell alkalmazását a reCAPTCHA fejlesztői konzolján. Irány oda A Google reCAPTCHA felügyeleti konzolja, jelentkezzen be Google-fiókjával, és töltse ki a szükséges űrlapadatokat.
Adja meg a címke nevét, válassza ki reCAPTCHA V2, és a legördülő listában válassza ki a kérések ellenőrzését a „Nem vagyok robot” jelölőnégyzet használatával. Végül adja meg az alkalmazás domainnevét. Helyi fejlesztéshez írja be helyi kiszolgáló mint a domain név.
Miután regisztrálta az alkalmazást, a webhely egy új oldalra irányítja át az Ön által generált titkos és webhelykulcsokat.
Hozzon létre egy React klienst
Ez a projekt kettős: létrehoz egy React klienst, amely egy egyszerű bejelentkezési űrlapot jelenít meg a Google reCAPTCHA-val és egy Expressz háttérrendszer, amely POST-kérelmeket küld a reCAPTCHA API-jának, hogy ellenőrizze a tokent, amely azután generált, hogy a felhasználó befejezte a reCAPTCHA-t kihívás.
Hozzon létre egy projektmappát helyileg a projektfájlok tárolására. Következő, hozza létre a React alkalmazást és módosítsa az aktuális könyvtárat az ügyfél könyvtárára. Az ügyfélmappa gyökérkönyvtárában hozzon létre egy .env fájlt az API titkos kulcs és a helykulcs tárolására.
REACT_APP_reCAPTCHA_SITE_KEY = "webhely kulcsa"
REACT_APP_reCAPTCHA_SECRET_KEY = 'titkos kulcs'A projekt kódja megtalálható benne GitHub adattár.
Telepítse a szükséges csomagokat
Telepítse az Axiost, ezzel a könyvtárral HTTP-kéréseket küldhet a böngészőből és a React-Google-reCAPTCHA-ból. Ez a csomag React-specifikus megvalósítást biztosít a reCAPTCHA API számára.
npm install react-recaptcha-google axios --saveIntegrálja a Google reCAPTCHA-t a React alkalmazásba
Nyissa meg a src/App.js fájlt, törölje a React kódot, és adja hozzá az alábbi kódot:
Ez az összetevő egy egyszerű bejelentkezési űrlapot jelenít meg, amely tartalmazza a Google reCAPTCHA modult.
Először importálja a React, Axios és react-google-recaptcha csomagokat:
import React, { useState, useRef } tól től'reagál';
import Axios tól től"axiók";
import ReCAPTCHA tól től"react-google-recaptcha";Ezután határozzon meg három állapotváltozót: successMsg, errorMsg és validToken. Kódja frissíti ezeket az állapotokat az űrlap sikeres elküldése és a reCAPTCHA érvényesítése után. Ezenkívül szerezze be a webhelyet és a titkos kulcsokat az ENV-fájlból.
funkcióApp() {
const [SuccessMsg, setSuccessMsg] = useState("")
const [ErrorMsg, setErrorMsg] = useState("")
const [valid_token, setValidToken] = useState([]);
const SITE_KEY = process.env. REACT_APP_reCAPTCHA_SITE_KEY;
const SECRET_KEY = process.env. REACT_APP_reCAPTCHA_SECRET_KEY;
Határozzon meg egy useRef hookot, amely a reCAPTCHA összetevőre hivatkozik, hogy rögzítse a tokent, amely azután jön létre, hogy a felhasználó befejezte a reCAPTCHA kihívásokat.
const captchaRef = useRef(nulla);Ezután hozzon létre egy handleSubmit függvényt, amely meghívható, amikor a felhasználó elküldi a bejelentkezési űrlapot. Ez a függvény beszerzi a tokent a reCAPTCHA komponenstől, majd meghívja a Visszaállítás módszerrel állíthatja vissza a reCAPTCHA-t a későbbi ellenőrzések lehetővé tétele érdekében.
Ezenkívül ellenőrzi, hogy létezik-e a token, és meghívja a verifyToken függvényt a token ellenőrzéséhez. A token ellenőrzése után frissíti a validToken állapotát az API válaszadatokkal.
const handleSubmit = async (e) => {
e.preventDefault();
hagyja token = captchaRef.current.getValue();
captchaRef.current.reset();ha (token) {
hagyja érvényes_token = várja verifyToken (token);
setValidToken (valid_token);
ha (érvényes_token[0].siker igaz) {
konzol.log("ellenőrzött");
setSuccessMsg("Hurrá!! elküldted az űrlapot")
} más {
konzol.log("Nem ellenőrzött");
setErrorMsg(" Sajnálom!! Győződjön meg róla, hogy nem bot")
}
}
}
Végül határozza meg a verifyToken függvényt, amely egy POST-kérelmet küld egy Express szerver végpontnak az Axios használatával, átadva a reCAPTCHA tokent és a titkos kulcsot a kérés törzsében. Ha a kérés sikeres, a válaszadatokat az APIResponse tömbbe küldi, és ennek eredményeként visszaadja a tömböt.
const verifyToken = async (token) => {
hagyja APIResponse = [];próbáld ki {
hagyja válasz = várja Axios.post(` http://localhost: 8000/ellenőrzési token"., {
reCAPTCHA_TOKEN: token,
Secret_Key: SECRET_KEY,
});
APIResponse.push (válasz['adat']);
Visszatérés APIResponse;
} fogás (hiba) {
konzol.log (hiba);
}
};
Végül küldjön vissza egy űrlapot a reCAPTCHA összetevővel. Ez az összetevő felhasználja a referencia horgot és a webhely kulcsát kellékként a reCAPTCHA widget konfigurálásához és megjelenítéséhez.
Amikor egy felhasználó elküldi az űrlapot, az összetevő siker- vagy hibaüzenetet jelenít meg a validToken állapot értéke alapján. Ha a reCAPTCHA token érvényes, vagyis a felhasználó sikeresen teljesítette a reCAPTCHA kihívásokat, akkor a sikerüzenetet jeleníti meg, ellenkező esetben a hibaüzenetet.
Visszatérés ("Alkalmazás">"Alkalmazás fejléc"> "Bejelentkezési űrlap">
exportalapértelmezett App
Végül futtassa a fejlesztői kiszolgálót, és lépjen a böngészőjébe http://localhost: 3000 az eredmények megtekintéséhez.
Hozzon létre Express Backendet
A kezdéshez a teljes projektmappa gyökérkönyvtárában hozzon létre egy Express webszervert, és telepítse ezeket a csomagokat:
npm install express cors axios body-parserÁllítsa be az Express szervert
Ezután nyissa meg az index.js fájlt a szerver projekt mappájában, és adja hozzá ezt a kódot:
const expressz = igényelnek('Expressz')
const axiók = igényelnek("axiók");
const cors = igényelnek("cors");
const app = express();const bodyParser = igényelnek("testelemző");
const jsonParser = bodyParser.json();
const PORT = process.env. PORT || 8000;app.use (jsonParser);
app.use (cors());app.post("/verify-token", async (req, res) => {
const { reCAPTCHA_TOKEN, Secret_Key} = req.body;próbáld ki {
hagyja válasz = várja axios.post(` https://www.google.com/recaptcha/api/siteverify? titkos =${Secret_Key}&válasz=${reCAPTCHA_TOKEN}`);
konzol.log (response.data);Visszatérés res.status(200).json({
siker:igaz,
üzenet: "Token sikeresen ellenőrizve",
verification_info: response.data
});
} fogás(hiba) {
konzol.log (hiba);Visszatérés res.status(500).json({
siker:hamis,
üzenet: "Hiba a token ellenőrzésekor"
})
}
});
app.listen (PORT, () => konzol.log(`Az alkalmazás porton indult ${PORT}`));
Ez a kód a következőket teszi:
- A szerver meghatároz egy bejegyzési útvonalat, amely aszinkron HTTP POST kérést küld a Google reCAPTCHA API-jának ellenőrizze a reCAPTCHA tokent az Axios segítségével, és adja át a titkos kulcsot a hitelesítéshez a kérelem URL-jében.
- Ha a reCAPTCHA token sikeresen ellenőrzése megtörtént, a szerver egy JSON-objektummal válaszol, amely egy "success" tulajdonságot igaz értékre állítva, egy "message" tulajdonságot tartalmaz. jelzi, hogy a token ellenőrzése sikeresen megtörtént, valamint egy „verification_info” tulajdonság, amely információkat tartalmaz a Google ellenőrző válaszáról API.
- Ha hiba történik az ellenőrzési folyamat során, a kiszolgáló egy JSON objektummal válaszol, amely tartalmazza a a "success" tulajdonság false értékre van állítva, és egy "message" tulajdonság azt jelzi, hogy hiba történt a jelképes.
Végül futtassa a csomópontszervert, és tesztelje a reCAPTCHA funkció működését.
csomópont index.jsA reCAPTCHA garantálhatja a spamrobotok elleni biztonságot?
A Google szerint a reCAPTCHA szolgáltatás sikeressége 99% feletti, ami azt jelenti, hogy a spamek csak kis százaléka képes megkerülni a reCAPTCHA biztonsági funkciót.
A reCAPTCHA nem bolondbiztos, mivel az elszánt rossz színészek még mindig találhatnak megoldást. De továbbra is alapvető eszköz, amely jelentősen csökkentheti a spamrobotok kockázatát.
