Añade Cloudflare Turnstile (captcha) a login, registro y recuperación
- 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>
This commit is contained in:
@@ -0,0 +1,77 @@
|
||||
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 }
|
||||
}
|
||||
Reference in New Issue
Block a user