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

In diesem Artikel erklären wir, wie Sie das CaptchaFox-Widget in eine Solid.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 Solid?

Solid ist ein recht neues JavaScript Framework zur Erstellung von Webanwendungen. Genau wie React verwendet es JSX und stellt ähnliche APIs bereit. Es zeichnet sich vorallem durch eine sehr gute Browserperformance und einfache Struktur aus. Das Framework setzt hierbei sehr stark auf feingranulare Reaktivität, wodurch ein virtueller DOM nicht nötig ist.

Schritt 1: Installation von CaptchaFox

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

1npm install @captchafox/solid

Schritt 2: Erstellen eines Formulars

Als nächstes erstellen Sie ein Formular in Ihrer 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/solid und fügen sie zu Ihrem Formular hinzu. Folgender Code ist ein Beispiel, wie das Formular danach aussieht. Der Seitenschlüssel muss mit Ihrem Schlüssel aus dem Admin-Portal ersetzt werden.

1import { CaptchaFox } from '@captchafox/solid'
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="SCHLÜSSEL" />
13
14            <button type="submit">Submit</button>
15        </form>
16    )
17}
18

Schritt 4: Validierung der Anfrage

Anschließend können Sie eine Methode hinzufügen, um mit dem Ergebnis des Captchas weiterzuarbeiten oder um zu überprüfen, ob die Verifizierung erfolgreich war.

1import { CaptchaFox } from '@captchafox/solid'
2
3function ContactForm() {
4
5    const handleVerify = (token: string) => {
6        // Ihre Business Logik
7    }
8
9    return (
10        <form>
11            <label htmlFor="name">Name:</label>
12            <input type="text" id="name" name="name" />
13
14            <label htmlFor="email">Email:</label>
15            <input type="email" id="email" name="email" />
16
17            <CaptchaFox sitekey="SCHLÜSSEL" onVerify={handleVerify}/>
18
19            <button type="submit">Submit</button>
20        </form>
21    )
22}

Zur Überprüfung muss der erhaltene Token in Ihrem Backend validieren werden, bevor Sie den Benutzer die Aktion ausführen lassen. Weitere Informationen über die API für die Überprüfung finden Sie in der Dokumentation.

Nächste Schritte

Sie haben nun erfolgreich CaptchaFox in Ihre Solid-Anwendung integriert!

Sie können den Code Ihren Anforderungen entsprechend anpassen und zusätzliche Formluare in ihrer Anwendung schützen.

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