SDK React

Composant et hook React officiels pour le CAPTCHA CaptchaLa — publiés sous @captcha-la/react.

Démo en ligne

📦

demo-v1.captcha.la/react — démo exécutable avec les quatre modes produit. Source : Captcha-La/react-example.

Installation

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

Dépendances pairs : react@^17 || ^18 || ^19, react-dom@^17 || ^18 || ^19.

Démarrage rapide

Composant

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 → submit with the form
  }

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

Props

Prop	Type	Valeur par défaut	Description
appKey	string	requis	Clé d'application CaptchaLa
serverToken	string	-	Token de challenge émis par le serveur, à usage unique. Requis lorsque l'application a server_token_required=true.
product	'popup' | 'float' | 'embed' | 'bind'	'popup'	Mode d'affichage
action	string	'default'	Identifiant de l'action
lang	string	'zh-CN'	Code de langue
onSuccess	(result) => void	-	Callback de succès
onError	(error) => void	-	Callback d'erreur
onClose	() => void	-	Callback de fermeture
onReady	() => void	-	Callback de disponibilité
className	string	-	Nom de classe du conteneur
style	CSSProperties	-	Styles inline du conteneur

Méthodes (via 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>
    </>
  )
}

Méthode	Description
verify()	Déclenche la vérification
reset()	Réinitialise l'état du CAPTCHA
destroy()	Détruit l'instance
bindTo(selector)	Lie à un élément (pour le mode bind)
setLang(lang)	Change la langue à la volée

Production : mode serverToken

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

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

  useEffect(() => {
    fetch('/api/captcha-token')         // your own backend
      .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)}
    />
  )
}

Consultez la Référence de l'API pour le contrat backend complet.

Liens

• npm · GitHub · exemple
• Vue d'ensemble du SDK Web · Référence de l'API