Want to protect API calls of my project using google reCaptcha authentication. But facing a problem when calling reCaptcha method from my project.

This is the sample code provided in google docs for 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

To achieve this I have inserted the source url in dom in my 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);
  };

after this, I called this method like below:-

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

My 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;
      });
    });
  }
}

So, after getting grecaptcha from here I want to call grecaptcha.execute from some other component.

enter image description here but I am getting ready is not a function in grecaptcha.

Thanks in advance.

0 Answers