ember-cli-google-recaptcha

EmberJS add-on for using Google reCAPTCHA services

Features

• Multiple reCAPTCHA components on the same page, and across different pages.
• Multiple site keys, and a default site key
• Seamless integration into an EmberJS application.
• Proper binding of attributes to options for real-time, dynamic updates.
• Handle events as actions for interactive designs.
• Auto-loading and configuring of scripts that correspond with appropriate lifecycle events.
• FastBoot compatible.

Installation

ember install ember-cli-google-recaptcha

Getting Started

Configuring application for reCAPTCHA

Before you can use reCAPTCHA, you must first sign up for the service, and register a new site.

v2

v2 reCAPTCHA shows a widget with a checkbox. The user must check the checkbox to verify they are not a robot.

<GRecaptchaV2 @siteKey={{this.siteKey}} @verified={{this.verified}} />

The @siteKey and @verified attributes are required. The @verified action has a single parameter - the reCAPTCHA response. This response must be uploaded to your server when you submit your data.

Invisible

Invisible reCAPTCHA does not show a widget. Instead, the verification process happens in the background whenever the you decide is best. For example, it can be when the page is first loaded or when the form is submitted.

The invisible reCAPTCHA requires more coordination than v2.

<GRecaptchaInvisible @siteKey={{this.siteKey}} 
                     @verified={{this.verified}}
                     @reset={{this.reset}}
                     @execute={{this.execute}}
                     @expired={{this.expired}} />

Unlike v2, you must determine when to @execute the reCAPTCHA, @reset the reCAPTCHA, and handle the @expired action.

Default siteKey

You can define a default siteKey in config/environment.js. This will allow you to omit the siteKey attribute on the reCAPTCHA components.

let ENV = {
  // ...
  
  'ember-cli-google': {
    recaptcha: {
      siteKey: 'This is where my siteKey goes'
    }
  }
};

Happy Coding!