React: ReCAPTCHA 클라이언트 및 서버 데모

이 데모에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!