Skip to content

Commit b5649dc

Browse files
widget mgmt pt 1
1 parent 006f14d commit b5649dc

File tree

5 files changed

+86
-47
lines changed

5 files changed

+86
-47
lines changed

src/content/docs/turnstile/get-started/index.mdx

Lines changed: 59 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,91 @@
11
---
2-
title: Get started with Turnstile
2+
title: Get started
33
pcx_content_type: get-started
44
sidebar:
55
order: 4
6-
group:
7-
label: Get started
6+
---
7+
8+
9+
import { GlossaryTooltip, Render, LinkButton } from "~/components"
10+
11+
This guide will get you started on setting up the Turnstile widget to protect your website from bots while maintaining a seamless user experience.
12+
13+
## Prerequisites
14+
15+
Before you begin, you must have:
16+
17+
- A Cloudflare account
18+
- A website or web application to protect
19+
- Basic knowledge of HTML and your preferred server-side language
820

921
---
1022

11-
import { GlossaryTooltip, Render } from "~/components"
23+
## Implementation
24+
25+
Implementing Turnstile involves two essential components that work together:
26+
27+
1. **Client-side**: Embed the widget
28+
29+
Add the Turnstile widget to your webpage to challenge visitors and generate verification tokens.
1230

13-
This guide will get you started on setting up the Turnstile widget.
31+
2. **Server-side**: Validate the response
1432

15-
If you are currently using a <GlossaryTooltip term="CAPTCHA">CAPTCHA</GlossaryTooltip> service, you can copy and paste our script wherever you have deployed the existing script today.
33+
Verify the tokens on your server using the Siteverify API to ensure they are authentic and have not been tampered with.
1634

17-
## Get a sitekey and secret key
35+
Refer to [Implementation path](/turnstile/get-started/#implementation-path) below for guidance on how to implement Turnstile to your website.
36+
37+
---
38+
39+
## Key security requirements
40+
41+
Mandatory server-side validation
42+
43+
- It is critical to enforce Turnstile tokens with the Siteverify API. The Turnstile token could be invalid, expired, or already redeemed. Not verifying the token will leave major vulnerabilities in your implementation. You must call Siteverify to complete your Turnstile configuration. Otherwise, it is incomplete and will result in zeroes for token validation when viewing your metrics in [Turnstile Analytics](/turnstile/turnstile-analytics/).
44+
45+
Token lifecycle
46+
47+
- Tokens expire after 300 seconds (5 minutes). Each token can only be validated once. Expired or used tokens must be replaced with fresh challenges.
48+
49+
---
1850

19-
To start using the Turnstile widget, you will need to obtain a <GlossaryTooltip term="sitekey">sitekey</GlossaryTooltip> and a <GlossaryTooltip term="secret key">secret key</GlossaryTooltip>. The sitekey and secret key are always associated with one widget and cannot be reused for other widgets.
51+
## Implementation path
2052

21-
The sitekey is public and used to invoke the Turnstile widget on your site.
53+
Follow the steps below to implement Turnstile.
2254

23-
The sitekey and secret key are generated upon the creation of a widget, allowing communication between your site and Cloudflare to verify responses for a solved challenge from Turnstile. Make sure you keep the secret key safe for security reasons.
55+
### 1. Create your widget
2456

25-
:::note
57+
First, you must create a Turnstile widget to get your sitekey and secret key.
2658

27-
You can find special sitekeys to be used for testing in the [testing](/turnstile/troubleshooting/testing/) section.
28-
:::
59+
Select your preferred method:
2960

30-
### New sites
3161

32-
1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/?to=/:account/turnstile) and select your account.
33-
2. Go to **Turnstile**.
34-
3. Select **Add widget** and fill out the site name and [your website's hostname or select from your existing websites](/turnstile/concepts/hostname-management/) on Cloudflare.
35-
4. Select the widget mode.
36-
5. (Optional) Opt in for [pre-clearance support](/turnstile/concepts/pre-clearance-support/).
37-
6. Copy your sitekey and secret key.
62+
<LinkButton href="/">Cloudflare dashboard</LinkButton>
3863

39-
### Existing sites
64+
<LinkButton href="/">API</LinkButton>
4065

41-
1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/?to=/:account/turnstile) and select your account.
42-
2. Go to **Turnstile**.
43-
3. In the widget overview, select **Settings**.
44-
4. Confirm the [hostnames](/turnstile/concepts/hostname-management/) configured.
45-
5. (Optional) Opt in for [pre-clearance support](/turnstile/concepts/pre-clearance-support/).
46-
6. Copy your sitekey and secret key.
66+
<LinkButton href="/">Terraform</LinkButton>
4767

