NextyでCloudflare Turnstileを有効にする方法

Cloudflare TurnstileはCloudflareが提供する無料の人間認証ソリューションで、ユーザーフレンドリーな体験と非侵入的なチャレンジを特徴とし、悪意のあるボットを効果的に識別してブロックできます。

SaaS製品のユーザーベースが徐々に増加する際、自動化されたボットと悪意のある行動を防ぐことが重要です。NextyはCloudflare Turnstile統合オプションを提供しており、このチュートリアルに従って人間認証を有効にし、悪意のあるトラフィックをブロックできます。

統合手順

NextyのAuthはSupabaseサービスを使用し、Supabaseがサーバーサイド処理ロジックを提供するため、NextyでCloudflare Turnstileを使用することが格段に簡単になります。

CloudflareでTurnstileウィジェットを作成

Cloudflareにログインし、左サイドバーのTurnstileディレクトリを開き、「Add Widget」をクリックします。

本番環境のドメインを選択し、localhostを手動で入力します。後者はローカルテストに使用されます。

Widget Modeとpre-clearanceを選択します。

「Widget Mode」は訪問者がボットかどうかを判断する方法を決定します。3つのオプションの意味は以下の通りです：

• Managed（推奨）：訪問者の行動を知的に分析し、信頼できるユーザーは直接通過、疑わしいユーザーはクリックして認証
• Non-interactive：ローディングアニメーションを表示し、バックグラウンドで自動的に認証を完了、ユーザー操作は不要
• Invisible：認証プロセスを完全に隠し、バックグラウンドですべてのチェックを静かに完了

「Would you like to opt for pre-clearance for this site?」は、認証されたユーザーが後続の訪問で一部の認証プロセスをスキップできるかどうかを決定します。

• No選択：各訪問で完全な認証が必要
• Yes選択：選択されたモードに基づいて異なる程度の認証免除を提供

作成後、Site KeyとSecret Keyが取得できます。Site Keyはフロントエンド統合に使用され、環境変数NEXT_PUBLIC_TURNSTILE_SITE_KEYに追加する必要があります。Secret Keyはバックエンド認証に使用され、次のステップで使用されます。

SupabaseでAttack Protectionを有効化

Supabase - Authentication - Attack Protectionを開き、Secret KeyをCaptcha secretの入力フィールドに入力します。

コード統合

NextyはメールログインフローでCloudflare Turnstileを事前統合しており、環境変数を設定するだけで使用できます。

Nextyのコードでは、ログインページで以下の関連コードを確認できます：

1. Turnstileコンポーネントをインポート

import { Turnstile } from '@marsidev/react-turnstile'

2. stateを作成

const [captchaToken, setCaptchaToken] = useState<string | undefined>();

3. 認証コンポーネントをレンダリングし、成功コールバックとしてonSuccessプロパティを提供

{process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY && (
  <Turnstile
    siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY}
    onSuccess={(token) => {
      setCaptchaToken(token);
    }}
  />
)}

認証効果

設定完了後、ユーザーがメールログインを実行する際に自動的にTurnstile認証がトリガーされ、ボット攻撃を効果的に防止してWebサイトのセキュリティを向上させます。