CaptchaLaCaptchaLa
移行ガイド

hCaptcha から CaptchaLa へ移行する

10分かからずに差し替え可能。フォームの形はそのまま、より速いウィジェット、画像分類のラウンドなし、そしてあなたのトラフィックはあなたのものに。

登録してキーを取得比較を読む
hhCaptchaCurrent setup~10 minCaptchaLaDrop-in target

コード変更のイメージ

Before — hCaptcha
<div class="h-captcha" data-sitekey="YOUR_SITE_KEY"></div>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
After — CaptchaLa
<button id="login-btn">Sign in</button>
<script src="https://cdn.captcha-cdn.net/captchala-loader.js"></script>
<script>
  loadCaptchala(() => Captchala.init({ appKey: 'YOUR_APP_KEY', action: 'login' })
    .onSuccess(res => onToken(res.token))
    .bindTo('#login-btn'));
</script>
Before — hCaptcha サーバー検証 (Node)
const res = await fetch('https://api.hcaptcha.com/siteverify', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({
    secret: process.env.HCAPTCHA_SECRET,
    response: req.body['h-captcha-response'],
  }),
})
const data = await res.json()
if (!data.success) return res.status(400).json({ error: 'bot' })
After — CaptchaLa サーバー検証 (Node)
const res = await fetch('https://apiv1.captcha.la/v1/validate', {
  method: 'POST',
  headers: {
    'X-App-Key': process.env.CAPTCHALA_APP_KEY,
    'X-App-Secret': process.env.CAPTCHALA_APP_SECRET,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ pass_token: req.body['captchala-token'] }),
})
const { data } = await res.json()
if (!data || !data.valid) return res.status(400).json({ error: 'bot' })

移行手順

  1. 1

    登録して App Key と Secret を取得する

    無料の CaptchaLa アカウントを作成し、サイトを追加して App Key（公開用）と App Secret（サーバー側用）をコピーします。クレジットカード不要です。

  2. 2

    ウィジェットタグを差し替える

    h-captcha class を captchala に、data-sitekey を data-app-key に、スクリプト src を当社の CDN URL に置き換えます。構造は同一のままです。

  3. 3

    隠しフィールド名を更新する

    hCaptcha は h-captcha-response を、CaptchaLa は captchala-token を挿入します。フォームハンドラーで名前を参照している場合は置換してください。

  4. 4

    サーバー検証を更新する

    エンドポイントを apiv1.captcha.la/v1/validate に変更します。当社は JSON を使います（hCaptcha は form-urlencoded）ので、Content-Type とボディを更新してください。valid フラグ（data.valid）は引き続きレスポンスに含まれるため、分岐コードはそのままです。

  5. 5

    段階的にロールアウトする

    まず1つのフォームに CaptchaLa を導入し、数時間かけてコンバージョンとチャレンジ率を計測します。画像分類のラウンドがなくなるため、多くのチームは完了率が横ばいか改善するのをすぐに確認します。

より速く:プラグインを使う

WordPress + WooCommerce

hCaptcha の WordPress プラグインを公式の CaptchaLa プラグインに置き換えてください。ログイン、登録、コメント、WooCommerce、CF7、Gravity、WPForms をインストール1つでカバーします。

View integration →

Flarum

Flarum の hCaptcha 拡張を、Composer 経由で公式の CaptchaLa 拡張に置き換えてください。

View integration →

よくある質問

hCaptcha のアカウントはどうなりますか？

何も起きません。そのままにしてリクエストの送信を止めるだけです。契約も通知の手続きもありません。アカウントは休眠状態のまま残ります。正式に閉じたい場合、hCaptcha にはセルフサービスのアカウント削除オプションがあります。

Core Web Vitals は改善しますか？

通常は改善します。hCaptcha のウィジェットはフォームページの LCP に 400〜600ms を追加することが一般的です。CaptchaLa のウィジェットは <100ms を目標にしています。正確な差はページの他のバジェット次第ですが、フォームの多いページでは違いが顕著です。

利用中の hCaptcha Enterprise 機能はどうなりますか？

ほとんどのエンタープライズ機能（カスタムテーマ、高度なリスクスコアリング、分析ダッシュボード）には、CaptchaLa の標準プランに直接の同等機能があります。ドキュメントの移行ページに各機能とその CaptchaLa 対応を一覧化しています。