Submit JSON with Cloudflare Turnstile
Cloudflare Turnstile is a modern reCAPTCHA alternative. It's our peference here at Submit JSON.
Before getting started make sure to reference the Cloudflare Turnstile Getting Started documentation.
✨🤖 Cloudflare Turnstile is available on all paid plans
1. Get a Site Key and Secret Key
- Log in to the Cloudflare dashboard and select your account.
- Go to Turnstile.
- Select Add a site and fill out the form.
- Copy your site key and secret key.
2. Add the Turnstile widget to your front end
- Insert the Turnstile script in your HTML's
<head>tag.
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
- Render the client-side integration.
Follow Cloudflare's instructions on how to render the client-side integration
⚡️ OR ⚡️ if you're using a JS framework there is likely a package that will make the integration easier:
3. Pass your token along with your submission
Once the widget is rendering, you can send the Turnstile response token to our API in two ways.
- It can be passed along in the request body via a
cf-turnstile-responseproperty. This is the Turnstile's default behavior and requires no additional config from you.
document.getElementById('myForm').addEventListener('submit', async function (e) {
e.preventDefault()
const formData = new FormData(this);
const data = Object.fromEntries(formData)
// data is something like { ..., 'cf-turnstile-response': 'xxxxxx'}
const response = await fetch('https://api.submitjson.com/v1/submit/XxXx', {
method: 'POST',
headers: {
'content-type': 'application/json',
'X-API-Key': 'sjk_xxx',
},
body: { data },
})
const submission = await response.json()
})
- If your situation requires more versatility, it can be added to the submission options with a
turnstileTokenkey. For this example we'll use the JS client.
await sj.submit({ name: 'Luffy', loves: 'Meat' }, {
turnstileToken: 'xxxxxxxxxx'
})
Now that you've integrated Turnstile with your front-end it's time to validate the token.
4. Validate the server-side response
We've got you all covered here. Follow these instructions to set it and forget it:
- Head to your endpoint's security settings
- Select Cloudflare Turnstile as your CAPTCHA provider
- Paste in your secret key, and click Save
🚛✨💚 Nice job, submissions to your endpoint are now validated with Cloudflare Turnstile