Inna
cac0d28aa9
- Backend: helper verify_turnstile en _base (verifica el token contra challenges.cloudflare.com/siteverify; fail-closed ante error de red; si no hay secreto configurado, no bloquea). Se exige en el POST de login_view, register_view y recover_account_view -> rechazo con mensaje si falla. - settings: TURNSTILE_SITE_KEY / TURNSTILE_SECRET_KEY desde .env (el secreto NO se commitea). La clave de sitio se expone a las plantillas por el context processor (TURNSTILE_SITE_KEY). - Frontend: hook useTurnstile (carga el script de Cloudflare una vez y renderiza el widget, devuelve el token). LoginForm/RegisterForm/RecoverForm incluyen el widget, mandan cf-turnstile-response y deshabilitan el submit hasta tener token. El sitekey llega por data-sitekey en el div de montaje. Verificado: sin token los 3 POST se rechazan; siteverify acepta la clave secreta (error invalid-input-response con token falso, no invalid-input-secret). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
import { useEffect, useRef, useState } from 'react'
|
|
|
|
interface TurnstileOptions {
|
|
sitekey: string
|
|
callback?: (token: string) => void
|
|
'error-callback'?: () => void
|
|
'expired-callback'?: () => void
|
|
theme?: 'auto' | 'light' | 'dark'
|
|
}
|
|
|
|
declare global {
|
|
interface Window {
|
|
turnstile?: {
|
|
render: (el: HTMLElement, opts: TurnstileOptions) => string
|
|
reset: (id?: string) => void
|
|
remove: (id: string) => void
|
|
}
|
|
}
|
|
}
|
|
|
|
const SCRIPT_ID = 'cf-turnstile-script'
|
|
|
|
/**
|
|
* Carga el script de Cloudflare Turnstile (una vez) y renderiza el widget en el
|
|
* div referenciado. Devuelve el ref para el contenedor y el token resuelto.
|
|
* Si sitekey es vacío, no hace nada (captcha desactivado).
|
|
*/
|
|
export function useTurnstile(sitekey: string) {
|
|
const ref = useRef<HTMLDivElement>(null)
|
|
const [token, setToken] = useState('')
|
|
const rendered = useRef(false)
|
|
|
|
useEffect(() => {
|
|
if (!sitekey) return
|
|
let cancelled = false
|
|
|
|
function tryRender() {
|
|
if (cancelled || rendered.current || !ref.current || !window.turnstile) return
|
|
rendered.current = true
|
|
window.turnstile.render(ref.current, {
|
|
sitekey,
|
|
theme: 'dark',
|
|
callback: (t) => setToken(t),
|
|
'error-callback': () => setToken(''),
|
|
'expired-callback': () => setToken(''),
|
|
})
|
|
}
|
|
|
|
if (window.turnstile) {
|
|
tryRender()
|
|
return () => {
|
|
cancelled = true
|
|
}
|
|
}
|
|
|
|
if (!document.getElementById(SCRIPT_ID)) {
|
|
const s = document.createElement('script')
|
|
s.id = SCRIPT_ID
|
|
s.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js'
|
|
s.async = true
|
|
s.defer = true
|
|
document.head.appendChild(s)
|
|
}
|
|
const iv = window.setInterval(() => {
|
|
if (window.turnstile) {
|
|
window.clearInterval(iv)
|
|
tryRender()
|
|
}
|
|
}, 200)
|
|
return () => {
|
|
cancelled = true
|
|
window.clearInterval(iv)
|
|
}
|
|
}, [sitekey])
|
|
|
|
return { ref, token }
|
|
}
|