How am I meant to test turnstile on localhost?
How am I meant to test turnstile on localhost?

<script>
window.addEventListener('load-turnstile', e => {
const script = document.createElement('script');
script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
script.async = true;
document.body.appendChild(script);
script.onload = () => {
const currentComponent = e.detail.component;
const widgetContainer = document.createElement('div');
widgetContainer.setAttribute('slot', 'turnstile');
const WidgetId = turnstile.render(widgetContainer, {
sitekey: '<your site key>',
callback: token => {
const tokenEvent = new CustomEvent('turnstile-token', {
detail: { token: token },
});
currentComponent.dispatchEvent(tokenEvent);
},
});
currentComponent.appendChild(widgetContainer);
};
});
</script><slot name="turnstile"></slot>export function LoadTurnstileWidget(el: HTMLElement) {
const event = new CustomEvent('load-turnstile', {
detail: {
component: el,
},
});
window.dispatchEvent(event);
}
export type TurnstileCallback = (token: String) => void;
export function ListenForTurnstileToken(
attachTo: HTMLElement,
callback: TurnstileCallback
) {
attachTo.addEventListener('turnstile-token', (e: Event) => {
const { token } = (e as CustomEvent).detail;
callback(token);
});
}constructor() {
super();
LoadTurnstileWidget(this);
ListenForTurnstileToken(this, (token: String) => {
console.log('Got', token);
});
}var content = new FormUrlEncodedContent(new Dictionary<string, string>
{
{"secret", "Wrong_secretKey"},
{"response", "Random_string_as_token" },
{"remoteip", remoteIpAddress.ToString() }
});
var response = await _httpClient.PostAsync("https://challenges.cloudflare.com/turnstile/v0/siteverify", content);
if(response.IsSuccessStatusCode)
{
var result = response.ToJson(); //response.Content.ReadFromJsonAsync<CaptchaResponse>();
return result;
}
return $"Error verifying Captcha: {response.StatusCode}";Version "1.1"
Content Object { Headers: […] }
Headers [ {…}, {…} ]
0 Object { Key: "Content-Type", Value: […] }
Key "Content-Type"
Value [ "application/json" ]
1 Object { Key: "Content-Length", Value: […] }
Key "Content-Length"
Value [ "70" ]
StatusCode "ok"
ReasonPhrase "OK"
Headers [ {…}, {…}, {…}, {…}, {…} ]
0 Object { Key: "Date", Value: […] }
Key "Date"
Value [ "Thu, 24 Oct 2024 14:21:25 GMT" ]
0 "Thu, 24 Oct 2024 14:21:25 GMT"
1 Object { Key: "Connection", Value: […] }
Key "Connection"
Value [ "keep-alive" ]
0 "keep-alive"
2 Object { Key: "Server", Value: […] }
Key "Server"
Value [ "cloudflare" ]
3 Object { Key: "CF-RAY", Value: […] }
Key "CF-RAY"
Value [ "8d7a9cf80b6209b0-ARN" ]
0 "8d7a9cf80b6209b0-ARN"
4 Object { Key: "Alt-Svc", Value: […] }
Key "Alt-Svc"
Value [ 'h3=":443"' ]
TrailingHeaders []
RequestMessage Object { Version: "1.1", VersionPolicy: "requestVersionOrLower", RequestUri: "https://challenges.cloudflare.com/turnstile/v0/siteverify", … }
Version "1.1"
VersionPolicy "requestVersionOrLower"
Content Object { Headers: […] }
Method Object { Method: "POST" }
RequestUri "https://challenges.cloudflare.com/turnstile/v0/siteverify"
Headers [ {…} ]
0 Object { Key: "traceparent", Value: […] }
Key "traceparent"
Value [ "00-3fc6a3746c4609166de3f4e37f6e82c3-6eb800d5f07796be-XX" ]
0 "00-3fc6a3746c4609166de3f4e37f6e82c3-6eb800d5f07796be-00"
Properties Object { }
Options Object { }
IsSuccessStatusCode truesuccess(!$response['success'])invalid-input-response // Helper function to make POST requests using fetch
const postRequest = async (data:any) => {
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
return response.json(); // Parse and return JSON response
};
// Generate an idempotency key for the request
const idempotencyKey = crypto.randomUUID();
const firstOutcome = await postRequest({
secret: SECRET_KEY,
response: token,
remoteip: ip,
idempotency_key: idempotencyKey,
});