CloudflareのTurnstileの導入方法

https://github.com/ghostdevv/svelte-turnstile
svelte-turnstileを使ったほうが手取り早いです。

ここでは一番よく使うパターンを紹介します。

1. フロントエンドでトークンを獲得して、turnstileTokenに保存

<script>
	import { Turnstile } from 'svelte-turnstile';

    let turnstileToken = '';
</script>

<form method="POST" action="/login">
	<Turnstile
		on:turnstile-callback={(event) => (turnstileToken = event.detail.token)} 
        siteKey="SITE_KEY" 
    />
</form>

2. フロントエンドで獲得したトークンをサーバーに問い合わせ、成功してなかったら不正なアクセスだと返し、成功してたら通常な処理を行う

interface TokenValidateResponse {
    'error-codes': string[];
    success: boolean;
    action: string;
    cdata: string;
}

async function validateToken(token: string, secret: string) {
    const response = await fetch(
        'https://challenges.cloudflare.com/turnstile/v0/siteverify',
        {
            method: 'POST',
            headers: {
                'content-type': 'application/json',
            },
            body: JSON.stringify({
                response: token,
                secret: secret,
            }),
        },
    );

    const data: TokenValidateResponse = await response.json();

    return {
        success: data.success,

        error: data['error-codes']?.length ? data['error-codes'][0] : null,
    };
}

const turnstileSecretKey = import.meta.env.VITE_TURNSTILE_SECRET_KEY; //envで保存したセキュリティキー

/** @type {import('./$types').RequestHandler} */
export async function POST({ request, cookies }) {
  const data = await request.json();
  const turnstileToken = data.turnstileToken;

  const { success, error } = await validateToken(turnstileToken, turnstileSecretKey);

  if (!success) {
    return new Response(JSON.stringify({ 'error': '不正なアクセス' }), {
      status: 401,
      headers: {
        'Content-Type': 'application/json'
      }
    });
  }
  //こっから通常処理  
}