Da Web- und mobile Anwendungen immer beliebter werden, steigt auch das Risiko von Spam und anderen böswilligen Aktivitäten. CAPTCHAs können eine praktische Sicherheitsmaßnahme sein, die es wert ist, integriert zu werden, um diese Art von Sicherheitsbedrohungen zu verhindern.
Ein CAPTCHA ist eine minimale Sicherheitsfunktion, die üblicherweise in Webformulare integriert wird, um automatisierte Angriffe durch Spambots zu verhindern. Es stellt sicher, dass der Benutzer, der auf eine Anwendung zugreift, tatsächlich ein Mensch ist und kein Bot, der schädlichen Code ausführt.
Was ist CAPTCHA?
Das Akronym CAPTCHA steht für Completely Automated Public Turing test to tell Computers and Humans Apart. Es bezieht sich auf einen computergenerierten Test, der überprüft, ob ein bestimmter Benutzer, der mit Ihrer Anwendung interagiert, ein Mensch und kein Bot ist.
Es gibt verschiedene Arten von CAPTCHA-Tests, die Sie in Ihre Anwendung integrieren können, z. B. textbasierte und audiobasierte CAPTCHAs. Der beliebteste und effektivste Typ ist jedoch Google reCAPTCHA. Es prüft, ob echte Benutzer und Bots mithilfe fortschrittlicher Risikoanalysealgorithmen unterschieden werden können.
Google reCAPTCHA gibt es in zwei Versionen:
- reCAPTCHA V3: Diese Version läuft im Hintergrund und ermittelt anhand des Nutzerverhaltens eine Gesamtpunktzahl.
- reCAPTCHA V2: Diese Version platziert das Kontrollkästchen „Ich bin kein Roboter“ auf dem Authentifizierungsformular.
In diesem Leitfaden wird Google reCAPTCHA V2 untersucht. Lesen Sie weiter, um zu erfahren, wie Sie es in eine React-Anwendung integrieren können.
Registrieren Sie die React-Anwendung in der reCAPTCHA-Verwaltungskonsole
Um zu beginnen, müssen Sie Ihre Anwendung in der Entwicklerkonsole von reCAPTCHA registrieren. Geh 'rüber zu Die reCAPTCHA-Verwaltungskonsole von Google, Melden Sie sich mit Ihrem Google-Konto an und füllen Sie die erforderlichen Formulardetails aus.
Geben Sie den Labelnamen ein, wählen Sie aus reCAPTCHA V2, und wählen Sie im Dropdown-Feld die Überprüfungsanfragen mit der Option „Ich bin kein Roboter“ aus. Geben Sie zuletzt den Domänennamen Ihrer Anwendung an. Geben Sie für die lokale Entwicklung ein lokaler Host als Domainname.
Sobald Ihre App registriert ist, leitet Sie die Website auf eine neue Seite mit Ihren generierten geheimen und Website-Schlüsseln weiter.
Erstellen Sie einen React-Client
Dieses Projekt ist zweigeteilt: Sie erstellen einen React-Client, der ein einfaches Anmeldeformular mit dem Google reCAPTCHA und einem Express-Backend, das POST-Anforderungen an die reCAPTCHA-API sendet, um das Token zu überprüfen, das generiert wird, nachdem ein Benutzer das reCAPTCHA abgeschlossen hat Herausforderung.
Erstellen Sie lokal einen Projektordner, um Ihre Projektdateien zu speichern. Nächste, Erstellen Sie die React-Anwendung und ändern Sie das aktuelle Verzeichnis in das des Clients. Erstellen Sie im Stammverzeichnis Ihres Client-Ordners eine .env-Datei, um den geheimen API-Schlüssel und den Site-Schlüssel zu speichern.
REACT_APP_reCAPTCHA_SITE_KEY = 'Site-Schlüssel'
REACT_APP_reCAPTCHA_SECRET_KEY = 'geheimer Schlüssel'Sie finden den Code dieses Projekts in seiner GitHub-Repository.
Installieren Sie die erforderlichen Pakete
Installieren Sie Axios, Sie verwenden diese Bibliothek, um HTTP-Anforderungen vom Browser und React-Google-reCAPTCHA zu stellen. Dieses Paket stellt eine React-spezifische Implementierung für die reCAPTCHA-API bereit.
npm install relay-recaptcha-google axios --saveIntegrieren Sie Google reCAPTCHA in die React-Anwendung
Öffne das src/App.js-Datei, löschen Sie den vorgefertigten React-Code und fügen Sie den folgenden Code hinzu:
Diese Komponente rendert ein einfaches Anmeldeformular, das das Google reCAPTCHA-Widget enthält.
Importieren Sie zunächst die Pakete React, Axios und respond-google-recaptcha:
importieren Reagieren, { useState, useRef } aus'reagieren';
importieren Axios aus'axios';
importieren ReCaptcha aus'reagieren-google-recaptcha';Definieren Sie dann drei Zustandsvariablen: successMsg, errorMsg und validToken. Ihr Code aktualisiert diese Zustände nach erfolgreicher Formularübermittlung und reCAPTCHA-Validierung. Rufen Sie außerdem die Website und die geheimen Schlüssel aus der ENV-Datei ab.
FunktionApp() {
konst [Erfolgsnachricht, setErfolgsnachricht] = useState("")
konst [ErrorMsg, setErrorMsg] = useState("")
konst [valid_token, setValidToken] = useState([]);
konst SITE_KEY = Prozess.env. REACT_APP_reCAPTCHA_SITE_KEY;
konst SECRET_KEY = Prozess.env. REACT_APP_reCAPTCHA_SECRET_KEY;
Definieren Sie einen useRef-Hook, der auf die reCAPTCHA-Komponente verweist, um das Token zu erfassen, das generiert wird, nachdem ein Benutzer die reCAPTCHA-Aufforderungen abgeschlossen hat.
konst captchaRef = useRef(Null);Erstellen Sie dann eine handleSubmit-Funktion, die aufgerufen wird, wenn ein Benutzer das Anmeldeformular absendet. Diese Funktion ruft das Token von der reCAPTCHA-Komponente ab und ruft dann die auf zurücksetzen -Methode, um das reCAPTCHA zurückzusetzen, um spätere Überprüfungen zu ermöglichen.
Außerdem prüft es, ob das Token vorhanden ist, und ruft die Funktion verifyToken auf, um das Token zu verifizieren. Sobald es das Token verifiziert hat, aktualisiert es den validToken-Zustand mit den API-Antwortdaten.
konst handleSubmit = asynchron (e) => {
e.preventDefault();
lassen token = captchaRef.current.getValue();
captchaRef.current.reset();Wenn (Zeichen) {
lassen valid_token = erwarten VerifyToken (Token);
setValidToken (valid_token);
Wenn (valid_token[0].Erfolg WAHR) {
Konsole.Protokoll("verifiziert");
setSuccessMsg("Hurra!! Sie haben das Formular abgeschickt")
} anders {
Konsole.Protokoll("nicht verifiziert");
setErrorMsg(" Verzeihung!! Stellen Sie sicher, dass Sie kein Bot sind.")
}
}
}
Definieren Sie schließlich die Funktion verifyToken, die eine POST-Anforderung mit Axios an einen Express-Server-Endpunkt sendet und das reCAPTCHA-Token und den geheimen Schlüssel im Anforderungstext übergibt. Wenn die Anforderung erfolgreich ist, werden die Antwortdaten an das APIResponse-Array übertragen und das Array als Ergebnis zurückgegeben.
konst verifyToken = asynchron (Zeichen) => {
lassen APIResponse = [];versuchen {
lassen Antwort = erwarten Axios.post(` http://localhost: 8000/verify-token`, {
reCAPTCHA_TOKEN: Token,
Geheimer_Schlüssel: SECRET_KEY,
});
APIResponse.push (Antwort['Daten']);
zurückkehren APIAntwort;
} fangen (Fehler) {
Konsole.log (Fehler);
}
};
Geben Sie zuletzt ein Formular mit der reCAPTCHA-Komponente zurück. Diese Komponente übernimmt den Referenz-Hook und den Site-Schlüssel als Requisiten, um das reCAPTCHA-Widget zu konfigurieren und anzuzeigen.
Wenn ein Benutzer das Formular absendet, gibt die Komponente eine Erfolgs- oder Fehlermeldung basierend auf dem Wert von validToken state aus. Wenn das reCAPTCHA-Token gültig ist, was bedeutet, dass ein Benutzer die reCAPTCHA-Aufforderungen erfolgreich abgeschlossen hat, wird die Erfolgsmeldung angezeigt, andernfalls wird die Fehlermeldung angezeigt.
zurückkehren ("App">"App-Header"> "Login Formular">
ExportStandard App
Führen Sie schließlich den Entwicklungsserver aus und gehen Sie zu Ihrem Browser von http://localhost: 3000, um die Ergebnisse anzuzeigen.
Erstellen Sie das Express-Backend
Beginnen Sie im Stammverzeichnis des gesamten Projektordners mit Erstellen Sie einen Express-Webserver, und diese Pakete installieren:
npm Express Cors Axios Body-Parser installierenRichten Sie den Express-Server ein
Öffnen Sie als Nächstes die Datei index.js im Serverprojektordner und fügen Sie diesen Code hinzu:
konst ausdrücken = erfordern('äußern')
konst axios = erfordern('axios');
konst Kors = erfordern('kors');
konst app = ausdrücken ();konst bodyParser = erfordern('Body-Parser');
konst jsonParser = bodyParser.json();
konst PORT = process.env. HAFEN || 8000;app.use (jsonParser);
app.use (cors());app.post("/verify-token", asynchron (req, res) => {
konst { reCAPTCHA_TOKEN, Secret_Key} = req.body;versuchen {
lassen Antwort = erwarten axios.post(` https://www.google.com/recaptcha/api/siteverify? geheim=${Secret_Key}&antwort=${reCAPTCHA_TOKEN}`);
Konsole.log (Antwort.Daten);zurückkehren res.status(200).json({
Erfolg:WAHR,
Nachricht: „Token erfolgreich verifiziert“,
Verifizierungsinfo: Antwort.Daten
});
} fangen(Fehler) {
Konsole.log (Fehler);zurückkehren res.status(500).json({
Erfolg:FALSCH,
Nachricht: "Fehler beim Verifizieren des Tokens"
})
}
});
app.listen (PORT, () => Konsole.Protokoll(`App auf Port gestartet ${PORT}`));
Dieser Code macht Folgendes:
- Der Server definiert eine Post-Route, die eine asynchrone HTTP-POST-Anforderung an die reCAPTCHA-API von Google sendet Verifizieren Sie das reCAPTCHA-Token mit Axios, indem Sie den geheimen Schlüssel zur Authentifizierung in der Anforderungs-URL weitergeben.
- Wenn das reCAPTCHA-Token erfolgreich verifiziert wurde, antwortet der Server mit einem JSON-Objekt, das eine „success“-Eigenschaft enthält, die auf „true“ gesetzt ist, eine „message“-Eigenschaft die anzeigt, dass das Token erfolgreich verifiziert wurde, und eine „verification_info“-Eigenschaft, die Informationen über die Verifizierungsantwort von Google enthält API.
- Wenn während des Überprüfungsprozesses ein Fehler auftritt, antwortet der Server mit einem JSON-Objekt, das eine enthält „success“-Eigenschaft auf „false“ gesetzt und eine „message“-Eigenschaft, die angibt, dass bei der Überprüfung ein Fehler aufgetreten ist Zeichen.
Führen Sie abschließend den Node-Server aus und testen Sie die reCAPTCHA-Feature-Funktionalität.
Knoten index.jsKönnen reCAPTCHAs Sicherheit vor Spambots garantieren?
Laut Google hat sein reCAPTCHA-Dienst eine Erfolgsquote von über 99 %, was bedeutet, dass nur ein kleiner Prozentsatz von Spam die reCAPTCHA-Sicherheitsfunktion umgehen kann.
reCAPTCHA ist nicht narrensicher, da bestimmte Angreifer immer noch Workarounds finden können. Aber es bleibt ein wesentliches Werkzeug, das das Risiko von Spambots erheblich reduzieren kann.