### Manage Development and Deployment with Wrangler
Source: https://context7.com/cloudflare/turnstile-demo-workers/llms.txt
Commands for installing dependencies, running the local development server, and publishing the worker to Cloudflare.
```bash
# Install dependencies
npm install
# Run local development server
npm run dev
# > wrangler dev src/index.mjs --local
# ⛅️ wrangler 2.1.7
# ⎔ Starting a local server...
# Press [b] to open browser, [d] for Devtools, [x] to exit
# Deploy to Cloudflare Workers
npm run deploy
# > wrangler publish src/index.mjs
# Total Upload: 2.94 KiB / gzip: 1.33 KiB
# Published turnstile-demo-workers
# https://turnstile-demo-workers....workers.dev
```
--------------------------------
### Initialize Turnstile widget
Source: https://github.com/cloudflare/turnstile-demo-workers/blob/main/src/explicit.html
JavaScript callback function to render the Turnstile widget once the script is loaded.
```javascript
// This function is called when the Turnstile script is loaded and ready to be used. // The function name matches the "onload=..." parameter. function _turnstileCb() { console.debug('_turnstileCb called'); turnstile.render('#myWidget', { sitekey: '1x00000000000000000000AA', theme: 'light', }); }
```
--------------------------------
### Configure Wrangler Settings
Source: https://context7.com/cloudflare/turnstile-demo-workers/llms.txt
The wrangler.toml file defines the worker name, development environment, and compatibility date.
```toml
# wrangler.toml
name = "turnstile-demo-workers"
workers_dev = true
compatibility_date = "2022-09-26"
```
--------------------------------
### Style the login form
Source: https://github.com/cloudflare/turnstile-demo-workers/blob/main/src/explicit.html
CSS rules to center the login form and define its layout properties.
```css
html, body { height: 100%; } body { display: flex; align-items: center; padding-top: 40px; padding-bottom: 40px; background-color: #fefefe; } .form-signin { width: 100%; max-width: 330px; padding: 15px; margin: auto; } .form-signin .checkbox { font-weight: 400; } .form-signin .form-floating:focus-within { z-index: 2; } .form-signin input[type="text"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; }
```
--------------------------------
### Implement Cloudflare Worker Fetch Handler
Source: https://context7.com/cloudflare/turnstile-demo-workers/llms.txt
The main entry point for the Worker, routing incoming requests to serve HTML pages or process POST requests for token validation.
```javascript
// src/index.mjs
import explicitRenderHtml from './explicit.html';
import implicitRenderHtml from './implicit.html';
export default {
async fetch(request) {
// Handle POST requests for token validation
if (request.method === 'POST') {
return await handlePost(request);
}
// Serve HTML pages based on URL path
const url = new URL(request.url);
let body = implicitRenderHtml;
if (url.pathname === '/explicit') {
body = explicitRenderHtml;
}
return new Response(body, {
headers: {
'Content-Type': 'text/html',
},
});
},
};
```
--------------------------------
### Implement Implicit Turnstile Rendering
Source: https://context7.com/cloudflare/turnstile-demo-workers/llms.txt
Configures the Turnstile widget to render automatically upon page load using the cf-turnstile class.
```html
Turnstile - Dummy Login Demo
```
--------------------------------
### Render Turnstile Widget Explicitly
Source: https://context7.com/cloudflare/turnstile-demo-workers/llms.txt
Use the turnstile.render() API to manually initialize the widget after the script loads. This is ideal for dynamic forms or post-load rendering.
```html
Turnstile - Dummy Login Demo
```
--------------------------------
### Validate Turnstile Tokens Server-Side
Source: https://context7.com/cloudflare/turnstile-demo-workers/llms.txt
Extracts the Turnstile token from form data and verifies it against the Cloudflare siteverify API.
```javascript
// Server-side token validation
const SECRET_KEY = '1x0000000000000000000000000000000AA'; // Demo secret key
async function handlePost(request) {
const body = await request.formData();
// Extract Turnstile token from form submission
const token = body.get('cf-turnstile-response');
const ip = request.headers.get('CF-Connecting-IP');
// Validate token with Cloudflare's siteverify API
let formData = new FormData();
formData.append('secret', SECRET_KEY);
formData.append('response', token);
formData.append('remoteip', ip);
const result = await fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
body: formData,
method: 'POST',
});
const outcome = await result.json();
if (!outcome.success) {
return new Response('The provided Turnstile token was not valid! \n' + JSON.stringify(outcome));
}
// Token validated successfully - proceed with application logic
return new Response('Turnstile token successfuly validated. \n' + JSON.stringify(outcome));
}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.