
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のコールバック処理を実行します。
1 2 3 4 5 6 7 8 9 10 11 12 13 | < 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 > function javascriptCallback() { document.querySelector('[type="submit"]').removeAttribute('disabled') } </ script > |

詳しい仕様は公式サイトのClient-side renderのドキュメントを参照してください。
前述のサンプルではSuccess!になるとLog inボタンが押せるようにしていますが、これだとデベロッパーツールでdisabledを除去するだけでもボタンが押せてしまいます。
厳密にSuccess!のときだけ処理させたい場合はサーバー側の対応も必要です。
サーバーサイドはServer-side validationのドキュメントを参照してください。