Support for multiple reCAPTCHAs on one page

Hello,

I was working on implementing a reCaptcha in one of our products and faced a really bad problem. The plugin I was working on was integrating on a page that already has a reCaptcha and that causes an error: "Uncaught Error: reCAPTCHA has already been rendered in this element".

The error is caused by the fact that both of the reCaptchas controls had the same id in the HTML - "recaptcha". If the reCaptcha elements have different id's there would be no problem to have several of the on one page.
I've dug in nopCommerce source code and found the GenerateCaptcha method in Nop.Web.Framework\Security\Captcha\HtmlExtensions.cshtml file. In line 45 an id of "recaptcha" is set for the Id property when creating a new GRecaptchControl. If a unique string is passed each time a new control is created this issue would not be present.

Regards,
Anton

Thanks for the suggestion. Here is a work item.

Solved. Please see this commit

Hi,

Thank you for the quick fixes!

Regards,
Anton

Thank you very much for your attention.

--Multiple Captcha on a Single page v2

1First Html to show a captcha

<div id="newsletter-captcha-box">
                        <nop-captcha />
                        <span id="newsletter-captcha-error"></span>
                    </div>

1.First Script for captcha

<script asp-location="Footer">
var html_element_id;
            var onloadCallback = function () {
                html_element_id = grecaptcha.render('html_element', {
                'sitekey' : '@_captchaSettings.ReCaptchaPublicKey'
                });
            };

            $(function () {
                $('#newsletter-subscribe-button').on('click', function () {
                    function captchaValid() {
                        var response = grecaptcha.getResponse(html_element_id);
                        var error = document.getElementById("newsletter-captcha-error");
                        if (response.length == 0) {
                            error.innerHTML = "<span style='color: red;'>" +
                                "The reCAPTCHA response is invalid or malformed. Please try again.</span>"
                            return false;
                        }
                        else {
                            error.innerHTML = ""
                        }
                        return true;
                    }
                    isCaptchaValid = captchaValid();
                });
                $('#newsletter-captcha-box').append("<div id='html_element'></div>");
            });
</script>

-- 2. second Html To show a Captcha

<div id="productreview-captcha-box">
     <span id="captcha-error"></span>
</div>

--2. second Script for captcha

<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&amp;render=explicit'></script>
<script>
    $(document).ready(function () {
        $('#product-review').validate({ // initialize the plugin
            rules: {
                "AddProductReview.Title": {
                    required: true
                },
                "AddProductReview.ReviewText": {
                    required: true
                }
            },
            messages: {
                "AddProductReview.Title": {
                    required: "Review title is required."
                },
                "AddProductReview.ReviewText": {
                    required: "Review text is required."
                }
            }
        });
    });

    if (@captchaCheck.ToString().ToLowerInvariant())
    {
        var html_element_2_id;
        var onloadCallback = function() {
            html_element_2_id = grecaptcha.render('html_element_2', {
                'sitekey' : '@_captchaSettings.ReCaptchaPublicKey'
                    });
        };
        $(function() {
            $('#product-review').on('click', function() {
                    var response = grecaptcha.getResponse(html_element_2_id);
                    var error = document.getElementById("captcha-error");
                    if (response.length == 0)
                    {
                        error.innerHTML = "<span style='color: red;'>" +
                            "The reCAPTCHA response is invalid or malformed. Please try again.</span>"
                                return false;
                    }
                    else
                    {
                        error.innerHTML = ""
                            }
                    return true;
                });
            $('#productreview-captcha-box').append("<div id='html_element_2'></div>");
        });
    }
</script>