Service:reCAPTCHA

Quick Start

Get your site key from the reCAPTCHA developer portal. Update the EmberJS environment configuration file in config/environment with properties for configuring reCAPTCHA for your application.

ENV.GoogleENV = {
  reCAPTCHA: {
    siteKey:     // site key from reCAPTCHA developer portal
  }
}

Add the reCAPTCHA component to the template for the target route.

{{g-recaptcha-v2 onResponse=(mut response)}}

In the example above, the reCAPTCHA response string will be stored in a variable named response. The response string can then be sent to the server with the rest of the request to verify the person is not a robot.

Using invisible reCAPTCHA

Invisible reCAPTCHA is added to your page in a similar manner as v2.

{{g-recaptcha-invisible onResponse=(mut response) reset=reset}}

For invisible reCAPTCHA, you must provide a reset variable. This variable is set by the parent component (or controller) when the invisible reCAPTCHA needs to be reset. For example, the user clicking outside the test screen, which causes it to disappear, and then types on the corresponding HTML form. In this scenario, the reCAPTCHA widget will not generate a response to verify the user is not a robot. Instead, they must reset the component, and try again.

If you place the invisible reCAPTCHA inside an HTML form, and the HTML form has a submit button, then the button will be automatically disabled until a response is generated.

Handling expired reCAPTCHA

There is a change that is the user waits to long to verify the response, then the reCAPTCHA will expire. To handle this event, add a callback to the component.

{{g-recaptcha-v2 onResponse=(mut response) onExpired=(action "expired")}}

More Information

See the official reCAPTHCA documentation for more information.