Zum Hauptinhalt springen
<ribaunt-widget> ist eine standardmäßige Web-Komponente, die in jedem modernen Browser ohne Framework funktioniert. Du lädst ein einzelnes ES-Modul-Skript, fügst das Element in dein Markup ein und richtest ein paar Event-Listener ein – kein Build-Schritt erforderlich.
Das Widget basiert auf der Web Crypto API, die nur in einem sicheren Kontext verfügbar ist. Verwende https:// in der Produktion und http://localhost während der lokalen Entwicklung. Einfache lokale Netzwerk-URLs wie http://192.168.x.x funktionieren nicht.

​
Schritte

​
Vollständiges Beispiel

Der folgende Ausschnitt fasst alle vier Schritte zu einer einzigen eigenständigen HTML-Seite zusammen. 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My Secure Form</title>
  <!-- Adjust the path to match your static file hosting -->
  <script type="module" src="/path/to/ribaunt/dist/widget-browser.js"></script>
</head>
<body>
  <form id="secure-form" action="/api/submit" method="POST">
    <h2>Please verify you are human</h2>

    <ribaunt-widget
      id="captcha"
      challenge-endpoint="/api/captcha/challenge"
      verify-endpoint="/api/captcha/verify"
      auto-verify="true"
      solve-timeout="15000"
    ></ribaunt-widget>

    <!-- Keep disabled until the verify event fires -->
    <button type="submit" id="submit-btn" disabled>Submit</button>
  </form>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const widget    = document.getElementById('captcha');
      const submitBtn = document.getElementById('submit-btn');

      widget.addEventListener('verify', (e) => {
        console.log('User verified!', e.detail.solutions);
        submitBtn.disabled = false;
      });

      widget.addEventListener('error', (e) => {
        console.error('CAPTCHA failed:', e.detail.error);
        if (e.detail.timeout) {
          console.warn('Solving timed out — try again.');
        }
        submitBtn.disabled = true;
      });

      // Optional: react to intermediate state transitions
      widget.addEventListener('state-change', (e) => {
        console.log('Widget state:', e.detail.state);
      });
    });
  </script>
</body>
</html>

​
Widget stylen

Die Interna des Widgets sind in einem Shadow DOM gekapselt, sodass standardmäßige Nachfahren-Selektoren sie nicht erreichen können. Du kannst jedoch CSS-Custom-Properties überschreiben, die auf das Host-Element gescopet sind. 
#captcha {
  /* Override widget theme variables */
  --ribaunt-background: #f0f0f0;
  --ribaunt-border-color: #ccc;

  /* Standard CSS applies to the host element itself */
  margin: 20px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

​
Attribut-Referenz

Die am häufigsten verwendeten Attribute sind unten aufgeführt. Die vollständige Liste der Attribute, akzeptierten Werte und Standardwerte findest du unter Widget-Konfiguration.
AttributBeschreibung
challenge-endpointURL, von der das Widget Challenges lädt.
verify-endpointURL, an die das Widget Lösungen sendet.
auto-verifyWenn vorhanden, beginnt das Widget unmittelbar nach dem Laden mit dem Lösen, ohne einen Klick zu erfordern.
show-warningWenn vorhanden, wird ein Warnbanner oberhalb des Widgets angezeigt.
warning-messageBenutzerdefinierter Text für das Warnbanner, der angezeigt wird, wenn show-warning gesetzt ist.
solve-timeoutMaximale Millisekunden, die zum Lösen erlaubt sind, bevor ein error-Event ausgelöst wird. Weglassen, um das Timeout zu deaktivieren.
disabledBlockiert jegliche Benutzerinteraktion und programmatische startVerification()-Aufrufe.
Ein disabled-Widget startet die Verifizierung auch nicht durch auto-verify. Entferne das disabled-Attribut, bevor du erwartest, dass das Widget läuft.