Integruokite „Google reCAPTCHA“ į „React“ programą

Populiarėjant žiniatinklio ir mobiliosioms programoms, kyla ir nepageidaujamo pašto bei kitos kenkėjiškos veiklos rizika. CAPTCHA gali būti patogi saugos priemonė, kurią verta integruoti siekiant užkirsti kelią tokio pobūdžio grėsmėms saugumui.

CAPTCHA yra minimali saugos funkcija, paprastai integruota į žiniatinklio formas, kad būtų išvengta automatinių šiukšlių atakų. Tai užtikrina, kad vartotojas, pasiekiantis programą, iš tikrųjų yra žmogus, o ne kenkėjišką kodą vykdantis robotas.

Kas yra CAPTCHA?

Santrumpa CAPTCHA reiškia visiškai automatizuotą viešąjį Turingo testą, skirtą atskirti kompiuterius ir žmones. Tai reiškia kompiuterio sukurtą testą, kuris patikrina, ar konkretus vartotojas, sąveikaujantis su jūsų programa, yra žmogus, o ne robotas.

Yra įvairių tipų CAPTCHA testų, kuriuos galite integruoti į savo programą, pvz., teksto ir garso CAPTCHA. Tačiau populiariausias ir efektyviausias tipas yra Google reCAPTCHA. Ji patikrina, ar atskirti tikrus vartotojus ir robotus, naudodama pažangius rizikos analizės algoritmus.

„Google reCAPTCHA“ yra dviejų versijų:

• reCAPTCHA V3: ši versija veikia fone ir nustato bendrą balą pagal vartotojo elgesį.
• reCAPTCHA V2: šioje versijoje autentifikavimo formoje yra žymimasis laukelis „Aš nesu robotas“.

Šiame vadove bus nagrinėjama „Google reCAPTCHA V2“. Skaitykite toliau, kad sužinotumėte, kaip jį integruoti į „React“ programą.

Užregistruokite „React“ programą „reCAPTCHA“ administratoriaus pulte

Norėdami pradėti, turite užregistruoti programą reCAPTCHA kūrėjų pulte. Eikite į „Google“ reCAPTCHA administratoriaus pultas, prisijunkite naudodami „Google“ paskyrą ir užpildykite reikiamą formos informaciją.

Nurodykite etiketės pavadinimą, pasirinkite reCAPTCHA V2ir išskleidžiamajame laukelyje pasirinkite patvirtinimo užklausas naudodami žymimąjį laukelį „Aš ne robotas“. Galiausiai pateikite savo programos domeno pavadinimą. Vietinei plėtrai įveskite vietinis šeimininkas kaip domeno vardas.

Kai programa bus užregistruota, svetainė nukreips jus į naują puslapį su sugeneruota paslaptimi ir svetainės raktais.

Sukurkite „React“ klientą

Šis projektas yra dvejopas: sukursite React klientą, kuris pateiks paprastą prisijungimo formą su Google reCAPTCHA ir Express backend, kuri teikia POST užklausas į reCAPTCHA API, kad patikrintų prieigos raktą, sugeneruotą vartotojui užbaigus reCAPTCHA iššūkis.

Vietoje sukurkite projekto aplanką, kuriame būtų saugomi projekto failai. Kitas, sukurti programą „React“. ir pakeiskite dabartinį katalogą į kliento katalogą. Savo kliento aplanko šakniniame kataloge sukurkite .env failą, kad išsaugotumėte API slaptąjį raktą ir svetainės raktą.

REACT_APP_reCAPTCHA_SITE_KEY = "svetainės raktas"
REACT_APP_reCAPTCHA_SECRET_KEY = 'slaptasis raktas'

Šio projekto kodą galite rasti jame GitHub saugykla.

Įdiekite reikiamus paketus

Įdiekite „Axios“, šią biblioteką naudosite HTTP užklausoms iš naršyklės ir „React-Google-reCAPTCHA“ pateikti. Šiame pakete pateikiamas specifinis „React“ reCAPTCHA API diegimas.

npm įdiegti react-recaptcha-google axios --save

Integruokite „Google reCAPTCHA“ į „React“ programą

Atidaryk src/App.js failą, ištrinkite „React“ kodą ir pridėkite toliau esantį kodą:

