Plugin

A partire dalla versione 0.9.x, il widget ALTCHA supporta una varietà di plugin che estendono la sua funzionalità principale. I plugin ti consentono di aggiungere facilmente funzionalità come analytics, obfuscation dei dati e caricamento file senza modificare il codice principale.

I plugin disponibili includono:

• Analytics
• Obfuscation
• Upload

Abilitazione dei Plugin

Per abilitare un plugin, importa semplicemente lo script del plugin dal pacchetto altcha:

import 'altcha/obfuscation';
import 'altcha';

In alternativa, puoi includere gli script tramite un tag <script>, utilizzando file dalla directory dist_plugins o un CDN:

<script src="https://cdn.jsdelivr.net/gh/altcha-org/altcha@main/dist_plugins/obfuscation.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/altcha-org/altcha@main/dist/altcha.min.js"></script>

Si consiglia di importare i plugin prima del pacchetto principale altcha per garantire che siano registrati prima che vengano creati eventuali istanze del widget.

Analytics Plugin

Il plugin Analytics consente di tracciare le interazioni del modulo utilizzando ALTCHA Forms. È facile da abilitare e non richiede configurazioni aggiuntive:

import 'altcha/analytics';

Per ulteriori dettagli, consulta la documentazione delle sottomissioni HTML.

Obfuscation Plugin

Il plugin Obfuscation è progettato per proteggere dati sensibili, come indirizzi email e numeri di telefono, rendendoli difficili da estrarre per i bot:

import 'altcha/obfuscation';

Dopo aver abilitato questo plugin, configura l’attributo obfuscated sul tuo widget come descritto nella documentazione sull’obfuscation dei dati.

Upload Plugin

Il plugin Upload facilita il caricamento file da input type=file in moduli HTML personalizzati, integrandosi perfettamente con ALTCHA Forms. Supporta il caricamento automatico e la crittografia end-to-end (E2E) per i file:

import 'altcha/upload';

Per ulteriori informazioni, consulta la documentazione delle sottomissioni HTML.

Utilizzo Avanzato

Accesso Diretto

Il widget ALTCHA esporta una funzione getPlugin(name), che restituisce un’istanza del plugin specificato. Ciò ti consente di interagire direttamente con il plugin. Ad esempio, per aggiungere un file utilizzando il plugin Upload:

const uploadPlugin = document.querySelector('#altcha').getPlugin('upload');
uploadPlugin.addFile('attachment', file);

Creazione di Plugin Personalizzati

Se hai bisogno di funzionalità oltre a quelle offerte dai plugin incorporati, puoi creare il tuo plugin. Ecco un esempio minimo di come strutturare un plugin personalizzato:

class MyPlugin {
  static pluginName = 'myplugin';

  constructor(context) {
    // Codice di inizializzazione per il tuo plugin
  }

  destroy() {
    // Codice di pulizia quando il plugin viene distrutto
  }
}

// Registra il tuo plugin globalmente
if (typeof globalThis.altchaPlugins !== 'object') {
  globalThis.altchaPlugins = [];
}
globalThis.altchaPlugins.push(MyPlugin);

Il costruttore del plugin riceve un argomento context contenente l’elemento HTML del widget e altri metodi utili.

interface PluginContext {
  el: HTMLElement;
  clarify(): Promise<void>;
  dispatch(event: string, details?: unknown): void;
  getConfiguration(): Configure;
  getFloatingAnchor(): HTMLElement | null;
  getState(): State;
  log(...args: unknown[]): void;
  reset(state?: State, err?: string | null): void;
  solve(data: Challenge | Obfuscated): Promise<{
    data: Challenge | Obfuscated;
    solution: Solution | ClarifySolution | null;
  }>;
  setFloatingAnchor(el: HTMLElement): void;
  setState(state: State, err?: string | null): void;
  verify(): Promise<void>;
}