@movvjs/svelte-turnstile

Cloudflare Turnstile 캡차를 위한 Svelte 컴포넌트 모듈입니다.

설치

yarn add @movvjs/svelte-turnstile
# 또는
npm install @movvjs/svelte-turnstile

사전 준비

HTML에 Cloudflare Turnstile 스크립트를 추가합니다.

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

사용법

<script>
  import { Turnstile } from '@movvjs/svelte-turnstile'

  async function verify(token) {
    const res = await fetch('/api/verify', {
      method: 'POST',
      body: JSON.stringify({ token })
    })
    if (!res.ok) throw new Error('검증 실패')
  }
</script>

<Turnstile
  sitekey="YOUR_SITE_KEY"
  className="turnstile-widget"
  theme="light"
  language="ko"
  {verify}
  on:authenticated={() => console.log('인증 성공')}
  on:error={(e) => console.error('인증 실패', e.detail)}
/>

Props

| 이름 | 타입 | 필수 | 기본값 | 설명 | |---|---|---|---|---| | sitekey | string | O | - | Cloudflare Turnstile 사이트 키 | | className | string | O | - | 위젯 컨테이너에 적용할 CSS 클래스 | | theme | 'light' \| 'dark' \| 'auto' | - | 'light' | 위젯 테마 | | language | string | - | 자동 감지 | 위젯 언어 (예: 'ko', 'en', 'ja') | | verify | (token: string) => Promise<void> | O | - | 토큰 서버 검증 함수. reject 시 error 이벤트 발생 |

이벤트

| 이름 | 타입 | 설명 | |---|---|---| | authenticated | void | 캡차 인증 및 서버 검증 성공 시 | | error | string | 캡차 인증 실패 또는 서버 검증 실패 시 |

타입

import type { TurnstileOptions, TurnstileInstance } from '@movvjs/svelte-turnstile'

요구사항

• Svelte 4 또는 5
• Node.js 18+