Как выполнить reCAPTCHA в проекте Angular 4 - PullRequest
Новая
       19

Как выполнить reCAPTCHA в проекте Angular 4

0 голосов
/ 18 мая 2019

Хотите защитить вызовы API моего проекта с помощью аутентификации Google reCaptcha.Но столкнулся с проблемой при вызове метода reCaptcha из моего проекта.

Это пример кода, предоставленный в документации Google для reCaptcha 

 <script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
  <script>
  grecaptcha.ready(function() {//error on this line
      grecaptcha.execute('reCAPTCHA_site_key', {action: 'homepage'}).then(function(token) {
         ...
      });
  });
  </script>

https://developers.google.com/recaptcha/docs/v3

Для достижения этой целиЯ вставил исходный URL в dom в мой app.component.ts 

const dynamicallyLoadScript = (url, options, callback) => {
    let script = document.createElement("script");
    script.type = "text/javascript";
    if (options.async) {
      script.async = true;
    }
    if (script.readyState) {
      //IE
      script.onreadystatechange = function() {
        if (script.readyState === "loaded" || script.readyState === "complete") {
          script.onreadystatechange = null;
          if (typeof callback === "function") {
            callback();
          }
        }
      };
    } else {
      //Others
      script.onload = function() {
        if (typeof callback === "function") {
          callback();
        }
      };
    }
    script.src = url;
    document.body.appendChild(script);
  };

, после этого я вызвал этот метод, как показано ниже: - 

  window.loadingGrecaptcha = true;
  dynamicallyLoadScript("https://www.google.com/recaptcha/api.js?render=" + GetConfig.gToken, {}, () => {
    grecaptcha.ready(function() {
      window.loadingGrecaptcha = false;
    });
  });

Мой app.component 

import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from './shared/services/authentication.service';

@Component({
  selector: 'admin-app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  isLoggedIn: boolean;
  grecaptcha: any;
  constructor(private authService: AuthenticationService) {
    authService.loggedIn$.subscribe(
      data => {
        this.ngOnInit();
      });
  }
  ngOnInit() {
    this.loadScript();
    this.isLoggedIn = this.authService.isAuthenticated();

    if (this.isLoggedIn) {
      this.authService.isLoggedIn();
    }
  }

  dynamicallyLoadScript = (url, options, callback) => {
    let script = document.createElement("script");
    script.type = "text/javascript";
    if (options.async) {
      script.async = true;
    }


    script.src = url;
    document.body.appendChild(script);
    callback();
  };

  loadScript() {
    this.dynamicallyLoadScript("https://www.google.com/recaptcha/api.js?render=" + this.authService.getGreToken(), {}, () => {
      this.grecaptcha.ready(function () {
        //window.loadingGrecaptcha = false;
      });
    });
  }
}

Итак, после получения grecaptcha отсюда я хочу вызвать grecaptcha.execute из какого-то другого компонента.

enter image description here но я готовлюсь - это не функцияв грекапче.

Заранее спасибо.

...