Heim > Web-Frontend > js-Tutorial > Hauptteil

Reagieren: ReCAPTCHA-Vlient und Server-Demo

Mary-Kate Olsen
Freigeben: 2024-11-26 08:26:09
Original
173 Leute haben es durchsucht

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.

Links

  • Demo

  • Codebasis

Schritt 1: Generieren Sie Ihre ReCAPTCHA-Anmeldeinformationen

Gehen Sie zu Google ReCaptcha V3 und generieren Sie Ihre Anmeldeinformationen.

React: ReCAPTCHA vlient and Server Demo

Schritt 2: Importieren Sie die ReCaptcha-Bibliothek

<Script src={`https://www.google.com/recaptcha/enterprise.js?render=${process.env.NEXT_PUBLIC_RE_CAPTCHA_SITE_KEY}`} />
Nach dem Login kopieren

Hinweis: Es gibt einige Pakete, die Sie verwenden könnten, aber die Implementierung ist einfach.

Schritt 3: Rufen Sie die Ausführungsmethode in Ihrem Click-Handler auf

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);
  });
};
Nach dem Login kopieren

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:

  • window.grecaptcha.enterprise.ready: Dadurch wird sichergestellt, dass das Google reCAPTCHA-Objekt einsatzbereit ist.
  • window.grecaptcha.enterprise.execute: Dies generiert das Captcha-Token.

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 }),
  });
};
Nach dem Login kopieren

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.

Schritt 4: Validieren Sie das Captcha im Backend

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();
};
Nach dem Login kopieren

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
}
Nach dem Login kopieren

Abschluss

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage