Naar inhoud gaan
supastack
Blader door de docs
WebTanStack Start

For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /nl/docs/web/captcha.md (or send Accept: text/markdown).

Spambescherming

Via env schakelbare Turnstile-controles op publieke formulieren en auth-endpoints.

Walkthrough voor beginners

Vereisten: Lees de twee onderstaande beginnershandleidingen, voltooi de lokale webconfiguratie en open deze monorepo in de root van uw editor. Webinstellingen horen thuis in apps/web/.env.local; Next.js leest de root .env niet. /dashboard in de standaard nepmodus is een demo zonder database; /auth heeft een gemigreerde database nodig.

Korte termen: een werkruimte bestaat uit de afzonderlijke gebruikers, gegevens en instellingen van één team. De server is de vertrouwde backend; houd providersleutels uit de browser- en telefooncode. Een migratie is een versiebeheer van de database, waarbij tabellen worden gemaakt of bijgewerkt. Een AI-model is de motor die antwoord geeft; de modelcatalogus is de serverlijst met beschikbare model-ID's en prijzen. Een provider is een externe service, zoals een AI-, e-mail- of factureringsservice. Een recht is een subsidie ​​waarmee een werkruimte een functie kan gebruiken. Een webhook is een bericht dat de ene service naar de URL van een andere service verzendt.

1. Maak een Turnstile-testwidget voor de exacte lokale/geïmplementeerde hostnaam. Stel in apps/web/.env.local CAPTCHA_PROVIDER=turnstile en NEXT_PUBLIC_TURNSTILE_SITE_KEY in; plaats TURNSTILE_SECRET_KEY alleen in het geheime serverarchief.

2. Start opnieuw en verzend een testcontactformulier.

3. Verwacht de uitdaging en een succesvol valid-token-antwoord. Als elk verzoek mislukt, vergelijk dan de hostnaam en het sleutelpaar; stel nooit de geheime sleutel bloot.

Voor aangepaste code begint u met de meegeleverde prompts/README.md en kopieert u de dichtstbijzijnde prompt: prompts/new-app-screen.md voor een app-scherm of prompts/new-landing-page.md voor een openbare pagina. Voor server-, database- of providerwerk geeft u uw codeeragent de taak van deze handleiding en vraagt ​​u hem om AGENTS.md, .ai/PROJECT_CONTEXT.md en overeenkomende .ai/-mirrors te lezen; inspecteer de exacte bronbestanden die hier worden genoemd; maak een lijst van bestanden en controleer deze voordat u deze bewerkt; behoud van het eigendom van de werkruimte en geheimen voor de server; en laat je het verschil zien. Vertel het gewenste gedrag, invoer- en uitvoervelden, toegestane rollen, verwacht succes en fouten, en het testaccount, de provider of het apparaat. Gebruik voorbeeldwaarden; plak nooit een echt geheim.

Schakel beide sleutels in

CAPTCHA_PROVIDER=off is de standaardwaarde. Selecteer turnstile, configureer de overeenkomende hostnaam in uw Turnstile-applicatie en geef beide sleutels op. NEXT_PUBLIC_TURNSTILE_SITE_KEY is openbaar; TURNSTILE_SECRET_KEY wordt alleen gebruikt door de serververifier.

CAPTCHA_PROVIDER=turnstile
NEXT_PUBLIC_TURNSTILE_SITE_KEY=your-site-key
# TURNSTILE_SECRET_KEY belongs in the server secret store.

Bewaar de beschermde oppervlakken

De poort omvat contact-/nieuwsbriefformulieren en Better Auth aanmeldings-, aanmeldings-, OTP-eindpunten voor het opnieuw instellen van wachtwoorden. Het vormt een aanvulling op validatie/snelheidsbeperking; het is geen vervanging voor sessies of werkruimteautorisatie.

Controleer afwijzing en herstel

Test een geldig token, een ontbrekend/verlopen/ongeldig token, een verificatiefout en een nieuwe poging nadat de clientwidget opnieuw is ingesteld. Zorg voor bruikbare menselijke controlekopieën en toetsenbordtoegang; controleer de dekking van de gekozen authenticatie-engine voordat u van provider verandert.

Setup en configuratie

CAPTCHA_PROVIDER selecteert de verifier: off (de standaard, zodat lokale ontwikkeling credentialvrij blijft) of turnstile. Turnstile inschakelen vereist TURNSTILE_SECRET_KEY op de server en NEXT_PUBLIC_TURNSTILE_SITE_KEY voor de client-widget — het config-schema laat de opstart falen als er een ontbreekt.

packages/web-core/src/captcha.ts componeert één procesbrede verifier die het token met een timeout van tien seconden naar Cloudflares siteverify-endpoint post en gesloten faalt — een onverifieerbaar token geldt nooit als bewijs van menselijkheid.

CAPTCHA_PROVIDER=turnstile
TURNSTILE_SECRET_KEY=…           # server-only
NEXT_PUBLIC_TURNSTILE_SITE_KEY=…

Guarded: sign-in/up, OTP send, reset,
contact + newsletter forms

Implementatieworkflow

CaptchaWidget (src/captcha-widget.tsx) rendert de widget en injecteert het veld cf-turnstile-response in het bovenliggende formulier, terwijl auth-clientcalls het token in de x-captcha-response-header meenemen. De contact- en newsletter-acties verifiëren vóór het schrijven — een mislukte controle geeft status=captcha terug in plaats van een lead aan te maken.

packages/auth mount de captcha-plugin van better-auth wanneer de provider aan staat; CAPTCHA_ENDPOINTS dekt de credential-invoer- en token-uitgevende routes — sign-in, sign-up, OTP-verzending, wachtwoordreset. Consumerende endpoints zoals check-verification-otp blijven buiten de lijst: daar is de OTP of het token zelf het bewijs.

Verificatie en probleemoplossing

Verstuur elk beschermd formulier met een ontbrekende en met een misvormde token — beide moeten gesloten falen. Verifieer dat een onbereikbare siteverify weigert in plaats van door te laten, dat provider=off lokale ontwikkeling open laat, en dat het secret nooit in client-bundles of logs terechtkomt.