Eine Angular Standalone-Komponente mit CaptchaFox vor Bot-Angriffen schützen

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

Angular ist ein Typescript basiertes Framework zur Entwicklung von skalierbaren Webapplikationen. Der Fokus von Angular liegt auf Architektur, daher bringt es zahlreiche Bibliotheken zum Beispiel für Routing oder Client-Server Kommunikation mit.

Was sind Standalone Komponenten

Standalone Komompenten benötigen zum Einsatz keine NGModules. Das hat den Vorteil, dass sie in der gesamten Applikation verwendet werden können, ohne sie in Modulen zu deklarieren. Dadurch erspart man sich unnötigen Code und Verwaltungsaufwand.

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/angular

Schritt 2: CaptchaFox in der App erlauben

Um die Komponente im gesamten Angular-Projekt zu verwenden muss diese nun in der appConfig.ts referenziert werden. Im forRoot() wird zusätzlich noch der von Ihnen generierten Site-Key hinzugefügt. Für Tests auf z.B. Localhost können Sie auch unsere Test Keys verwenden.

1import { ApplicationConfig, importProvidersFrom } from '@angular/core';
2import { provideRouter } from '@angular/router';
3
4import { CaptchaFoxModule } from '@captchafox/angular';
5
6import { routes } from './app.routes';
7
8export const appConfig: ApplicationConfig = {
9  providers: [provideRouter(routes),
10    importProvidersFrom(CaptchaFoxModule.forRoot({
11      siteKey: '<SITE_KEY>'
12    }))
13  ]
14};

Schritt 3: Erstellen des Formulars

Als nächstes erstellen Sie ein Formular in Ihrer Angular-Anwendung. Dazu wird eine neue Komponente generiert und die Formularelemente hinzugefügt. Um diese nutzen zu können, fügen wir zuerst den FormBuilder im Konstruktor hinzu. Danach erstellen wir die Formgruppe.

1import { Component } from '@angular/core';
2import { CommonModule } from '@angular/common';
3import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
4
5@Component({
6  selector: 'app-form',
7  standalone: true,
8  imports: [CommonModule, ReactiveFormsModule],
9  templateUrl: './form.component.html',
10  styleUrl: './form.component.scss'
11})
12export class FormComponent {
13
14  constructor(private formBuilder: FormBuilder) {}
15
16  registerForm = this.formBuilder.group({
17    mail: '',
18    password: '',
19  })
20}

Nun kann das Formular auch in das zugehörige HTML hinzufügt werden. Das sieht wie folgt aus:

1<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
2    <div>
3        <label for="mail">
4          E-Mail
5        </label>
6        <input id="mail" type="mail" formControlName="mail">
7      </div>
8    
9      <div>
10        <label for="password">
11          Passwort
12        </label>
13        <input id="password" type="password" formControlName="password">
14      </div>
15
16    <button class="button" type="submit">Registrieren</button>
17</form>
18

Wir haben nun zwei Eingabe Felder und einen Button hinzugefügt. Für letzteren erstellen wir nun noch eine onSubmit Methode. Diese wird im Beispiel das Formular nur leeren und nicht abschicken.

1  onSubmit() {
2    this.registerForm.reset();
3
4    // Ihre Business Logik
5  }

Schritt 4: CaptchaFox zum Formular hinzufügen

Da Sie im 2. Schritt die Komponente für das gesamte Projekt konfiguriert haben, müssen Sie das Modul nur noch in Ihrer Komponente importieren:

1@Component({
2  selector: 'app-form',
3  standalone: true,
4  imports: [CommonModule, ReactiveFormsModule, CaptchaFoxModule],
5  templateUrl: './form.component.html',
6  styleUrls: ['./form.component.css']
7})

Nun können Sie die CatpchaFox-Komponente auch in Ihr Formular integrieren. Dafür verwenden Sie einfach den HTML-Tag <ngx-captchafox> und geben der Komponente den Namen des Feldes über das Attribut formControlName mit.

1<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
2    <div>
3        <label for="mail">
4          E-Mail
5        </label>
6        <input id="mail" type="mail" formControlName="mail">
7      </div>
8    
9      <div>
10        <label for="password">
11          Passwort
12        </label>
13        <input id="password" type="password" formControlName="password">
14      </div>
15
16      <ngx-captchafox formControlName="captchaToken"></ngx-captchafox>
17
18    <button class="button" type="submit">Registrieren</button>
19</form>

Zuletzt müssen Sie nun noch den Token zu Ihrer Formgruppe hinzufügen. Das könnte dann wie folgt aussehen:

1@Component({
2  selector: 'app-form',
3  standalone: true,
4  imports: [CommonModule, ReactiveFormsModule, CaptchaFoxModule],
5  templateUrl: './form.component.html',
6  styleUrl: './form.component.scss'
7})
8export class FormComponent {
9
10  constructor(private formBuilder: FormBuilder) {}
11
12  registerForm = this.formBuilder.group({
13    mail: '',
14    password: '',
15    captchaToken: new FormControl(null)
16  })
17
18  onSubmit() {
19    this.registerForm.reset();
20
21    // Ihre Business Logik
22  }
23}

Stellen Sie danach sicher, dass Sie das erhaltene Token in Ihrem Backend validieren, bevor Sie den Benutzer die Aktion ausführen lassen. Weitere Informationen über die API für die Seiten-Überprüfung finden Sie in der Dokumentation.

Nächste Schritte

Sie haben nun erfolgreich CaptchaFox in Ihre Angular Standalone Komponente integriert!

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

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