Пропустить до содержимого

Проверка Captcha

Серверные эндпоинты можно использовать в качестве конечных точек REST API для выполнения таких функций, как аутентификация, доступ к базе данных и проверка, не раскрывая конфиденциальных данных клиенту.

В этом рецепте API-маршрут используется для проверки Google reCAPTCHA v3 без раскрытия секрета клиентам.

Необходимые условия

Заголовок раздела Необходимые условия
  • Проект с включенным SSR (output: 'server')

Рецепт

Заголовок раздела Рецепт

  1. Создайте конечную точку POST, которая принимает данные recaptcha, а затем проверяет их с помощью API reCAPTCHA. Здесь вы можете безопасно определить секретные значения или считать переменные окружения.

    src/pages/recaptcha.js
    export async function POST({ request }) {
      const data = await request.json();
    

      const recaptchaURL = 'https://www.google.com/recaptcha/api/siteverify';
      const requestHeaders = {
        'Content-Type': 'application/x-www-form-urlencoded'
      };
      const requestBody = new URLSearchParams({
        secret: "YOUR_SITE_SECRET_KEY",   // Это может быть переменная среды
        response: data.recaptcha          // Токен, переданный клиентом
      });
    

      const response = await fetch(recaptchaURL, {
        method: "POST",
        headers: requestHeaders,
        body: requestBody.toString()
      });
    

      const responseData = await response.json();
    

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

  2. Получите доступ к вашему эндпоинту, используя fetch из клиентского скрипта::

    src/pages/index.astro
    <html>
      <head>
        <script is:inline src="https://www.google.com/recaptcha/api.js"></script>
      </head>
    

      <body>
        <button class="g-recaptcha"
          data-sitekey="PUBLIC_SITE_KEY"
          data-callback="onSubmit"
          data-action="submit"> Click me to verify the captcha challenge! </button>
    

        <script is:inline>
          function onSubmit(token) {
            fetch("/recaptcha", {
              method: "POST",
              body: JSON.stringify({ recaptcha: token })
            })
            .then((response) => response.json())
            .then((gResponse) => {
              if (gResponse.success) {
                // Проверка капчи прошла успешно
              } else {
                // Проверка капчи не удалась
              }
            })
          }
        </script>
      </body>
    </html>