|
1 | 1 | --- |
2 | | -title: Get started with Turnstile |
| 2 | +title: Get started |
3 | 3 | pcx_content_type: get-started |
4 | 4 | sidebar: |
5 | 5 | 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 |
8 | 20 |
|
9 | 21 | --- |
10 | 22 |
|
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. |
12 | 30 |
|
13 | | -This guide will get you started on setting up the Turnstile widget. |
| 31 | +2. **Server-side**: Validate the response |
14 | 32 |
|
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. |
16 | 34 |
|
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 | +--- |
18 | 50 |
|
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 |
20 | 52 |
|
21 | | -The sitekey is public and used to invoke the Turnstile widget on your site. |
| 53 | +Follow the steps below to implement Turnstile. |
22 | 54 |
|
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 |
24 | 56 |
|
25 | | -:::note |
| 57 | +First, you must create a Turnstile widget to get your sitekey and secret key. |
26 | 58 |
|
27 | | -You can find special sitekeys to be used for testing in the [testing](/turnstile/troubleshooting/testing/) section. |
28 | | -::: |
| 59 | +Select your preferred method: |
29 | 60 |
|
30 | | -### New sites |
31 | 61 |
|
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> |
38 | 63 |
|
39 | | -### Existing sites |
| 64 | +<LinkButton href="/">API</LinkButton> |
40 | 65 |
|
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> |
47 | 67 |
|
48 | | -## Add the Turnstile widget to your site |
| 68 | +### 2. Embed the widget |
49 | 69 |
|
50 | | -To add the Turnstile widget: |
| 70 | +Add the Turnstile widget to your webpage forms and applications. |
51 | 71 |
|
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 |
53 | 73 |
|
54 | | -<div> |
| 74 | +### 3. Validate tokens |
55 | 75 |
|
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. |
59 | 77 |
|
60 | | -</div> |
| 78 | +Refer to [Validate the tokens] to secure your implementation with proper token verification. |
61 | 79 |
|
62 | | -2. [Render the client-side integration](/turnstile/get-started/client-side-rendering/) |
| 80 | +## Additional implementation options |
63 | 81 |
|
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 |
66 | 83 |
|
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. |
68 | 85 |
|
69 | | -<Render file="siteverify-warning" /> |
| 86 | +### Migration from other CAPTCHAs |
70 | 87 |
|
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. |
73 | 89 |
|
74 | | -:::note |
| 90 | +Refer to [Migration](/turnstile/migration/) for step-by-step migration guidance from other CAPTCHA services. |
75 | 91 |
|
76 | | -Rendering the client-side integration & validating the server-side response are both necessary to allow Turnstile to function properly. |
77 | | -::: |
|
0 commit comments