Šis komponentas pateiks paprastą prisijungimo formą, kurioje yra „Google reCAPTCHA“ valdiklis.

Pirmiausia importuokite „React“, „Axios“ ir „react-google-recaptcha“ paketus:

importuoti Reaguoti, { useState, useRef } iš'reaguoti';
importuoti Axios iš"aksios";
importuoti ReCAPTCHA iš„react-google-recaptcha“;

Tada apibrėžkite tris būsenos kintamuosius: successMsg, errorMsg ir validToken. Sėkmingai pateikus formą ir patvirtinus reCAPTCHA, jūsų kodas atnaujins šias būsenas. Be to, gaukite svetainę ir slaptus raktus iš ENV failo.

funkcijaProgramėlė() {
konst [SuccessMsg, setSuccessMsg] = useState("")
konst [ErrorMsg, setErrorMsg] = useState("")
konst [valid_token, setValidToken] = useState([]);
konst SITE_KEY = procesas.env. REACT_APP_reCAPTCHA_SITE_KEY;
konst SECRET_KEY = process.env. REACT_APP_reCAPTCHA_SECRET_KEY;

Apibrėžkite „useRef“ kabliuką, nurodantį „reCAPTCHA“ komponentą, kad užfiksuotumėte prieigos raktą, sugeneruotą vartotojui įvykdžius „reCAPTCHA“ iššūkius.

konst captchaRef = useRef(nulinis);

Tada sukurkite funkciją HandelSubmit, kad iškviestumėte, kai vartotojas pateikia prisijungimo formą. Ši funkcija gauna prieigos raktą iš reCAPTCHA komponento ir tada iškviečia nustatyti iš naujo būdas iš naujo nustatyti reCAPTCHA, kad būtų galima atlikti tolesnius patikrinimus.

Be to, jis patikrina, ar prieigos raktas egzistuoja, ir iškviečia funkciją verifyToken, kad patikrintų prieigos raktą. Patvirtinus prieigos raktą, jis atnaujins validToken būseną su API atsako duomenimis.

konst rankenaPateikti = async (e) => {
 e.preventDefault();
leisti token = captchaRef.current.getValue();
 captchaRef.current.reset();
jeigu (žetonas) {
leisti galiojantis_žetonas = laukti verifyToken (žetonas);
 setValidToken (valid_token);
jeigu (galiojantis_žetonas[0].sėkmė tiesa) {
konsolė.log("patikrintas");
 setSuccessMsg("Hurray!! Jūs pateikėte formą")
 } Kitas {
konsolė.log("nepatikrinta");
 setErrorMsg("Atsiprašau!! Patvirtinkite, kad nesate botas")
 }
 }
 }

Galiausiai apibrėžkite funkciją „verifyToken“, kuri išsiųs POST užklausą „Express“ serverio galutiniam taškui naudojant „Axios“, perduodant reCAPTCHA prieigos raktą ir slaptąjį raktą užklausos turinyje. Jei užklausa yra sėkminga, ji nusiunčia atsakymo duomenis į APIResponse masyvą ir grąžina masyvą.

konst verifyToken = async (žetonas) => {
leisti APIResponse = [];
bandyti {
leisti atsakymas = laukti Axios.post(` http://localhost: 8000 / patvirtinimo raktas"., {
 reCAPTCHA_TOKEN: prieigos raktas,
 Secret_Key: SECRET_KEY,
 });
 APIResponse.push (atsakymas['duomenys']);
grąžinti APIResponse;
 } sugauti (klaida) {
konsolė.log (klaida);
 }
 };

Galiausiai grąžinkite formą su reCAPTCHA komponentu. Šis komponentas naudoja nuorodos kabliuką ir svetainės raktą kaip reCAPTCHA valdiklį konfigūruoti ir rodyti.

Kai vartotojas pateikia formą, komponentas pateikia sėkmės arba klaidos pranešimą, pagrįstą validToken būsenos reikšme. Jei reCAPTCHA prieigos raktas galioja, tai reiškia, kad vartotojas sėkmingai atliko reCAPTCHA iššūkius, jame rodomas sėkmės pranešimas, kitu atveju – klaidos pranešimas.

grąžinti (
"Programėlė">
"Programos antraštė"> 
"prisijungimo forma">


 {valid_token.length > 0 && galiojantis_žetonas[0].sėkmė tiesa
? <h3klasės pavadinimas="tekstas sėkmės">{SuccessMsg}h3>
: <h3klasės pavadinimas="teksto klaida">{ErrorMsg} h3>}

Vartotojo vardas</p>
"tekstas" vietos rezervuaras="Vartotojo vardas..." />

Slaptažodis</p>
"Slaptažodis" vietos rezervavimo priemonė = "Slaptažodis..." />
 className="recaptcha"
 sitekey={SITE_KEY}
 ref={captchaRef}
 />
"Pateikti">Pateikti</button>
 </form>
 </div>
 </header>
 </div>
 );
}


eksportuotinumatytas Programėlė

Galiausiai paleiskite kūrimo serverį ir eikite į savo naršyklę http://localhost: 3000, kad pamatytumėte rezultatus.

Sukurkite „Express Backend“.

Norėdami pradėti, viso projekto aplanko šakniniame kataloge, sukurti „Express“ žiniatinklio serverį, ir įdiekite šiuos paketus:

npm įdiegti express cors axios kūno analizatorių

Nustatykite Express serverį

Tada atidarykite failą index.js serverio projekto aplanke ir pridėkite šį kodą:

konst išreikšti = reikalauti("išreikšti")
konst axios = reikalauti("aksios");
konst cors = reikalauti("cors");
konst programa = express ();
konst bodyParser = reikalauti("kūno analizatorius");
konst jsonParser = bodyParser.json();
konst PORT = process.env. UOSTAS || 8000;
app.use (jsonParser);
app.use (cors());
app.post("/verify-token", async (req, res) => {
konst { reCAPTCHA_TOKEN, Secret_Key} = req.body;
bandyti {
leisti atsakymas = laukti axios.post(` https://www.google.com/recaptcha/api/siteverify? paslaptis =${Secret_Key}&atsakymas=${reCAPTCHA_TOKEN}`);
konsolė.log (response.data);
grąžinti res.status(200.json({
 sėkmė:tiesa,
 žinutė: „Žetonas sėkmingai patvirtintas“,
 verification_info: atsakymas.duomenys
 });
 } sugauti(klaida) {
konsolė.log (klaida);
grąžinti res.status(500.json({
 sėkmė:klaidinga,
 žinutė: „Klaida tikrinant prieigos raktą“
 })
 }
});
app.listen (PORT, () => konsolė.log(„Programa paleista prievade ${PORT}`));

Šis kodas atlieka šiuos veiksmus:

• Serveris apibrėžia siuntimo maršrutą, kuris pateikia asinchroninę HTTP POST užklausą į Google reCAPTCHA API patikrinkite „reCAPTCHA“ prieigos raktą naudodami „Axios“, perduodant slaptąjį autentifikavimo raktą užklausos URL.
• Jei reCAPTCHA prieigos raktas sėkmingai patikrintas, serveris atsako su JSON objektu, kurio ypatybė „sėkmės“ nustatyta į „true“, ypatybę „pranešimas“ nurodantis, kad prieigos raktas buvo sėkmingai patvirtintas, ir ypatybę „verification_info“, kurioje yra informacija apie patvirtinimo atsakymą iš „Google“ API.
• Jei tikrinimo proceso metu įvyksta klaida, serveris atsako su JSON objektu, kuriame yra a ypatybė „sėkmės“ nustatyta į false, o ypatybė „message“, nurodanti, kad tikrinant įvyko klaida. žetonas.

Galiausiai paleiskite mazgo serverį ir išbandykite reCAPTCHA funkcijos funkcionalumą.

mazgo indeksas.js

Ar „reCAPTCHA“ gali užtikrinti apsaugą nuo šiukšlių?

Pasak „Google“, jos „reCAPTCHA“ paslaugos sėkmės rodiklis viršija 99%, o tai reiškia, kad tik nedidelė dalis šlamšto gali apeiti „reCAPTCHA“ saugos funkciją.

„reCAPTCHA“ nėra patikima, nes ryžtingi blogi aktoriai vis tiek gali rasti sprendimų. Tačiau tai išlieka esminiu įrankiu, galinčiu žymiai sumažinti nepageidaujamų el. laiškų riziką.