Задать вопрос
@BrTiam

Как сделать прохождение капчи обязательной?

А именно х-капчи в моей форме:
  • Вопрос задан
  • 172 просмотра
Подписаться 1 Простой Комментировать
Решения вопроса 1
Psixodelik
@Psixodelik
Преподаватель на Hexlet
Нужно на стороне сервера ловить ответ капчи. Смотрите в сторону JS Api капчи https://docs.hcaptcha.com/configuration#jsapi
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Asus331
@Asus331
Я исправляю в ответах ошибки.
Ответ: Почему не работает?

• Нет вызова OnSuccess()
надо ее добавить в те штуки типа: Div class = hCaptcha и в возле настроек Пишем такой код data-callback="OnSuccess" и под ней надо написать Скрипт чтобы Реагировало на OnSuccess а потом под этим скриптом пишем JavaScript который будет реагировать на это Можете попросить ChatGPT В такой ситуации

• Используйте OnExpired
Эту команду вызывает когда капча не пройдена или токен закончился Например прошел reCAPTCHA и долго держишь в галочке тоже есть такое

• Как работает вызов OnSuccess?
Работает он так: Ответы обрабатываются в специальной секретной ссылке hCaptcha. Эта ссылка ловит ответ hCaptcha И потом передает эту функцию На Капчу и она видит пользователь прошел или нет

• Используйте Также Ещё команду OnExpired
Эта команда вызывается когда Ты отправил форму а капча не пройдена

Пример:

Также, Вы Можете Изменить код для перенаправления на другой сайт на стороне OnSuccess Если хотите

Пример кода:
<center>
  <!DOCTYPE html>

<html lang="ru">

<head>

 <meta charset="utf-8">

 <title>Пример сайта</title>

 <style>

 body {

 background-image: url("https://captcha-backgrounds.s3.yandex.net/static/default-background.jpg");

 background-size: cover;

 }

 </style>

</head>

<body>

 <!-- Ваш контент -->

</body>

</html>
<!DOCTYPE html>

<html lang="ru">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Обязательная hCaptcha</title>

    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>

    <style>

        body {

            font-family: 'Arial', sans-serif;

            display: flex;

            justify-content: center;

            align-items: center;

            min-height: 100vh;

            

        }

        .form-container {

            background: white;

            padding: 20px;

            border-radius: 22px;

            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

        }

        .hidden {

            display: none;

        }

        .success-message {

            color: green;

            text-align: center;

        }

        .error-message {

            color: red;

            text-align: center;

        }

        button {

            margin-top: 20px;

        }

    </style>

</head>

<body>

    <div class="form-container">

        <h2>Проверка hCaptcha</h2>

        <div class="h-captcha" data-sitekey="8b9a4d2c-3b16-46a2-8d18-f9d6eccabb50" data-callback="onSuccess" data-expired-callback="onExpired"></div>

        <div id="hcaptcha-success-message" class="hidden">

            <p style="color: green;">Спасибо За прохождение Проверки!</p>
          <p style="color: green;">Успех</p>


        </div>

        <div id="hcaptcha-error-message" class="hidden error-message">Пожалуйста, подтвердите, что вы не робот.</div>

        <button id="submit-button">Отправить</button>

    </div>

    <script>

        let isCaptchaSuccess = false;

        function onSuccess(token) {

            isCaptchaSuccess = true;

            document.getElementById('hcaptcha-success-message').classList.remove('hidden');

            document.getElementById('hcaptcha-error-message').classList.add('hidden');

        }

        function onExpired() {

            isCaptchaSuccess = false;

            document.getElementById('hcaptcha-success-message').classList.add('hidden');

        }

        document.getElementById('submit-button').addEventListener('click', function() {

            if (isCaptchaSuccess) {

                // Здесь вы можете обработать форму или выполнить другую логику

                console.log('Капча пройдена успешно! Отправка формы...');

                // Например, отправляя данные на сервер

                // fetch('ваш_серверный_адрес', {

                //     method: 'POST',

                //     body: JSON.stringify({ /* ваши данные */ }),

                //     headers: {

                //         'Content-Type': 'application/json',

                //     },

                // });

            } else {

                // Отобразите сообщение об ошибке

                document.getElementById('hcaptcha-error-message').classList.remove('hidden');

            }

        });

    </script>

</body>

</html>

А где элемент зелёного текста можете также написать Что под ней появится Например Кнопка отправить при прохождении И наслаждайтесь кодом Но ответ длинный писал это 9 часов
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы