ReCaptcha difficulties in Ember.js component

[Brandon Barrett]

The widget works on its own if I use $.getScript('//www.google.com/recaptcha/api.js') after inserting <div class='g-recaptcha' data-sitekey='mykeyhere'></div>

I cannot get the callback to fire for success:

<div class='g-recaptcha' data-callback=myNameSpace.callback data-sitekey='mykeyhere'></div>

and when I go the explicit rendering route I can't get the onload callback to fire:

$.getScript('//www.google.com/recaptcha/api.js?render=explicit&onload=myNameSpace.onloadCallback')

There are no console errors, and the callbacks don't fire at all.  The callbacks are on the global namespace (not buried in Ember).  For those who know ember, the <div class='g-recaptcha' data-sitekey='mykeyhere'></div> is in a component template, the $.getScript is fired in the didInsertElement hook (after div is inserted), and the callback is on the global namespace.

I don't understand why this isn't working and I'm running out of debug paths to travel down.  Any insights would be greatly appreciated!

[Ashraf Hasson]

Hi Brandon,

I've done something similar to this, i.e., created a recaptcha component, however, I've not opted for a dynamic load of the api.js script, rather installed it with bower then on `didInsertElement` I just explicitly render the recaptcha, so there's no need for a callback, like so:

export default Ember.Component.extend({
    classNames: ['g-recaptcha''],
    attributeBindings: ['data-sitekey'],
    'data-sitekey': '...',
    didInsertElement: function () {
        var self = this;
        grecaptcha.render(self.$().prop('id'), {
            'sitekey': self.get('data-sitekey')
        });
    }
});

reCaptcha, however, does add an invisible div at the bottom of 'body' which in RTL mode messes up the layout, wonder if you have a cure for that?

Thanks,

[Donal Byrne]

Could you give an example of how you installed the api.js with bower?

[Donal Byrne]

I got this to work by loading the script with getScript and then waiting for the 'grecaptcha' object to become defined ( the initial script loads a second language-specific script.) 

Gist