? ????? Next.js? ???? ??? React ?????? ??? Google ReCAPTCHA v3 ?? ??? ???????. ReCAPTCHA ??? ????? ??? ???? ?? ??? ?????.

???

• ??

• ?????

1??: ReCAPTCHA ?? ?? ??

Google ReCaptcha V3? ???? ?? ??? ?????.

2??: ReCaptcha ????? ????

<Script src={`https://www.google.com/recaptcha/enterprise.js?render=${process.env.NEXT_PUBLIC_RE_CAPTCHA_SITE_KEY}`} />

??: ??? ? ?? ?? ???? ??? ??? ?????.

3??: ?? ????? ?? ??? ??

const loginClickHandler = (event) => {
  event.preventDefault();

  grecaptcha.enterprise.ready(async () => {
    const token = await grecaptcha.enterprise.execute(
      process.env.NEXT_PUBLIC_RE_CAPTCHA_SITE_KEY,
      { action: "LOGIN" }
    );

    await submit(token);
  });
};

grecaptcha? ??? ????? ?? ???? ?????.

??: Next.js? ???? ?? ????? ???? ?? ?? ??? NEXT_PUBLIC ???? ?? ??? ?????.

???? ???? ???? ?? grecaptcha ???? ? ?? ???? ???? ???? ?? ??? ?????.

• window.grecaptcha.enterprise.ready: Google reCAPTCHA ??? ??? ??? ???? ?????.
• window.grecaptcha.enterprise.execute: ?? ?? ??? ?????.

????? ??? ?? ?? ??? ?? ???? ???? ?????(?? ???? Lambda ??? ???? ????).

const submit = async (code) => {
  await fetch("`/.netlify/functions/react-recaptcha-v3-nextjs", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ code }),
  });
};

??: ?? ??? ?? ?? ??? ??, ?? ?? ???? ???? ?? ???? ?? ?? ?? ?? ???? ???.

4??: ????? ???? ??? ??

const validateReCaptcha = async (captcha) => {
  const url = `https://www.google.com/recaptcha/api/siteverify?secret=${process.env.RE_CAPTCHA_SECRET_KEY}&response=${captcha}`;
  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ captcha }),
  });

  return response.json();
};

validateReCaptcha? Google API ?????? ???? SECRET_KEY(?? ??? ???)? ??????? ??? Captcha ??? ???? ??? ??????.

Captcha? ??? ?? API ??? ??? ????.

{
  "success": true,
  "challenge_ts": "2024-11-24T03:04:34Z",
  "hostname": "localhost",
  "score": 0.9
}

??

ReCaptcha? ?? ?? ??? ???? ?? ????? ?? ??? ???? ? ?? ?????. Google? (?? ?? ??) ? ?? ?? 10,000?? ??? ???? ?? ??? ????? ?? ??????? ??? ??? ???. Google? ???? ?????? ???? ??? ? ?????. ?? ??(????? ???? SITE_KEY, ?? ???? SECRET_KEY)? ???? ???.

???? ? ?? ??? SECRET_KEY? ????? ?? ?????? ? ??? ????. ??? ?? ??????? ??? ??? ? ????. SITE_KEY? ?????????.

? ??? React: ReCAPTCHA ????? ? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!