locked
reCaptcha 2.0, can't even get it to render. Anyone done this with LightSwitch HTML? RRS feed

  • Question

  • I've got localhost and 127.0.0.1 in my domains list. 

    On the render method of a custom control, I've tried both:

        var itemTemplate = $("<div class='g-recaptcha' data-sitekey='xxxxxxxxxxxxxxxxxxxxxxxxxxx'></div>");
        itemTemplate.appendTo($(element));

    and

        var newString = "<div class='g-recaptcha' data-sitekey='xxxxxxxxxxxxxxxxxxxxxxxxxxx'></div>";
        element.innerHTML = contentItem.newString;

    And I've tried putting <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?></script> in various places of the head and body of my default.htm, but nothing seems to render.

    Also, no idea about how I can process the response with LightSwitch.

    Any thoughts or comments? Please?

    Thank you,

    Stephen


    • Edited by sbarash Tuesday, January 16, 2018 10:03 PM Typos
    Monday, January 15, 2018 7:53 PM

Answers

  • Okay, I got the rendering part to work, don't expect the response part to be an issue. Tough for me in Lightswitch because the element load sequence is difficult to manipulate - 

    1. Load the Captcha widget
    2. Load the callback function
    3. Load Google's external script
    4. The script calls the callback in #2
    5. The callback populates the widget in #1

    Here's what I ended up with in case anyone needs help in the future.

    myapp.AddEditInterestListPeople.Captcha_render = function (element, contentItem) {
        var newString = $('<div id="recaptcha"></div>');

        newString.appendTo($(element));

        var fileref = document.createElement('script');
        fileref.setAttribute("src", "https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit")
        fileref.setAttribute("async");
        fileref.setAttribute("defer");
        document.getElementsByTagName("head")[0].appendChild(fileref);
    };

    onloadCallback = function () {
        grecaptcha.render('recaptcha', {
            'sitekey': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
        });
    };

    Stephen


    • Edited by sbarash Tuesday, January 16, 2018 9:58 PM
    • Marked as answer by sbarash Tuesday, January 16, 2018 9:59 PM
    Tuesday, January 16, 2018 9:57 PM