Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Wraz ze wzrostem popularności aplikacji internetowych i mobilnych rośnie również ryzyko spamu i innych złośliwych działań. CAPTCHA mogą być przydatnym środkiem bezpieczeństwa, który warto zintegrować, aby zapobiegać tego typu zagrożeniom bezpieczeństwa.

CAPTCHA to minimalna funkcja bezpieczeństwa, często zintegrowana z formularzami internetowymi w celu zapobiegania automatycznym atakom robotów spamujących. Zapewnia, że ​​użytkownik uzyskujący dostęp do aplikacji jest rzeczywiście człowiekiem, a nie botem wykonującym złośliwy kod.

Co to jest CAPTCHA?

Akronim CAPTCHA oznacza całkowicie zautomatyzowany publiczny test Turinga, który odróżnia komputery od ludzi. Odnosi się do testu generowanego komputerowo, który sprawdza, czy określony użytkownik wchodzący w interakcję z twoją aplikacją jest człowiekiem, a nie botem.

Istnieją różne typy testów CAPTCHA, które można zintegrować z aplikacją, takie jak CAPTCHA tekstowe i dźwiękowe. Jednak najpopularniejszym i najskuteczniejszym typem jest Google reCAPTCHA. Sprawdza, aby odróżnić prawdziwych użytkowników od botów za pomocą zaawansowanych algorytmów analizy ryzyka.

instagram viewer

Google reCAPTCHA występuje w dwóch wersjach:

  • reCAPTCHA V3: Ta wersja działa w tle i określa ogólny wynik na podstawie zachowania użytkownika.
  • reCAPTCHA V2: Ta wersja umieszcza pole wyboru „Nie jestem robotem” w formularzu uwierzytelniającym.

W tym przewodniku poznasz Google reCAPTCHA V2. Czytaj dalej, aby dowiedzieć się, jak zintegrować go z aplikacją React.

Zarejestruj aplikację React w konsoli administracyjnej reCAPTCHA

Aby rozpocząć, musisz zarejestrować swoją aplikację w konsoli programisty reCAPTCHA. Udaj się do Konsola administracyjna reCAPTCHA Google, zaloguj się na swoje konto Google i wypełnij wymagane dane formularza.

Podaj nazwę etykiety, wybierz reCAPTCHA V2, a następnie w rozwijanym polu wybierz prośby o weryfikację, zaznaczając pole wyboru „Nie jestem robotem”. Na koniec podaj nazwę domeny swojej aplikacji. W przypadku rozwoju lokalnego wpisz Lokalny Gospodarz jako nazwa domeny.

Po zarejestrowaniu Twojej aplikacji witryna przekieruje Cię do nowej strony z wygenerowanymi tajnymi kluczami witryny.

Stwórz klienta React

Ten projekt jest dwojaki: stworzysz klienta React, który renderuje prosty formularz logowania z Google reCAPTCHA i Express backend, który wysyła żądania POST do interfejsu API reCAPTCHA w celu weryfikacji tokena wygenerowanego po ukończeniu przez użytkownika reCAPTCHA wyzwanie.

Utwórz lokalnie folder projektu, aby pomieścić pliki projektu. Następny, stworzyć aplikację React i zmień bieżący katalog na katalog klienta. W katalogu głównym folderu klienta utwórz plik .env do przechowywania tajnego klucza interfejsu API i klucza witryny.

REACT_APP_reCAPTCHA_SITE_KEY = 'kluczem Strona'
REACT_APP_reCAPTCHA_SECRET_KEY = 'sekretny klucz'

Możesz znaleźć kod tego projektu w jego Repozytorium GitHub.

Zainstaluj wymagane pakiety

Zainstaluj Axios, będziesz używać tej biblioteki do wysyłania żądań HTTP z przeglądarki i React-Google-reCAPTCHA. Ten pakiet zawiera specyficzną dla React implementację interfejsu API reCAPTCHA.

npm installreact-recaptcha-google axios --save

Zintegruj Google reCAPTCHA z aplikacją React

Otworzyć plik src/App.js, usuń szablonowy kod React i dodaj poniższy kod:

