Inna/NightSpire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Añade Cloudflare Turnstile (captcha) a login, registro y recuperación

Browse Source 
- 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:
Inna Hoover Brown
2026-07-12 21:15:27 +00:00
parent 8920585b24
commit cac0d28aa9
14 changed files with 170 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/LoginForm.tsx
+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>
frontend/src/components/RecoverForm.tsx
+15 -2
View File
@@ -1,8 +1,10 @@
import { useState } from 'react'
import { useTurnstile } from '../turnstile'
interface Props {
recoverUrl: string
csrfToken: string
siteKey: string
}
const OPTIONS = [
@@ -11,7 +13,8 @@ const OPTIONS = [
{ value: 'activation', label: 'Enlace de activación' },
] as const
export function RecoverForm({ recoverUrl, csrfToken }: Props) {
export function RecoverForm({ recoverUrl, csrfToken, siteKey }: Props) {
const { ref: turnstileRef, token: captchaToken } = useTurnstile(siteKey)
const [type, setType] = useState<string>('password')
const [email, setEmail] = useState('')
const [busy, setBusy] = useState(false)
@@ -27,6 +30,7 @@ export function RecoverForm({ recoverUrl, csrfToken }: Props) {
body.set('type', type)
body.set('email', email.trim())
body.set('csrfmiddlewaretoken', csrfToken)
body.set('cf-turnstile-response', captchaToken)
try {
const resp = await fetch(recoverUrl, {
@@ -78,7 +82,16 @@ export function RecoverForm({ recoverUrl, csrfToken }: Props) {
</tr>
<tr>
<td>
<button type="submit" className="recover-button" disabled={busy}>
<div ref={turnstileRef} className="cf-turnstile" style={{ display: 'inline-block' }} />
</td>
</tr>
<tr>
<td>
<button
type="submit"
className="recover-button"
disabled={busy || (!!siteKey && !captchaToken)}
>
{busy ? 'Enviando…' : 'Solicitar'}
</button>
</td>
frontend/src/components/RegisterForm.tsx
+11 -2
View File
@@ -1,8 +1,10 @@
import { useState } from 'react'
import { useTurnstile } from '../turnstile'
interface Props {
registerUrl: string
csrfToken: string
siteKey: string
}
type RegisterResponse = {
@@ -10,7 +12,8 @@ type RegisterResponse = {
message?: string
}
export function RegisterForm({ registerUrl, csrfToken }: Props) {
export function RegisterForm({ registerUrl, csrfToken, siteKey }: Props) {
const { ref: turnstileRef, token: captchaToken } = useTurnstile(siteKey)
const [password, setPassword] = useState('')
const [confPassword, setConfPassword] = useState('')
const [email, setEmail] = useState('')
@@ -36,6 +39,7 @@ export function RegisterForm({ registerUrl, csrfToken }: Props) {
body.set('conf-email', confEmail.trim())
body.set('recruiter', recruiter.trim())
body.set('csrfmiddlewaretoken', csrfToken)
body.set('cf-turnstile-response', captchaToken)
try {
const resp = await fetch(registerUrl, {
@@ -181,6 +185,11 @@ export function RegisterForm({ registerUrl, csrfToken }: Props) {
</label>
</td>
</tr>
<tr>
<td>
<div ref={turnstileRef} className="cf-turnstile" style={{ display: 'inline-block' }} />
</td>
</tr>
<tr>
<td>
<button
@@ -188,7 +197,7 @@ export function RegisterForm({ registerUrl, csrfToken }: Props) {
name="create"
className="create-button"
id="create-account-btn"
disabled={!accepted || busy}
disabled={!accepted || busy || (!!siteKey && !captchaToken)}
>
{busy ? 'Creando…' : 'Crear cuenta'}
</button>
frontend/src/entries/login.tsx
+1
View File
@@ -10,6 +10,7 @@ if (el) {
loginUrl={el.dataset.loginUrl || ''}
successUrl={el.dataset.successUrl || 'my-account'}
csrfToken={el.dataset.csrf || ''}
siteKey={el.dataset.sitekey || ''}
/>
</StrictMode>,
)
frontend/src/entries/recover.tsx
+5 -1
View File
@@ -6,7 +6,11 @@ const el = document.getElementById('recover-app')
if (el) {
createRoot(el).render(
<StrictMode>
<RecoverForm recoverUrl={el.dataset.recoverUrl || ''} csrfToken={el.dataset.csrf || ''} />
<RecoverForm
recoverUrl={el.dataset.recoverUrl || ''}
csrfToken={el.dataset.csrf || ''}
siteKey={el.dataset.sitekey || ''}
/>
</StrictMode>,
)
}
frontend/src/entries/register.tsx
+1
View File
@@ -9,6 +9,7 @@ if (el) {
<RegisterForm
registerUrl={el.dataset.registerUrl || ''}
csrfToken={el.dataset.csrf || ''}
siteKey={el.dataset.sitekey || ''}
/>
</StrictMode>,
)
frontend/src/turnstile.ts
+77
View File
@@ -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 }
}