https://gdekomfort.ru/modules/kaptcha/view/js/recaptcha3.js

1/**
2 * Плагин, который инициализирует невидимую Google Recaptcha V3
3 * К форме будет добавлен класс not-initialized, пока инициализируется reCaptcha и отправить форму невозможно
4 * К форме будет добавлен класс submiting, пока будет идти запрос на получение токена и повторно отправить форму будет невозможно
5 * Данные классы можно использовать для стилизации кнопки Отправки.
6 * 
7 * @author ReadyScript lab.
8 */
9
10(function() {
11    /**
12     * Класс обеспечивает работу одной формы с ReCaptchaV3
13     */
14    class reCaptchaV3 {
15
16        constructor(form) {
17            this.form = form;
18            this.submitButton = this.form.querySelector('[type="submit"]');
19            this.canSubmit = false;
20
21            this.bindForm();
22        }
23
24        setCanSubmit(bool) {
25            this.canSubmit = bool;
26            this.submitButton.disabled = !bool;
27        }
28
29        bindForm() {
30            if (typeof(grecaptcha) != 'undefined') {
31                if (this.form) {
32                    this.setCanSubmit(false);
33
34                    this.form.classList.add('not-initialized');
35
36                    //Обрабатываем событие отправки формы. Этот обработчик будет всегда первый
37                    this.form.addEventListener('submit', (event) => {
38
39                        if (!this.form.reCaptchaSubmit) {
40                            let captchaInput = this.form.querySelector('.recaptcha-v3');
41                            if (captchaInput) {
42                                let action = captchaInput.dataset.context ? captchaInput.dataset.context : 'default';
43                                action = action.replace(/[^A-Za-z/_]/g, '');
44
45                                event.preventDefault(); //Запрещаем отправлять форму любым естественным образом.
46                                event.stopPropagation();
47                                // Форму можно будет отправить только после получения токена ReCaptcha.
48
49                                if (this.canSubmit) {
50                                    this.setCanSubmit(false);
51                                    this.form.classList.add('submiting');
52
53                                    //Добавляем токен reCaptcha, а затем повторяем попытку отправки формы
54                                    grecaptcha.execute(global.reCaptchaV3SiteKey, {action: action})
55                                        .then((token) => {
56                                            captchaInput.value = token;
57                                            console.log('call');
58                                            this.form.reCaptchaSubmit = true;
59                                            this.form.submit();
60                                            this.form.classList.remove('submiting');
61                                            this.setCanSubmit(true);
62                                        }, (error) => {
63                                            console.error('ReCaptcha V3 Error' + error);
64                                            this.form.classList.remove('submiting');
65                                            this.setCanSubmit(true);
66                                        });
67                                }
68                            }
69                        }
70                    }, true); //Ловим событие в режиме capture
71
72                    grecaptcha.ready(() => {
73                        //Убираем класс с формы, когда загрузится ReCaptcha
74                        this.form.classList.remove('not-initialized');
75                        this.setCanSubmit(true);
76                    });
77                }
78            } else {
79                alert('Не подключен Google ReCaptcha API.js скрипт');
80            }
81        }
82
83        static init(context) {
84            context.querySelectorAll('form .recaptcha-v3').forEach(it => {
85                let form = it.closest('form');
86                if (form) {
87                    if (!form.reCaptchaV3) {
88                        form.reCaptchaV3 = new reCaptchaV3(form);
89                    }
90                }
91            });
92        }
93    }
94
95    document.addEventListener('DOMContentLoaded', (event) => {
96        reCaptchaV3.init(event.target);
97    });
98
99    document.addEventListener('new-content', (event) => {
100        reCaptchaV3.init(event.target);
101    });
102})();