In dieser Demo verwende ich Google ReCAPTCHA v3-Anmeldeinformationen in einer React-Anwendung, die auf Next.js basiert. Das ReCAPTCHA-Token wird auf der Clientseite generiert und auf der Serverseite validiert.
Demo
Codebasis
Gehen Sie zu Google ReCaptcha V3 und generieren Sie Ihre Anmeldeinformationen.
<Script src={`https://www.google.com/recaptcha/enterprise.js?render=${process.env.NEXT_PUBLIC_RE_CAPTCHA_SITE_KEY}`} />
Hinweis: Es gibt einige Pakete, die Sie verwenden könnten, aber die Implementierung ist einfach.
const loginClickHandler = (event) => { event.preventDefault(); grecaptcha.enterprise.ready(async () => { const token = await grecaptcha.enterprise.execute( process.env.NEXT_PUBLIC_RE_CAPTCHA_SITE_KEY, { action: "LOGIN" } ); await submit(token); }); };
grecaptcha ist ein vom importierten Skript injiziertes Objekt.
Hinweis: Stellen Sie bei Verwendung von Next.js sicher, dass allen im Browser angezeigten Umgebungsvariablen das Präfix NEXT_PUBLIC vorangestellt ist.
Wenn der Benutzer auf „Anmelden“ klickt, generiert die App automatisch ein Captcha für ihn, indem sie zwei Methoden aus dem Grecaptcha-Objekt aufruft:
Schließlich werden die Daten zusammen mit dem generierten Captcha-Token an das Backend gesendet (in meinem Fall verwende ich eine Lambda-Funktion).
const submit = async (code) => { await fetch("`/.netlify/functions/react-recaptcha-v3-nextjs", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ code }), }); };
Hinweis: Wenn Sie mit einem Formular arbeiten, fügen Sie auch andere Feldwerte wie Benutzername, Name oder alle zusätzlichen Daten ein, die Ihr Formular sammelt.
const validateReCaptcha = async (captcha) => { const url = `https://www.google.com/recaptcha/api/siteverify?secret=${process.env.RE_CAPTCHA_SECRET_KEY}&response=${captcha}`; const response = await fetch(url, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ captcha }), }); return response.json(); };
validateReCaptcha ist eine Backend-Methode, die einen Google API-Endpunkt aufruft und den SECRET_KEY (als Umgebungsvariable gespeichert) und das auf dem Client generierte Captcha-Token übergibt.
Wenn das Captcha gültig ist, sieht die API-Antwort etwa so aus:
{ "success": true, "challenge_ts": "2024-11-24T03:04:34Z", "hostname": "localhost", "score": 0.9 }
ReCaptcha ist für die Sicherung von Formularen von entscheidender Bedeutung, insbesondere wenn Sie verhindern möchten, dass Bots diese absenden. Google bietet eine kostenlose Stufe an, die bis zu 10.000 Bewertungen pro Monat bietet (zum Zeitpunkt des Verfassens dieses Artikels), was es für viele Anwendungen zu einer guten Wahl macht. Die Integration wird durch die von Google bereitgestellte Bibliothek erleichtert. Sie müssen lediglich Ihre Anmeldeinformationen übergeben: SITE_KEY auf der Clientseite und SECRET_KEY auf der Serverseite.
Ein wichtiger Punkt, den Sie beachten sollten, ist, dass der SECRET_KEY niemals auf der Clientseite offengelegt werden sollte, da dies die Sicherheit Ihrer Anwendung gefährden könnte. Nur der SITE_KEY ist für den Client bestimmt.
Das obige ist der detaillierte Inhalt vonReagieren: ReCAPTCHA-Vlient und Server-Demo. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!