人間とコンピュータ(ロボット)を区別するTurnstileの使い方

Turnstileとは

botによるWebサイトへの攻撃を防ぐため人間とコンピュータ(ロボット)を区別するCloudflareのWebサービス。

同様のWebサービスではGoogleのreCAPTCHAが有名だがTurnstileは無料で簡単に実装できるので、今後Turnstileを利用するWebサイトが多くなることが予想される。

Turnstileの使い方

TurnstileはCloudflareのWebサービスなので、アカウントを持っていない場合はCloudflareでアカウントを作成してログインする。

ログインしたら左サイドバーから「Turnstile」を選択するか、以下のURLにアクセスすればTurnstileのページを表示できる。

https://developers.cloudflare.com/turnstile/

Turnstileにログインしたらsitekeyを取得できるのでコピーしてください。

以下のようにフォームにsitekeyを貼り付ければ簡易的に人間とコンピュータを区別するフォームが作成可能です。(人間のみログインボタンが押せる)

data-sitekeyにコピーしたsitekeyを貼り付けてdata-callbackのjavascriptCallbackでJavaScriptのコールバック処理を実行します。

<form action="/" method="POST">
  <input type="text" placeholder="username" class="form-control">
  <input type="password" placeholder="password" class="form-control">
  <div class="cf-turnstile" data-sitekey="0x4AAAAAAAAfoobarbaz" data-callback="javascriptCallback"></div>
  <button type="submit" value="Submit" class="form-control" disabled>ログイン</button>
</form>

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<script>
function javascriptCallback() {
  document.querySelector('[type="submit"]').removeAttribute('disabled')
}
</script>

Turnstileを使用したフォームのサンプル

詳しい仕様は公式サイトのClient-side renderのドキュメントを参照してください。

前述のサンプルではSuccess!になるとLog inボタンが押せるようにしていますが、これだとデベロッパーツールでdisabledを除去するだけでもボタンが押せてしまいます。

厳密にSuccess!のときだけ処理させたい場合はサーバー側の対応も必要です。

サーバーサイドはServer-side validationのドキュメントを参照してください。