how to integrate google-recaptcha in oracle-jet

Question

I am trying to integrate google-recaptcha but no success.

Getting error

feedback.js:39 Uncaught TypeError: grecaptcha.render is not a function

main.js 'googlerecaptcha':'https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit',

define(['ojs/ojcore', 'knockout', 'jquery', 'appController', 'ckeditor', 'googlerecaptcha', 'ojs/ojlabel',  
    'ojs/ojknockout', 'ojs/ojinputtext', 'ojs/ojformlayout'],  
        function (oj, ko, $, app, ckeditor, grecaptcha) {  
            /** 
             * The view model for the main content view template 
             */  
            function feedbackViewModel() {  
                var self = this;  
                // For small screens: labels on top  
                // For medium screens and up: labels inline  
                this.labelEdge = ko.computed(function () {  
                    return app.smScreen ? "top" : "start";  
                }, this);  



                onloadCallback = function (a) {  
                    grecaptcha.render('submit', {  
                        'sitekey': 'YOUR_API_KEY',  
                        'callback': self.onSubmit  
                    }, true);  
                };  


                this.handleActivated = function (info) {  
                };  
                self.onSubmit = function (token) {  
                    console.info("google recatpcha onSubmit", token)  
                    //do validation/application code using token  
                    var data = {secret: grecaptcha, response: recaptchaToken};  
                    $.post({  
                        url: "https://www.google.com/recaptcha/api/siteverify",  
                        form: data  
                    }).then(function (e) {  
                        //recaptcha service called...check result  
                        var resp = JSON.parse(e);  
                        if (resp.success == false) {  
                            console.info("recaptcha token outcome is false")  


                        } else {  
                            console.info("recaptcha token validated")  
                        }  
                    });  
                };  
            }  


            return feedbackViewModel;  
        });  

Answer 1

Do you have a mapping for 'googlerecaptcha' in src/js/path_mapping.json? If I go to https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit, I do not see that it is returning any valid object. So most likely 'grecaptcha' variable is undefined.

reCaptcha + RequireJS

Looks like reCaptcha is a function that has to be executed vs an object that can be interacted with directly. So you may need a different approach, something mentioned in this thread.