Google's reCAPTCHA with Ember.js

Question

I have followed the instructions listed here, but still can't get the reCAPTCHA to render in the template. I can't get the automatic rendering nor the explicit rendering to work for me. Can anybody give me more specific instructions that are tailored towards ember.js so that I can get the reCAPTCHA to render? I suppose that you are suppose to make it into a component since it will be used on many forms throughout the site.

As always, any help would be appreciated, and if you need any further details, I would be more than happy to provide them.

Answer 1

For those who are interested, ember-cli-google-recaptcha is an easy to use ember addon for adding Google reCAPTCHA to your ember application. It supports having multiple recaptcha components on the same page, and is FastBoot compatible. It also supports v2 and invisible recaptcha widgets:

{{g-recaptcha-v2 verified=(action (mut response)) 
                 reset=reset}}

{{g-recaptcha-invisible verified=(action (mut response))
                        expired=(action (mut expired) true)
                        execute=execute
                        reset=reset}}

Full disclosure: I am the developer of this add-on.

Answer 2

I used to put the Google nocaptcha recaptcha script tag in the index.html and setup a component that only binds the class to g-recaptcha to the DOM element allowing for automatic rendering of the recaptcha widget but this used to cause an issue where the widget is not rendered every time the page is loaded. Wrapping the loading of the script into a component gave consistency over rendering the reCaptcha widget if we make use of the init hook as described in the component lifecycle since we want to only load the script once and not every time the component is rerendered. Also there's no need to render the reCaptcha widget explicitly if we bind the component class to g-recaptcha and it makes for easier use unless there's a specific use case require hooking into the recaptcha script's callback.

Anyways, here's a bit of code to explain its use:

// app/components/nocaptcha-recaptcha.js
import Ember from 'ember';

export default Ember.Component.extend({
    classNames: ['g-recaptcha'],
    attributeBindings: ['data-sitekey'],
    'data-sitekey': '12398419391839j918839132plialkdf',

    init() {
        this._super(...arguments);
        Ember.$.getScript('https://www.google.com/recaptcha/api.js');
    }
});

Now you can simply use this component anywhere you want:

// app/templates/login.hbs
{{nocaptcha-recaptcha}}

Testing this components is no straight-forward thing though!