ember-google-recaptcha

Utilize Google reCAPTCHA v2 as an Ember js component that handles both the standard and invisible versions.

Resources

Install

From command line, run the following command

npm install ember-google-recaptcha

Configuration

Prerequisite: Setup and generate the proper API keys from the reCAPTCHA Admin Console

In your app's config/environment.js's ENV variable, add the following properties

var ENV = {
    ...
    
    googleRecaptcha: {
      siteKey: 'google_recaptcha_site_key',
    },
    
    ...
};

Utilization

Standard Usage

For the traditional use of reCATPCHA, add the following to your template

{{google-recpatcha onSuccess=(action "onCaptchaResolved")}}

In the corresponding controller/component, have the following action

actions: {
    onCaptchaResolved(reCaptchaResponse) {
        // Pass reCaptchaResponse to the server to be validated
    },
},

Documentation: Standard reCAPTCHA

Invisible Usage

For the reCaptcha invisible to be used, add the following to your template

{{google-recaptcha 
    onSuccess=(action "onCaptchaResolved") 
    ref=(mut iGoogleRecaptcha) 
    size="invisible"
}}
// An element (or some piece of code) is required to instantiate the check, we'll use the following button.
<button {{action "onClickExecuteInvisible" click}}>Click me</button>

In the corresponding controller/component, have the following actions

actions: {
    onCaptchaResolved(reCaptchaResponse) {
        // Pass reCaptchaResponse to the server to be validated
    },
    onClickExecuteInvisible() {
        // Do any treatment and then instantiate the test (if Google deems neccessary)
        Ember.get(this, 'iGoogleRecaptcha').execute();
    },
},

Documentation: Invisible reCAPTCHA

Advanced Usage

Handling Expiration (Standard Only)

If you would like to have custom code enacted if the reCAPTCHA expires (default: reset), you may pass a custom action using the onExpired property.

{{google-recaptcha 
    onSuccess=(action "onCaptchaResolved")
    onExpired=(action "onCaptchaExpired")
}}

In the corresponding controller/component, have the following actions

actions: {
    onCaptchaExpired() {
        // Custom logic here
    },
},

Reference: expiration

Triggering Reset

If you would like to reset the reCAPTCHA widget, you may do so by doing the following

{{google-recaptcha
    onSuccess=(action "onCaptchaResolved")
    ref=(mut googleRecaptcha)
}}

In the corresponding controller/component, have the following code

Ember.get(this, 'googleRecaptcha').resetReCaptcha();

Reference (Standard): reset

Reference (Invisible): reset

Executing the widget (Invisible Only)

If you are using invisible reCAPTCHA, you will want to trigger the challenge at whatever moment you'd like.

{{google-recaptcha
    onSuccess=(action "onCaptchaResolved")
    ref=(mut iGoogleRecaptcha)
    size="invisible"
}}
// An element (or some piece of code) is required to instantiate the check, we'll use the following button.
<button {{action "onClickExecuteInvisible" click}}>Click me</button>

In the corresponding controller/component, have the following action

actions: {
    onClickExecuteInvisible() {
        // Do any treatment and then instantiate the test (if Google deems neccessary)
        Ember.get(this, 'iGoogleRecaptcha').execute();
    },
},

Documentation: execute()

Passable Properties

The following properties may be passed to the component

badge <bottomright:default|bottomleft|inline> (invisible only)
siteKey (using config/environment.js is recommended)
size
theme <dark|light:default> (standard only)
type <audio|image:default>
tabindex

Credit

Based off the code of ember-g-recpatcha by algonauti

Change Log

v0.2.2

Added to dummy app and made it more sophisticated
Upgraded dev dependencies
Added badges to Readme.md
Minor Fixes

v0.2.1

Updated Documentation
Updated contributed code

v0.2.0

Shortened component name to google-recaptcha
Added badge parameter able to be set on component (for reCaptcha invisible)
Upgraded Ember version to 2.16.* and fixed deprecations
Updated dummy app