Web SDK

Web SDKはすべてのモダンブラウザをサポートし、複数の統合方法を提供します。

30 秒で動作を確認

demo-v1.captcha.la — 純粋な HTML + PHP、MIT ライセンス、全ページでソース表示可能。

• popup.html — ポップアップモード
• float.html — フローティング
• bind.html — ボタンにバインド
• inline.html — インライン埋め込み
• server-token.html — サーバー発行トークン（リプレイ防止）

クイックスタート

<!-- 1. Load via CDN (or npm install captchala) -->
<script src="https://cdn.captcha-cdn.net/captchala-loader.js"></script>

<button id="login-btn">Sign in</button>

<script>
loadCaptchala(function () {
  Captchala.init({
    appKey: 'YOUR_APP_KEY',
    product: 'bind',
    action: 'login',
    lang: 'auto',
  })
  .onSuccess(res => sendToBackend(res.token))
  .onError(err => console.error(err.message))
  .bindTo('#login-btn');
});
</script>

インストール

CDN

<!-- Recommended: auto-fallback loader, ~6 KB gzip -->
<script src="https://cdn.captcha-cdn.net/captchala-loader.js"></script>

NPM

npm install captchala
# or framework wrappers
npm install @captcha-la/vue
npm install @captcha-la/react

import Captchala from 'captchala';
import 'captchala/dist/captchala.css';

モード一覧

ポップアップモード

Captchala.init({ appKey: 'YOUR_APP_KEY', product: 'popup', action: 'login' })
  .bindTo('#login-btn')
  .onSuccess(res => sendToBackend(res.token));

フロートモード

Captchala.init({ appKey: 'YOUR_APP_KEY', product: 'float', action: 'browse' })
  .appendTo('#captcha-container')
  .onSuccess(res => sendToBackend(res.token));

バインドモード

Captchala.init({ appKey: 'YOUR_APP_KEY', product: 'bind', action: 'login' })
  .bindTo('#submit-button')
  .onSuccess(res => submitForm(res.token));   // fires only after challenge passes

埋め込みモード

Captchala.init({ appKey: 'YOUR_APP_KEY', product: 'embed', action: 'register' })
  .appendTo('#captcha-container')
  .onSuccess(res => sendToBackend(res.token));

よく使うオプション

パラメータ	型	デフォルト	説明
appKey	string	—	App Key（必須）
product	string	popup	表示モード：popup
action	string	default	ビジネスシーン
lang	string	en	対応言語：zh-CN / zh-TW / en / ja / ko / ms / vi / id
serverToken	string	—	サーバー発行のワンタイムトークン（sct_xxx）。本番環境では強く推奨
onServerTokenExpired	() => Promise<string>	—	serverToken 期限切れ時に呼ばれ、新しいトークンを返して SDK が検証を継続できるようにする
enableVoice	boolean	true	音声キャプチャ入口を表示するかどうか（視覚障害者向けアクセシビリティ対応）

サーバー側検証

After onSuccess, send res.token (prefix pt_) to your own backend, then validate it server-side:

POST https://apiv1.captcha.la/v1/validate
X-App-Key: YOUR_APP_KEY
X-App-Secret: YOUR_APP_SECRET
Content-Type: application/json

{ "pass_token": "<token>", "client_ip": "<end-user IP>" }

完全な検証エンドポイントは API リファレンス を参照。