Ce contenu n’est pas encore disponible dans votre langue.

Angular Integration

ALTCHA is a next-generation, privacy-first CAPTCHA solution that protects your Angular applications from bots and spam without tracking users or using cookies. This guide walks you through integrating ALTCHA in your Angular projects for secure, GDPR-compliant Angular integration.

Example Project

Angular Starter Project on GitHub

Why Use ALTCHA in Angular?

Using ALTCHA with Angular offers multiple advantages:

Privacy-first: No cookies or user tracking
Regulation compliant: Fully GDPR and CCPA compliant
Accessible: Works for all users, including those using assistive technologies
Lightweight: Minimal performance impact on your Angular app

Integrating ALTCHA ensures your forms and user interactions are protected from automated abuse without compromising user experience.

Installation

Install ALTCHA via npm:

npm install altcha

Or with yarn:

yarn add altcha

Basic Integration in Angular

Import ALTCHA in your Angular component or module:

import 'altcha';

Add the ALTCHA WebComponent to your Angular template:

import { Component } from '@angular/core';

@Component({
  selector: 'app-contact-form',
  template: `
    <form (ngSubmit)="onSubmit(contactForm)" #contactForm="ngForm">
      <input type="text" name="name" ngModel placeholder="Your Name" required />
      <input type="email" name="email" ngModel placeholder="Your Email" required />

      <!-- ALTCHA WebComponent -->
      <altcha-widget challenge="/api/altcha/challenge"></altcha-widget>

      <button type="submit">Submit</button>
    </form>
  `
})
export class ContactFormComponent {
  onSubmit(form: any) {
    if (form.valid) {
      // handle form submission
    }
  }
}