CODEWITHSUNDEEP
recaptchareact-google-recaptcha
Deepesh Rijal
Deepesh Rijal

Reputation: 11

Google recaptcha sends gibberish response while trying to validate in server side

I am using google recaptcha v2. Client side works perfectly and generates token tha i pass to server in order to validate.

I make the api call to google using that token and in response i get gibberish (res.data is gibberis), here is a snippet of my code which makes the api call,

const payload = {
        secret: process.env.NEXT_PUBLIC_RECAPTCHA_SECRET_KEY ?? "",
        response: reCaptchaValue,
        remoteip: undefined,
    };
 const verifyResponse = await axios({
            method: "POST",
            url: `https://www.google.com/recaptcha/api/siteverify`,
            data: payload,
            headers: {
                "Content-Type": "application/json",
            },
        });

is there anything wrong with my call?

I tried various ways of making a post call using axios, but i get same response. if i use the url and paste it in my browser i get nice response but don't get any from here.

Upvotes: 1

Views: 129

Answers (1)

Favour Okenana
Favour Okenana

Reputation: 281

Had a similar problem, the issue it seems is a bug with axios, you can fix it by adding "Accept-Encoding": "application/json" to the headers

    const payload = {
        secret: process.env.NEXT_PUBLIC_RECAPTCHA_SECRET_KEY ?? "",
        response: reCaptchaValue,
        remoteip: undefined,
    };
    const verifyResponse = await axios({
        method: "POST",
        url: `https://www.google.com/recaptcha/api/siteverify`,
        data: payload,
        headers: {
           "Content-Type": "application/json",
           "Accept-Encoding": "application/json",
        },
     });

PS: I have also made a slight change to your post request which ensures it gives the right result for recaptchaV3 as at Nov 2023 which is what I am using.

const payload = {
    secret: process.env.NEXT_PUBLIC_RECAPTCHA_SECRET_KEY ?? "",
    response: recaptchaValue,
  };
  const verifyResponse = await axios({
    method: "POST",
    url: `https://www.google.com/recaptcha/api/siteverify?secret=${payload.secret}&response=${payload.response}`,
    headers: {
      "Accept-Encoding": "application/json",
    },
  });

  console.log(verifyResponse.data);

See this question and answer for more: reCAPTCHA - error-codes: 'missing-input-response', 'missing-input-secret' when verifying user's response (missing details on POST)

Upvotes: 1

Related Questions