CAPTCHA recipe needs checking

[sarah11918]

📚 Subject area/topic

Recipe: captcha

📋 Page(s) affected (or suggested, for new content)

https://docs.astro.build/en/recipes/captcha/

📋 Description of content that is out-of-date or incorrect

We received two comments on Feedback Fish that some code needs updating. Would love help verifying and if necessary correcting this!

Comment 1:
Hello! I wasn't able to get the recaptcha code on https://docs.astro.build/en/recipes/captcha/ working, but upon searching the error being thrown I found this solution: https://stackoverflow.com/questions/52416002/recaptcha-error-codes-missing-input-response-missing-input-secret-when-v

This is the code for /recaptcha.js I have now. It appears to be functioning but I am very much a junior dev—so take it with a grain of salt.

export const prerender = false;

export async function POST({ request }) {
    const data = await request.json();

    const recaptchaURL = "https://www.google.com/recaptcha/api/siteverify";

    const response = await fetch(recaptchaURL, {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: `secret=${import.meta.env.RECAPTCHA_SECRET}&response=${
            data.recaptcha
        }`,
    });

    const responseData = await response.json();

    console.log("Response: ", JSON.stringify(responseData));

    return new Response(JSON.stringify(responseData), { status: 200 });
}

Comment 2:

Hey there,
I want to point out that Astro docs have some issues with an example:
https://docs.astro.build/en/recipes/captcha/
The example should be updated with the correct code as below:

export async function POST({ request }) {
  const data = await request.json();

  const recaptchaURL = 'https://www.google.com/recaptcha/api/siteverify';

 const stringify = `secret=${requestBody.secret}&response=${requestBody.response}`;
  const response = await fetch(recaptchaURL, {
    method: "POST",
 headers: {
            'content-type': 'application/x-www-form-URL-encoded',
        },
    body: stringify
  });

  const responseData = await response.json();

  return new Response(JSON.stringify(responseData), { status: 200 });
}

🖥️ Reproduction in StackBlitz (if reporting incorrect content or code samples)

No response

[mingjunlu]

I've confirmed that there is an error in the verification process when following the instructions in Verify a Captcha.

{
  "success": false,
  "error-codes": ["missing-input-secret"]
}

As suggested in the comments, it seems necessary to include 'Content-Type': 'application/x-www-form-urlencoded' in the headers, and the body format should not be in JSON.

I'll submit a PR to adjust the code snippet on the documentation page 🔜