48-
## Add the Turnstile widget to your site
68+
### 2. Embed the widget
4969

50-
To add the Turnstile widget:
70+
Add the Turnstile widget to your webpage forms and applications.
5171

52-
1. Insert the Turnstile script snippet in your HTML's `<head>` element:
72+
Refer to [Embed the widget] to learn more about implicit and explicit rendering methods
5373

54-
<div>
74+
### 3. Validate tokens
5575

56-
```html
57-
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
58-
```
76+
Implement server-side validation to verify the tokens generated by your widgets.
5977

60-
</div>
78+
Refer to [Validate the tokens] to secure your implementation with proper token verification.
6179

62-
2. [Render the client-side integration](/turnstile/get-started/client-side-rendering/)
80+
## Additional implementation options
6381

64-
- [Explicit rendering](/turnstile/get-started/client-side-rendering/#explicitly-render-the-turnstile-widget)
65-
- [Implicit rendering](/turnstile/get-started/client-side-rendering/#implicitly-render-the-turnstile-widget)
82+
### Mobile configuration
6683

67-
## Validate the server-side response
84+
Special considerations are necessary for mobile applications and WebView implementations. Refer to [Mobile implementation]() for more information on mobile application integration.
6885

69-
<Render file="siteverify-warning" />
86+
### Migration from other CAPTCHAs
7087

71-
After you have installed the Turnstile widget on your site, you must configure your server to validate the Turnstile response.
72-
Refer to [Server-side validation](/turnstile/get-started/server-side-validation/).
88+
If you are currently using reCAPTCHA, hCaptcha, or another CAPTCHA service, Turnstile can be a drop-in replacement. You can copy and paste our script wherever you have deployed the existing script today.
7389

74-
:::note
90+
Refer to [Migration](/turnstile/migration/) for step-by-step migration guidance from other CAPTCHA services.
7591

76-
Rendering the client-side integration & validating the server-side response are both necessary to allow Turnstile to function properly.
77-
:::

src/content/docs/turnstile/get-started/client-side-rendering.mdx renamed to src/content/docs/turnstile/get-started/widget-management/client-side-rendering.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Client-side rendering
33
pcx_content_type: get-started
44
sidebar:
5-
order: 1
5+
order: 2
66
---
77

88
import { Render } from "~/components";
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
title: Widget management
3+
pcx_content_type: get-started
4+
sidebar:
5+
order: 1
6+
label: Overview
7+
8+
---
9+
10+
Learn how to create, configure, and manage your Turnstile widgets using the Cloudflare dashboard, API, or Terraform.
11+
12+
## Overview
13+
14+
Turnstile widgets are the foundation of your bot protection implementation.
15+
16+
Every widget has:
17+
18+
- **Sitekey**: Public identifier used in your webpage code
19+
- **Secret Key**: Private key used for server-side validation
20+
- **Configuration**: Mode, hostnames, appearance settings, and other options
21+
22+
:::note[Important]
23+
Regardless of how you create and manage your widgets, you will still need to embed them on your webpage and validate tokens on your server.
24+
:::
25+

src/content/docs/turnstile/get-started/server-side-validation.mdx renamed to src/content/docs/turnstile/get-started/widget-management/server-side-validation.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Server-side validation
33
pcx_content_type: get-started
44
sidebar:
5-
order: 2
5+
order: 3
66
---
77

88
import { GlossaryTooltip, Render, TabItem, Tabs } from "~/components";

0 commit comments

Comments
 (0)