Eine Next.js-Anwendung mit CaptchaFox vor Bot-Angriffen schützen

In diesem Artikel erklären wir, wie Sie das CaptchaFox-Widget in eine Next.js-Anwendung integrieren. Mit unserer bereitgestellten Bibliothek können Sie Ihre Anwendung sicherer gestalten, indem Sie die Benutzer auffordern, vor dem Absenden von Formularen eine CAPTCHA-Prüfung durchzuführen.

Was ist Next.js?

Next.js ist ein beliebtes, auf React basierendes Framework zum Erstellen von servergerenderten, statisch generierten und leistungsoptimierten Webanwendungen. Es bietet eine Reihe von Funktionen und Werkzeugen, die es einfacher machen, universelle (clientseitige und serverseitige gerenderte) Anwendungen mit React zu erstellen.

Next.js-Anwendungen werden mit einer Kombination aus React-Komponenten und serverseitigem Rendering erstellt, was eine verbesserte SEO und Leistung ermöglicht. Das Framework bietet außerdem automatische Code-Aufteilung, optimierte statische Bereitstellung und Unterstützung für eine Vielzahl von Drittanbieter-Bibliotheken und -Integrationen. Weitere Informationen über Next.js finden Sie auf der offiziellen Website.

Integration starten

Schritt 1: Installation von CaptchaFox

Um loszulegen, müssen Sie das CaptchaFox-Paket mit Ihrem bevorzugten Paketmanager installieren. Öffnen Sie Ihr Terminal in Ihrem Projekt und führen Sie den folgenden Befehl aus:

1npm install @captchafox/react

Schritt 2: Erstellen eines Formulars

Als nächstes erstellen Sie ein Formular in Ihrer Next.js-Anwendung. Sie können dies tun, indem Sie eine neue Komponente erstellen und die Formularelemente hinzufügen. Hier ist ein Beispiel für ein einfaches Formular:

1function ContactForm() {
2    return (
3        <form>
4            <label htmlFor="name">Name:</label>
5            <input type="text" id="name" name="name" />
6
7            <label htmlFor="email">Email:</label>
8            <input type="email" id="email" name="email" />
9
10            <button type="submit">Submit</button>
11        </form>
12    )
13}

Dieses Formular enthält zwei Eingabefelder für den Namen und die E-Mail-Adresse des Benutzers sowie einen Button zum Absenden.

Schritt 3: Hinzufügen von CaptchaFox zum Formular

Nun, da Sie ein Formular haben, kann das CaptchaFox Widget hinzugefügt werden. Dazu importieren Sie die Komponente aus dem Paket @captchafox/react und fügen sie zu Ihrem Formular hinzu. Hier ist ein Beispiel, wie das Formular danach aussieht:

1import { CaptchaFox } from '@captchafox/react'
2
3function ContactForm() {
4    return (
5        <form>
6            <label htmlFor="name">Name:</label>
7            <input type="text" id="name" name="name" />
8
9            <label htmlFor="email">Email:</label>
10            <input type="email" id="email" name="email" />
11
12            <CaptchaFox sitekey="SITEKEY" />
13
14            <button type="submit">Submit</button>
15        </form>
16    )
17}

Hier haben wir die CaptchaFox-Komponente zum Formular hinzugefügt und ihr einen Sitekey-Prop gegeben. Ersetzen Sie SITEKEY durch den Sitekey, den Sie nach der Erstellung der Seite im CaptchaFox Portal erhalten haben. Dieser Schlüssel identifiziert Ihre Website und aktiviert die CAPTCHA-Herausforderung.

Schritt 4: Validierung der Anfrage

Nachdem die Herausforderung gelöst wurde, wird ein spezieller Schlüssel zu den Formulardaten hinzugefügt, der ein Antwort-Token enthält. Sie müssen dieses Token auf Ihrem Server verifizieren, um sicherzustellen, dass die Anfrage legitim ist. In Next.js können Sie dazu beispielsweise API-Routen verwenden. Erstellen Sie zunächst eine neue API-Route im Ordner api, z.B. /api/contact.ts:

1import type { NextApiRequest, NextApiResponse } from 'next';
2
3export default async function handler(req: NextApiRequest, res: NextApiResponse) {
4  const body = req.body;
5
6  if (!body.name || !body.email) {
7    return res.status(400).json({ error: 'Missing request properties' });
8  }
9
10  res.redirect('/danke');
11}

Wir müssen auch unsere Formularkomponente aktualisieren, damit sie die Antwort an unsere API-Route sendet. Fügen Sie die folgenden Attribute zum Formular Element hinzu:

1  <form method="POST" action="/api/contact">

Rufen Sie dann den CaptchaFox siteverify Endpunkt auf und übergeben Sie ihm das Antwort-Token und den geheimen Schlüssel Ihrer Organisation. Um diesen Prozess zu vereinfachen, verwenden wir das Paket @captchafox/node und dessen verify Funktion:

1import type { NextApiRequest, NextApiResponse } from 'next';
2import { CAPTCHA_RESPONSE_KEY, verify } from '@captchafox/node';
3
4// Der Geheimschlüssel sollte in einer Umgebungsvariabel gespeichert werden
5const CAPTCHAFOX_SECRET = 'ORG_SECRET_KEY';
6
7export default async function handler(req: NextApiRequest, res: NextApiResponse) {
8  const body: Data = req.body;
9
10  if (!body.name || !body.email) {
11    return res.status(400).json({ error: 'Missing request properties' });
12  }
13
14  const responseToken = body[CAPTCHA_RESPONSE_KEY];
15  // Fehlerhafte Anfrage zurückgeben, wenn das Token fehlt
16  if (!responseToken) {
17    return res.status(400).json({ error: 'Captcha Token missing' });
18  }
19
20  // Anfrage zur Verifizierung des Tokens senden
21  const verifyResponse = await verify(CAPTCHAFOX_SECRET, responseToken);
22
23  // Nicht erfolgreich -> Fehlerantwort senden
24  if (!verifyResponse.success) {
25    const errorCodes = verifyResponse['error-codes'];
26
27    return res.status(401).json({ error: 'Invalid captcha response', codes: errorCodes });
28  }
29
30  res.redirect('/danke');
31}

Die Api-Route prüft nun, ob das Antwort-Token existiert und gültig ist. Wenn dies der Fall ist, wird der Benutzer auf eine Danke-Seite weitergeleitet. Wenn ein Fehler auftritt, wird dieser als JSON-Antwort zurückgegeben.

Nächste Schritte

Sie haben nun erfolgreich ein Formular in Ihrer Next.js-Anwendung mit CaptchaFox gegen Bot-Angriffe geschützt!

Sie können den Code Ihren Anforderungen entsprechend anpassen und zusätzliche Formulare in Ihre Next.js-Applikation schützen. Wenn Sie CaptchaFox mit einer beliebten Formularbibliothek wie react-hook-form verwenden möchten, können Sie sich unser detailliertes Beispiel im Javascript Integrations Repository ansehen.

Wenn Sie tiefer in die Integration eintauchen wollen, können Sie die offizielle Dokumentation lesen.