ENJYN CAPTCHA

🚀 Live Demo

Erleben Sie ENJYN CAPTCHA in Aktion mit automatischer Theme-Erkennung:

Heller Modus

CAPTCHA wird hier geladen...

Dunkler Modus

CAPTCHA wird hier geladen...

💡 Challenge-Typen (zufällige auswahl):

Puzzle Challenge: Benutzer müssen ein fehlendes Puzzleteil an die richtige Stelle im Bild ziehen
Bildauswahl: Aus 6 Bildern muss das richtige ausgewählt werden
Dreh-Mechanik: Das klassische ENJYN Feature - Bilder in die richtige Position drehen

📋 Schnellstart in 3 Schritten

1

Script einbinden

Fügen Sie das ENJYN CAPTCHA Script in Ihre HTML-Seite ein:

HTML

<script src="https://enjyn.de/src/enjyn-captcha.js"></script>

2

Container platzieren

Erstellen Sie einen Container, in dem das CAPTCHA erscheinen soll:

HTML

<div id="mein-captcha"></div>

3

CAPTCHA initialisieren

Initialisieren Sie das CAPTCHA mit JavaScript:

JavaScript

EnjynCaptcha.create('mein-captcha', {
    onSuccess: function(token) {
        console.log('CAPTCHA gelöst!', token);
    }
});

📝 Vollständiges Formular-Beispiel

Hier sehen Sie ein funktionsfähiges Kontaktformular mit CAPTCHA-Schutz:

Vollständiger Code

<!DOCTYPE html>
<html>
<head>
    <title>Kontaktformular mit CAPTCHA</title>
</head>
<body>
    <form id="contact-form">
        <input type="text" name="name" placeholder="Name" required>
        <input type="email" name="email" placeholder="E-Mail" required>
        <textarea name="message" placeholder="Nachricht" required></textarea>
        
        <!-- CAPTCHA Container -->
        <div id="form-captcha"></div>
        
        <button type="submit" id="submit-btn" disabled>
            Formular absenden
        </button>
    </form>

    <!-- CAPTCHA Script -->
    <script src="https://enjyn.de/src/enjyn-captcha.js"></script>
    <script>
        // CAPTCHA initialisieren
        const captcha = EnjynCaptcha.create('form-captcha', {
            onSuccess: function(token) {
                // Submit-Button aktivieren
                document.getElementById('submit-btn').disabled = false;
                
                // Token zum Formular hinzufügen
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'captcha_token';
                input.value = token;
                document.getElementById('contact-form').appendChild(input);
            }
        });

        // Formular-Verarbeitung
        document.getElementById('contact-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            if (captcha.isValid()) {
                // Formular an Server senden
                console.log('Formular wird gesendet...');
                // fetch('/submit', { method: 'POST', body: new FormData(this) });
            }
        });
    </script>
</body>
</html>

⚙️ Konfigurationsoptionen

Passen Sie ENJYN CAPTCHA an Ihre Bedürfnisse an:

Option	Typ	Standard	Beschreibung
`onSuccess`	Function	-	Callback bei erfolgreicher Lösung (erhält Token)
`onFail`	Function	-	Callback bei falscher Lösung
`onExpand`	Function	-	Callback beim Öffnen des CAPTCHA
`onCollapse`	Function	-	Callback beim Schließen des CAPTCHA
`imagesRequired`	Number	1	Anzahl der zu lösenden Bilder/Challenges

                🎨 Automatische Theme-Erkennung: ENJYN CAPTCHA erkennt automatisch, ob Ihre Seite ein helles oder dunkles Theme verwendet und passt sich entsprechend an. Es ist keine zusätzliche Konfiguration erforderlich!
            

🔧 Wichtige Methoden

CAPTCHA erstellen

const captcha = EnjynCaptcha.create(containerId, options);

Validierung prüfen

if (captcha.isValid()) {
    // CAPTCHA wurde erfolgreich gelöst
}

Token abrufen

const token = captcha.getToken();

CAPTCHA zurücksetzen

captcha.reset();

💡 Anwendungsfälle

1. Formular-Schutz

JavaScript

EnjynCaptcha.create('form-captcha', {
    onSuccess: function(token) {
        // Formular-Button aktivieren
        document.getElementById('submit-btn').disabled = false;
        // Token speichern für Server-Validierung
    }
});

2. Content-Schutz

JavaScript

EnjynCaptcha.create('content-captcha', {
    onSuccess: function() {
        // Geschützten Inhalt anzeigen
        document.getElementById('premium-content').style.display = 'block';
        document.getElementById('content-overlay').style.display = 'none';
    }
});

3. Download-Schutz mit erhöhter Sicherheit

JavaScript

EnjynCaptcha.create('download-captcha', {
    imagesRequired: 3,  // Erhöhte Sicherheit durch mehr Challenges
    onSuccess: function() {
        // Download-Buttons aktivieren
        document.querySelectorAll('.download-btn').forEach(btn => {
            btn.disabled = false;
        });
    }
});

🔄 Mehrere CAPTCHAs auf einer Seite

Sie können problemlos mehrere CAPTCHA-Instanzen auf derselben Seite verwenden:

JavaScript

// CAPTCHA 1 - Formular
const formCaptcha = EnjynCaptcha.create('captcha-form', {
    onSuccess: function(token) {
        console.log('Form CAPTCHA:', token);
    }
});

// CAPTCHA 2 - Downloads
const downloadCaptcha = EnjynCaptcha.create('captcha-download', {
    imagesRequired: 3,
    onSuccess: function(token) {
        console.log('Download CAPTCHA:', token);
    }
});

🚀 Auto-Initialisierung

Für noch einfachere Integration können Sie CAPTCHAs automatisch über HTML-Attribute initialisieren:

HTML

<div data-enjyn-captcha='{"imagesRequired": 3}'></div>

Das Script sucht beim Laden automatisch nach Elementen mit data-enjyn-captcha Attribut und initialisiert diese.

🎯 Zusammenfassung

ENJYN CAPTCHA bietet:

✅ Einfache Integration in nur 3 Schritten
✅ Drei verschiedene Challenge-Typen (Drehen, Puzzle, Bildauswahl)
✅ Automatische Theme-Erkennung für nahtlose Integration
✅ Flexible Konfigurationsmöglichkeiten
✅ Mehrere Instanzen auf einer Seite möglich
✅ Benutzerfreundliche und barrierefreie Lösung

Script-URL: https://enjyn.de/src/enjyn-captcha.js