CODEWITHSUNDEEP
javascripthtmlinternet-explorercaptcha
Chris D
Chris D

Reputation: 11

ReCaptcha v3 not feeding response token object in IE 11

I'm working on an MVC .Net application. We introduced reCaptcha v3 in it recently, it works perfectly in Chrome and Firefox, but not at all in IE. Here is the code contained in the header section: 

    <script src="https://www.google.com/recaptcha/[email protected]"></script>
    <script type="text/javascript">
    grecaptcha.ready(function () {
        var test = grecaptcha.execute('@ViewBag.CaptchaSiteKey', { action: '@ViewBag.CaptchaEnvironment'+'_' + '@ViewBag.CaptchaActionName'}).then(
            function (token) {
                // verify the token on the server
                document.getElementById("RecaptchaResponse").value = token;
            }, function (reason) {
                document.getElementById("RecaptchaResponse").value = reason;
            });
    });
    </script>

The Viewbag variables are set as expected, nothing is missing.

The object that need to be fed is created in the form contained in my body section:

input id="RecaptchaResponse" name="RecaptchaResponse" type="hidden" autocomplete="off"

But remains empty when using in IE11.

I've read many articles that were kind of speaking about such behavior, but nothing worked.

Thanks you in advance

Upvotes: 1

Views: 3220

Answers (1)

Eric M.
Eric M.

Reputation: 31

Google reCAPTCHA v3 utilizes "JavaScript Promises" in order to function properly.

In your code example, grecaptcha.execute(...) is issuing a "promise" for a token. Once that promise is "fulfilled", the .then(function() { ... }) portion of your code is executed.

Modern versions of Chrome/Firefox support JavaScript Promises. Unfortunately, IE11 does not. In order for promises to work on IE11, you would need to include a polyfill (see: https://github.com/stefanpenner/es6-promise).

Upvotes: 3

Related Questions