Cloudflareのturnstile（無料）をLaravelで使ってみる

この記事の目次

そもそもturnstileとは？

やりたいこと

準備

コード

フロント側

Laravel側

参考

そもそもturnstileとは？

GoogleのReCaptchaや、Intuition MachinesのhCaptchaなどの、
主にbotによる攻撃や不正アクセスを防ぐ認証システムの、Cloudflare版です

やりたいこと

無限スクロールのページを表示した際に、スクレイピング防止で途中でturnstileを表示させて、OKだったら続きを表示させる
これによりSEOとかも向上するんじゃないかなーと思ったり。

あと、嫌な人はAIのクロールとかにも対策できるんじゃね？

準備

Cloudflareのアカウントを取得し、turnstileの設定をして、サイトキーとシークレットキーを作成してください。
https://www.cloudflare.com/ja-jp/

コード

フロント側

turnstileのJSライブラリを読み込みます

<script
    src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback"
    defer
></script>

適当なDivを用意します

<div id="turnstile-container"></div>

JSを書きます

window.onloadTurnstileCallback = function () {
    turnstile.render("#turnstile-container", {  // divのid名
        sitekey: "turnstileのサイトキー",
        callback: async function (token) {
            // turnstileの解析結果がOKだったらここが実行されます
						
            const response = await fetch('LaravelのAPIのURLなど。turnstileが発行したTokenを検証する処理をLaravel側に書きます', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',   // LaravelのCSRFトークン
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    token: token,     // turnstileが発行したToken
                }),
            });

            if (!response.ok) {
                // tokenがNG（なりすまし、期限切れなど）の場合の処理
                alert('おめぇ……BOTだな？');
                return;
            }

            alert('OK');
        },
    });
};

Laravel側

LaravelでturnstileのTokenを検証します

private const string TOKEN_VERIFY_API = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';

$response = Http::post(self::TOKEN_VERIFY_API [
    'secret' => 'turnstileのシークレットキー',
    'response' => 'turnstileが発行したtoken文字列',
]);

// 2xx系ならOK
return (int)floor($response->getStatusCode() / 100) === 2;

こんな感じですね