@nuxtjs/turnstile

CloudflareによるCAPTCHAに代わるプライバシー重視の選択肢

49.3Kダウンロード•277スター•v1.1.1

danielroe

Nuxt Turnstile

Nuxt 3のためのCloudflare Turnstileインテグレーション

機能

💪 ユーザー操作を最小限に抑えたスマートな認証
🕵️‍♀️ プライバシーを重視したアプローチ
✨ Nitroエンドポイントのためのサーバー検証ヘルパー
⚡️ 軽量 - 必要な時にのみスクリプトをロード

インストール

まず、Cloudflareから無料のサイトキーとシークレットキーを取得するためにこれらの手順に従ってください。
@nuxt/scriptsを依存関係としてインストールしてください。詳細についてはドキュメントを参照してください。

@nuxtjs/turnstileをインストールし、nuxt.configに追加してください。

npx nuxi@latest module add turnstile

export default defineNuxtConfig({
  modules: ['@nuxtjs/turnstile'],

  turnstile: {
    siteKey: '<your-site-key>',
  },

  runtimeConfig: {
    turnstile: {
      // This can be overridden at runtime via the NUXT_TURNSTILE_SECRET_KEY
      // environment variable.
      secretKey: '',
    },
  },
})

または、turnstile.secretKeyPathをシークレットキーを含むファイルへのパスに設定することもできます。これはビルド時に読み込まれ、設定されている明示的なsecretKeyをすべて上書きします。

ヒント: 実行時にサイトキーとシークレットキーは、NUXT_TURNSTILE_SECRET_KEYおよびNUXT_PUBLIC_TURNSTILE_SITE_KEY環境変数で上書きできます。

使用方法

Turnstileを使用するには、おそらく次のことを行いたいでしょう。

アプリで<NuxtTurnstile>コンポーネントを使用する（例：連絡先フォームを作成する）
APIリクエストやフォーム送信を処理する際に、サーバーでトークンを検証する（例：メールを送信する前）

クライアント

Turnstileを使用するには、必要なコンポーネントに自動インポートされるVueコンポーネントを追加してください。

<template>
  <div>
    <form @submit.prevent="onSubmit">
      <NuxtTurnstile v-model="token" />
      <input type="submit" />
    </form>
  </div>
</template>

<NuxtTurnstile>はoptions引数を通して多数のオプションを受け取ることができます。すべてのオプションを見る。デフォルトでは、<div>ラッパー内にTurnstileの<iframe>をレンダリングしますが、elementプロップを設定することでこれを構成できます。

ページに表示されると、自動的にTurnstileスクリプトをロードし、ユーザーを検証します。各検証は300秒間有効で、@nuxtjs/turnstileは250秒後にこのトークンを自動的に再検証します。

コンポーネントにv-modelを設定することで検証トークンにアクセスできます。その後、トークンをフォームの応答と共に、明示的にまたは自動的に（Cloudflareはcf-turnstile-responseという名前の隠しフォーム要素をフォームに追加します）送信します。サーバー側でトークンを検証するには、Nitroサーバーのルートで自動インポートされるverifyTurnstileTokenユーティリティを使用できます。

TurnstileトークンはverifyTurnstileTokenを介してCloudFlareで処理された後は無効になります。@nuxtjs/turnstileを、送信フォームのように複数回検証する必要があるコンポーネントと一緒に使用する場合、各送信ごとにトークンを再生成する必要があります。手動でトークンを再生成するには、@nuxtjs/turnstileはテンプレート参照を介してreset関数を直接公開します。

例:

<template>
  <NuxtTurnstile ref="turnstile" />
  <button @click="turnstile.reset()">Reset token in template</button>
  <button @click="reset()">Reset token from handler</button>
</template>

<script setup>
  // you can call this template ref anything
  const turnstile = ref()

  function reset() {
    turnstile.value?.reset()
  }
</script>

サーバー

生成された検証エンドポイントを使用するか、インポートされたヘルパーメソッドを使用できます

エンドポイントの例:

まずエンドポイントの生成を有効にします。

export default defineNuxtConfig({
  // ...
  turnstile: {
    siteKey: '<your-site-key>',
    addValidateEndpoint: true
  },
})

これで、クライアントから/_turnstile/validateエンドポイントを呼び出してトークンを検証できます。

カスタムエンドポイントとヘルパーメソッドの例:

// server/api/validateTurnstile.ts

export default defineEventHandler(async (event) => {
  const { token } = await readBody(event)

  if (!token) {
    throw createError({
      statusCode: 422,
      statusMessage: 'Token not provided.',
    })
  }

  return await verifyTurnstileToken(token)
})

💻 開発

このリポジトリをクローンする
corepack enable を使用して Corepack を有効にする
pnpm installを使用して依存関係をインストールする
pnpm dev:prepare でモジュールをスタブ化
開発モードでプレイグラウンドを開始するには、pnpm devを実行します。

クレジット

laravel-cloudflare-turnstileにインスパイアされました

ライセンス

❤️を込めて作られました

MITライセンスのもとで公開されています。