Cloudflare Turnstileを使って、送信ボタンのオンオフを制御する

CloudflareのTurnstileを使用して、ユーザーがボットであるかどうかを判別することができます。この機能を使用して、ボットと判定された場合にフォーム送信を制限する実装を試しました。Turnstileを管理画面からサイトに追加し、サイトキーとシークレットキーを取得します。HTMLファイルにTurnstileの設定を追加し、ボタンを無効化した状態から有効化するカスタマイズを行います。Turnstileの失敗ケースをテストする場合は、特定のSite Keyを使用します。Turnstileのドキュメントから詳細なテスト方法を確認できます。Turnstileを使用することで、簡単にボット対策ができるということです。

Cloudflare Turnstileを使って、サイトやフォームにアクセスしているユーザーがbotかどうかを判定することができます。

この機能を利用して、「Turnstileがbotと判定したら、フォーム送信を行えないようにする」実装を試してみました。

作りたいもの

テストモードを使って、あえてTurnstileの認証を失敗させてみました。その下にあるsubmitボタンがdisabledになっているため、ボタンをクリックできない状態にしています。

Turnstileにサイトを追加する

管理画面から、Turnstileを利用するサイトを登録しましょう。

サイトのドメインは複数登録できます、localhostも登録できるっぽいので、ローカルで試す場合はこれも追加しましょう。あと、動いていることを見えるようにしたいので、[Widget Mode]は[Managed]を選びました。

Createすると、サイトキーとシークレットキーが発行されます。

Turnstileを利用するHTMLを用意する

今回はブラウザ上での動きだけを試すので、HTMLファイルを1枚用意して、そこで実装します。HTMLファイルはCloudflareエヴァンジェリスト亀田さんのワークショップ資料から拝借しました。

下のHTMLのTURNSTILE_SITE_KEYを、ダッシュボードで取得したSite Keyに変更して保存しましょう。


<html>
    <head>
        <title>Turnstile &dash; Dummy Login Demo</title>
    </head>
    <body>
        <form>
            <div class="cf-turnstile" data-sitekey="TURNSTILE_SITE_KEY"></div>
            <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
        </form>
            <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=_turnstileCb" async defer></script>
            <script>
            function _turnstileCb() {
                turnstile.render('.cf-turnstile', {
                    callback: function(token) {
                        console.log('ok!')
                        console.log(token);
                    },
                })
            }
            </script>
    </body>
</html>

buttonタグにdisabled属性を追加しておきます。

<button class="w-100 btn btn-lg btn-primary" type="submit" disabled>Sign in</button>

最後に_turnstileCb関数をカスタマイズします。removeAttributeでdisabled属性を削除しましょう。


function _turnstileCb() {
    turnstile.render('.cf-turnstile', {
        callback: function() {
            document.querySelector("button[type='submit']").removeAttribute('disabled');
        },
    })
}

保存してTurnstileで許可したドメインからアクセスしましょう。成功した場合にボタンがクリックできる状態になっていればOKです。