Как использовать reCaptcha V3 с jQuery во внешнем интерфейсе? - PullRequest
Новая
       20

Как использовать reCaptcha V3 с jQuery во внешнем интерфейсе?

0 голосов
/ 24 сентября 2019

Ниже приведен HTML-код моей страницы входа: 

<!DOCTYPE HTML>
<html>

<head>
    <script type="text/javascript" src="/resources/libraries/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?render=<recaptchaSiteKey>"></script>
</head>

<body>
    <form id="loginForm">
        <table>
            <tr>
                <td>User:</td>
                <td><input type="text" name="username" /></td>
            </tr>
            <tr>
                <td>Password:</td>
                <td><input type="password" name="password" /></td>
            </tr>
            <tr>
                <td><button type="submit">Submit</button></td>
            </tr>
        </table>
    </form>
    <input id="recaptchaSiteKey" type="hidden" value="<recaptchaSiteKey>" />

    <script type="text/javascript">
        $(document).ready(() => {
            $('#loginForm').submit((event) => {
                event.preventDefault();
                const siteKey = $('#recaptchaSiteKey').val();

                grecaptcha.ready(() => {
                    grecaptcha
                        .execute(siteKey, {
                            action: 'login'
                        })
                        .then((token) => {
                            $('#loginForm').prepend(`<input type="hidden" name="g-recaptcha-response" value="${token}" />`);
                            const submittableForm = $(`<form action="/login" method="POST" />`);

                            $('#loginForm *').filter(':input')
                                .each((index, element) => {
                                    const jqElement = $(element);
                                    const name = jqElement.attr('name');
                                    const value = jqElement.val();

                                    if (name && value) {
                                        submittableForm.append(`<input type="hidden" name="${name}" value="${value}" />`)
                                    }
                                });

                            $(document.body).append(submittableForm);
                            $(submittableForm).submit();
                        });
                });
            });
        });
    </script>
</body>

</html>

В документации reCaptcha V3 - интеграция с внешним интерфейсом упоминается: 

<script src="https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key"></script>
<script>
grecaptcha.ready(function() {
    grecaptcha.execute('_reCAPTCHA_site_key_', {action: 'homepage'}).then(function(token) {
       ...
    });
});
</script>
  1. Загрузите API JavaScript с вашим ключом сайта
  2. Вызовите grecaptcha.execute для действия или при загрузке страницы
  3. Отправьте токен в бэкэнд с запросом на подтверждение

Мне интересно, правильно ли я использую grecaptcha.execute.

...