Ana içeriğe atla
<ribaunt-widget>, modern herhangi bir tarayıcıda çerçevesiz olarak çalışan standart bir Web Bileşenidir. Tek bir ES modül betiğini yüklersiniz, öğeyi işaretlemenize bırakırsınız ve birkaç olay dinleyicisi bağlarsınız — derleme adımı gerekmez.
Widget, yalnızca güvenli bir bağlamda kullanılabilen Web Crypto API’sine dayanır. Üretimde https:// ve yerel geliştirme sırasında http://localhost kullanın. http://192.168.x.x gibi düz yerel ağ URL’leri çalışmayacaktır.

​
Adımlar

​
Eksiksiz örnek

Aşağıdaki kod parçacığı dört adımın tamamını tek bir bağımsız HTML sayfasında bir araya getirir. 
<!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’ı biçimlendirme

Widget’ın iç yapısı bir Shadow DOM içinde kapsüllenmiştir, bu nedenle standart torun seçicileri onlara ulaşamaz. Ancak, ana öğeye kapsamlandırılmış CSS özel özelliklerini geçersiz kılabilirsiniz. 
#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);
}

​
Nitelik referansı

En yaygın kullanılan nitelikler aşağıda listelenmiştir. Niteliklerin, kabul edilen değerlerin ve varsayılanların tam listesi için Widget yapılandırması sayfasına bakın.
NitelikAçıklama
challenge-endpointWidget’ın challenge’ları çekeceği URL.
verify-endpointWidget’ın çözümleri göndereceği URL.
auto-verifyMevcut olduğunda widget, tıklama gerektirmeden yüklendikten hemen sonra çözmeye başlar.
show-warningMevcut olduğunda widget’ın üstünde bir uyarı bandı görüntüler.
warning-messageshow-warning ayarlandığında gösterilen uyarı bandı için özel metin.
solve-timeoutBir error olayı tetiklenmeden önce çözmeye izin verilen maksimum milisaniye. Zaman aşımını devre dışı bırakmak için atlayın.
disabledTüm kullanıcı etkileşimini ve programatik startVerification() çağrılarını engeller.
disabled bir widget, auto-verify üzerinden de doğrulamayı başlatmayacaktır. Widget’ın çalışmasını beklemeden önce disabled niteliğini kaldırın.