Cloudflare Turnstile en login y registro (Next.js)
- lib/turnstile.ts: verifyTurnstile(token, ip) contra siteverify (fail-closed). - components/Turnstile.tsx: widget cliente (carga el script de Cloudflare, callback con el token). Site key por NEXT_PUBLIC_TURNSTILE_SITE_KEY; secreto server-only. - LoginForm/RegisterForm: widget + token en el POST; submit deshabilitado hasta resolver el captcha (si hay site key). - Routes login/register: verifican el token antes de continuar (error captchaFailed). - Catálogos: captchaFailed. Verificado: POST sin token -> captchaFailed en login y registro (enforcement server). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,78 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useRef } from 'react'
|
||||
|
||||
interface TurnstileApi {
|
||||
render: (
|
||||
el: HTMLElement,
|
||||
opts: {
|
||||
sitekey: string
|
||||
theme?: 'auto' | 'light' | 'dark'
|
||||
callback?: (token: string) => void
|
||||
'error-callback'?: () => void
|
||||
'expired-callback'?: () => void
|
||||
},
|
||||
) => string
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
turnstile?: TurnstileApi
|
||||
}
|
||||
}
|
||||
|
||||
const SCRIPT_ID = 'cf-turnstile-script'
|
||||
|
||||
/** Widget de Cloudflare Turnstile. Llama onVerify(token) cuando se resuelve. */
|
||||
export function Turnstile({ onVerify }: { onVerify: (token: string) => void }) {
|
||||
const ref = useRef<HTMLDivElement>(null)
|
||||
const rendered = useRef(false)
|
||||
const cb = useRef(onVerify)
|
||||
cb.current = onVerify
|
||||
const siteKey = process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY
|
||||
|
||||
useEffect(() => {
|
||||
if (!siteKey) return
|
||||
let cancelled = false
|
||||
|
||||
function render() {
|
||||
if (cancelled || rendered.current || !ref.current || !window.turnstile) return
|
||||
rendered.current = true
|
||||
window.turnstile.render(ref.current, {
|
||||
sitekey: siteKey!,
|
||||
theme: 'dark',
|
||||
callback: (t) => cb.current(t),
|
||||
'error-callback': () => cb.current(''),
|
||||
'expired-callback': () => cb.current(''),
|
||||
})
|
||||
}
|
||||
|
||||
if (window.turnstile) {
|
||||
render()
|
||||
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)
|
||||
render()
|
||||
}
|
||||
}, 200)
|
||||
return () => {
|
||||
cancelled = true
|
||||
window.clearInterval(iv)
|
||||
}
|
||||
}, [siteKey])
|
||||
|
||||
if (!siteKey) return null
|
||||
return <div ref={ref} className="my-3 flex justify-center" />
|
||||
}
|
||||
Reference in New Issue
Block a user