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:
2026-07-12 21:15:27 +00:00
parent 8920585b24
commit cac0d28aa9
14 changed files with 170 additions and 10 deletions
+11 -2
View File
@@ -1,9 +1,11 @@
import { useState } from 'react'
import { useTurnstile } from '../turnstile'
interface Props {
loginUrl: string
successUrl: string
csrfToken: string
siteKey: string
}
type LoginResponse = {
@@ -13,13 +15,14 @@ type LoginResponse = {
error?: string
}
export function LoginForm({ loginUrl, successUrl, csrfToken }: Props) {
export function LoginForm({ loginUrl, successUrl, csrfToken, siteKey }: Props) {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [showPassword, setShowPassword] = useState(false)
const [buttonText, setButtonText] = useState('Conectar')
const [busy, setBusy] = useState(false)
const [message, setMessage] = useState<{ kind: 'ok' | 'err'; text: string } | null>(null)
const { ref: turnstileRef, token: captchaToken } = useTurnstile(siteKey)
function transientError(text: string) {
setMessage({ kind: 'err', text })
@@ -45,6 +48,7 @@ export function LoginForm({ loginUrl, successUrl, csrfToken }: Props) {
body.set('email', email.trim())
body.set('password', password.trim())
body.set('csrfmiddlewaretoken', csrfToken)
body.set('cf-turnstile-response', captchaToken)
try {
const resp = await fetch(loginUrl, {
@@ -121,13 +125,18 @@ export function LoginForm({ loginUrl, successUrl, csrfToken }: Props) {
/>
</td>
</tr>
<tr>
<td>
<div ref={turnstileRef} className="cf-turnstile" style={{ display: 'inline-block' }} />
</td>
</tr>
<tr>
<td>
<button
type="submit"
className="login-button"
id="login-button"
disabled={busy}
disabled={busy || (!!siteKey && !captchaToken)}
>
{buttonText}
</button>