Ten komponent wyświetli prosty formularz logowania, który zawiera widżet Google reCAPTCHA.

Najpierw zaimportuj pakiety React, Axios i react-google-recaptcha:

import Zareaguj, { useState, useRef } z'reagować';
import Aksjos z„osi”;
import ReCAPTCHA z„React-google-recaptcha”;

Następnie zdefiniuj trzy zmienne stanu: successMsg, errorMsg i validToken. Twój kod zaktualizuje te stany po pomyślnym przesłaniu formularza i weryfikacji reCAPTCHA. Dodatkowo pobierz witrynę i tajne klucze z pliku ENV.

funkcjonowaćAplikacja() {
konst [SuccessMsg, setSuccessMsg] = useState("")
konst [BłądMsg, setErrorMsg] = useState("")
konst [ważny_token, ustaw ważny token] = useState([]);
konst SITE_KEY = proces.env. REACT_APP_reCAPTCHA_SITE_KEY;
konst SECRET_KEY = proces.env. REACT_APP_reCAPTCHA_SECRET_KEY;

Zdefiniuj hak useRef, który odwołuje się do komponentu reCAPTCHA, aby przechwycić token wygenerowany po ukończeniu przez użytkownika wyzwania reCAPTCHA.

konst captchaRef = useRef(zero);

Następnie utwórz funkcję handleSubmit, która będzie wywoływana, gdy użytkownik prześle formularz logowania. Ta funkcja uzyskuje token z komponentu reCAPTCHA, a następnie wywołuje metodę Resetowanie metodę resetowania reCAPTCHA, aby umożliwić kolejne kontrole.

Ponadto sprawdza, czy token istnieje, i wywołuje funkcję validToken w celu zweryfikowania tokena. Po zweryfikowaniu tokena zaktualizuje stan validToken za pomocą danych odpowiedzi interfejsu API.

konst uchwyt Prześlij = asynchroniczny (e) => {
 e.preventDefault();
pozwalać token = captchaRef.current.getValue();
 captchaRef.bieżący.reset();
Jeśli (znak) {
pozwalać ważny_token = czekać na weryfikujToken (token);
 setValidToken (ważny_token);
Jeśli (ważny_token[0].powodzenie PRAWDA) {
konsola.dziennik(„zweryfikowany”);
 setSuccessMsg("Hurra!! wysłałeś formularz")
 } w przeciwnym razie {
konsola.dziennik("Nie zweryfikowany");
 setErrorMsg(" Przepraszam!! Potwierdź, że nie jesteś botem")
 }
 }
 }

Na koniec zdefiniuj funkcję validToken, która wyśle ​​żądanie POST do punktu końcowego serwera Express za pomocą Axios, przekazując token reCAPTCHA i tajny klucz w treści żądania. Jeśli żądanie zakończy się pomyślnie, przekazuje dane odpowiedzi do tablicy APIResponse i zwraca tablicę jako wynik.

konst weryfikujToken = asynchroniczny (token) => {
pozwalać APIResponse = [];
próbować {
pozwalać odpowiedź = czekać na Axios.post(` http://localhost: 8000/weryfikuj-token`, {
 reCAPTCHA_TOKEN: token,
 Tajny klucz: SECRET_KEY,
 });
 APIResponse.push (odpowiedź['dane']);
powrót Odpowiedź API;
 } złapać (błąd) {
konsola.log (błąd);
 }
 };

Na koniec zwróć formularz z komponentem reCAPTCHA. Ten komponent przyjmuje hak referencyjny i klucz witryny jako rekwizyty do konfigurowania i wyświetlania widżetu reCAPTCHA.

Gdy użytkownik przesyła formularz, komponent wyświetla komunikat o powodzeniu lub błędzie na podstawie wartości stanu validToken. Jeśli token reCAPTCHA jest ważny, co oznacza, że ​​użytkownik pomyślnie ukończył wyzwania reCAPTCHA, wyświetla komunikat o powodzeniu, w przeciwnym razie wyświetla komunikat o błędzie.

powrót (
„Aplikacja”>
„Nagłówek aplikacji”> 
"Forma loginu">


 {ważny_token.długość > 0 && ważny_token[0].powodzenie PRAWDA
? <h3Nazwa klasy=„tekstSukces”>{SuccessMsg}h3>
: <h3Nazwa klasy=„błąd tekstu”>{komunikat o błędzie} h3>}


Nazwa użytkownika</p>
"tekst" symbol zastępczy="Nazwa użytkownika..." />




hasło</p>
"hasło" symbol zastępczy = "Hasło..." />


 nazwa klasy=„powtórka”
 klucz witryny={SITE_KEY}
 ref={captchaRef}
 />








eksportdomyślny Aplikacja

Na koniec uruchom serwer programistyczny i przejdź do przeglądarki http://localhost: 3000, aby zobaczyć wyniki.

Utwórz zaplecze Express

Aby rozpocząć, w katalogu głównym całego folderu projektu, utwórz serwer sieciowy Express, i zainstaluj te pakiety:

npm install express cors axios body-parser

Skonfiguruj serwer ekspresowy

Następnie otwórz plik index.js w folderze projektu serwera i dodaj ten kod:

konst ekspres = wymagać('wyrazić')
konst osie = wymagać(„osi”);
konst kors = wymagać(„kors”);
konst aplikacja = ekspres();
konst analizator ciała = wymagać(„parser ciała”);
konst jsonParser = bodyParser.json();
konst PORT = proces.env. PORT || 8000;


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


aplikacja.post("/weryfikuj-token", asynchroniczny (wymaganie, res) => {
konst { reCAPTCHA_TOKEN, Secret_Key} = req.body;


próbować {
pozwalać odpowiedź = czekać na axios.post(` https://www.google.com/recaptcha/api/siteverify? sekret =${Secret_Key}&odpowiedź=${reCAPTCHA_TOKEN}`);
konsola.log (dane odpowiedzi);


powrót res.status(200.json({
 powodzenie:PRAWDA,
 wiadomość: "Token pomyślnie zweryfikowany",
 informacja_weryfikacyjna: dane.odpowiedzi
 });
 } złapać(błąd) {
konsola.log (błąd);


powrót res.status(500.json({
 powodzenie:FAŁSZ,
 wiadomość: „Błąd weryfikacji tokena”
 })
 }
});
app.listen (PORT, () => konsola.dziennik(`Aplikacja uruchomiona na porcie ${PORT}`));

Ten kod wykonuje następujące czynności:

  • Serwer definiuje trasę Post, która wysyła asynchroniczne żądanie HTTP POST do interfejsu API reCAPTCHA Google w celu zweryfikuj token reCAPTCHA za pomocą Axios, przekazując tajny klucz do uwierzytelnienia w adresie URL żądania.
  • Jeśli token reCAPTCHA zostanie pomyślnie zweryfikowany, serwer odpowiada obiektem JSON zawierającym właściwość „success” ustawioną na wartość true, właściwość „message” wskazujące, że token został pomyślnie zweryfikowany, oraz właściwość „verification_info” zawierająca informacje o odpowiedzi weryfikacyjnej od Google API.
  • Jeśli podczas procesu weryfikacji wystąpi błąd, serwer odpowiada obiektem JSON zawierającym a właściwość „success” jest ustawiona na wartość false, a właściwość „message” wskazuje, że wystąpił błąd podczas weryfikowania znak.

Na koniec uruchom serwer węzłów i przetestuj funkcjonalność funkcji reCAPTCHA.

węzeł index.js

Czy reCAPTCHA może zagwarantować ochronę przed robotami spamującymi?

Według Google, jego usługa reCAPTCHA ma wskaźnik sukcesu wynoszący ponad 99%, co oznacza, że ​​tylko niewielki procent spamu może ominąć funkcję bezpieczeństwa reCAPTCHA.

reCAPTCHA nie jest niezawodny, ponieważ zdeterminowani złoczyńcy wciąż mogą znaleźć obejścia. Pozostaje jednak niezbędnym narzędziem, które może znacznie zmniejszyć ryzyko ze strony robotów spamujących.