Проверка Captcha
Серверные эндпоинты можно использовать в качестве конечных точек REST API для выполнения таких функций, как аутентификация, доступ к базе данных и проверка, не раскрывая конфиденциальных данных клиенту.
В этом рецепте API-маршрут используется для проверки Google reCAPTCHA v3 без раскрытия секрета клиентам.
Необходимые условия
Заголовок раздела Необходимые условия- Проект с включенным SSR (
output: 'server')
Рецепт
Заголовок раздела Рецепт-
Создайте конечную точку
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 });} -
Получите доступ к вашему эндпоинту, используя
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>