React SDK

CaptchaLa CAPTCHA를 위한 공식 React 컴포넌트 + Hook입니다. npm에 @captcha-la/react로 배포되어 있습니다.

라이브 데모

📦

demo-v1.captcha.la/react — 4 가지 product 모드를 모두 포함한 실행 가능한 데모입니다. 소스: Captcha-La/react-example.

설치

npm install @captcha-la/react
# 또는
yarn add @captcha-la/react
# 또는
pnpm add @captcha-la/react

Peer dependencies: react@^17 || ^18 || ^19, react-dom@^17 || ^18 || ^19.

빠른 시작

컴포넌트

import { Captchala } from '@captcha-la/react'

function App() {
  return (
    <Captchala
      appKey="your-app-key"
      product="popup"
      onSuccess={(result) => console.log('pass_token:', result.token)}
      onError={(err) => console.error(err)}
    />
  )
}

Hook

import { useCaptchala } from '@captcha-la/react'

function LoginForm() {
  const { ready, verify } = useCaptchala({
    appKey: 'your-app-key',
    product: 'bind',
    action: 'login',
  })

  async function handleSubmit(e) {
    e.preventDefault()
    const result = await verify()
    // result.token → 폼과 함께 전송하십시오
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit" disabled={!ready}>Login</button>
    </form>
  )
}

Props

Prop	Type	Default	설명
appKey	string	필수	CaptchaLa 애플리케이션 키
serverToken	string	-	서버에서 발급한 일회용 챌린지 토큰입니다. 앱이 server_token_required=true 인 경우 필수입니다.
product	'popup' | 'float' | 'embed' | 'bind'	'popup'	표시 모드
action	string	'default'	액션 식별자
lang	string	'zh-CN'	언어 코드
onSuccess	(result) => void	-	성공 콜백
onError	(error) => void	-	오류 콜백
onClose	() => void	-	닫힘 콜백
onReady	() => void	-	준비 완료 콜백
className	string	-	컨테이너 클래스 이름
style	CSSProperties	-	컨테이너 인라인 스타일

메서드 (ref 경유)

import { useRef } from 'react'
import { Captchala, type CaptchalaRef } from '@captcha-la/react'

function App() {
  const ref = useRef<CaptchalaRef>(null)
  return (
    <>
      <Captchala ref={ref} appKey="your-app-key" />
      <button onClick={() => ref.current?.verify()}>Verify</button>
    </>
  )
}

Method	설명
verify()	검증을 트리거합니다
reset()	CAPTCHA 상태를 재설정합니다
destroy()	인스턴스를 파괴합니다
bindTo(selector)	엘리먼트에 바인딩합니다 (bind 모드용)
setLang(lang)	언어를 즉시 변경합니다

프로덕션: serverToken 모드

import { useState, useEffect } from 'react'
import { Captchala } from '@captcha-la/react'

function LoginPage() {
  const [token, setToken] = useState<string>()

  useEffect(() => {
    fetch('/api/captcha-token')         // 자체 백엔드
      .then((r) => r.json())
      .then((d) => setToken(d.server_token))
  }, [])

  if (!token) return <div>Loading…</div>

  return (
    <Captchala
      serverToken={token}
      appKey="pk_your_public_app_key"
      action="login"
      onSuccess={(r) => console.log('pass_token:', r.token)}
    />
  )
}

백엔드 계약 전체는 API 레퍼런스를 참조하십시오.

링크

• npm · GitHub · 예제
• Web SDK 개요 · API 레퍼런스