ReCAPTCHA v3 не работает angular 6 - ошибка выполнения

Я реализую Google reCAPTCHA v3 с Angular 6.

<script src='https://www.google.com/recaptcha/api.js?render=KEY'></script>

Добавлен скрипт в index.html

В моем компоненте приложения

constructor(
    @Inject(DOCUMENT) private document: any
) {
    this.grecaptcha = this.document.grecaptcha;
}

и когда я нажимаю "Отправить форму",

this.grecaptcha.execute('KEY', { action: 'action_name' })
  .then(function (token) {
      // Verify the token on the server.
      console.info(token);
});

Но,

ERROR TypeError: Cannot read property 'execute' of undefined

angular google-api recaptcha captcha recaptcha-v3

13.12.2018 13:35

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

3 396

Ответы 2

объект должен быть доступен из окна, поэтому все, что вам нужно, это объявить его поверх вашего ts файла:

declare const grecaptcha: any;

тогда вы можете использовать его в своем классе, например:

grecaptcha.execute('KEY', { action: 'action_name' })
  .then(function (token) {
      // Verify the token on the server.
      console.info(token);
})

Вы также можете попробовать установить типизацию @types/grecaptcha, чтобы получить какие-то подсказки, чтобы сделать вашу жизнь немного проще.

Property 'grecaptcha' does not exist on type 'Window'

— 13.12.2018 13:50

все еще не получается grecaptcha

— 13.12.2018 18:35

13.12.2018 13:40

Во-первых, убедитесь, что вы добавляете правильный скрипт и siteKey для V3 reCaptcha в index.html (не V2) ... Правильный скрипт и siteKey помогут вам загрузить внешнюю библиотеку Google и сделать ее доступной в window.grecaptcha. Я предлагаю вам еще один способ добавить скрипт с помощью машинописного кода в ваш component.ts. Просто вызовите эту функцию в onInit() или AfterViewInit().

addScriptSrc() {
  let script: any = document.getElementById('script');
  if (!script) {
    script = document.createElement('script');
  }
  const body = document.body;
  script.innerHTML = '';
  script.src = 'https://www.google.com/recaptcha/api.js?render=<your_sitekey>';
  script.async = false;
  script.defer = true;
  body.appendChild(script);
 }

Во-вторых, после добавления скрипта и ключа сайта в ваш component.ts просто нужно объявить объект окна с помощью declare const window: any;
Наконец, когда ваша форма отправлена:

window.grecaptcha.ready(function() {
        window.grecaptcha.execute(<sitekey>, {action: 'signup'}).then((token) => {
             //Do anything with captcha token
        });
    });

Функция ready() убедитесь, что внешняя библиотека успешно загружена из google api, прежде чем вы execute получите токен.

19.12.2019 18:40