ember-cli-google-recaptcha

ember-cli addon for Google ReCAPTCHA.

Usage no npm install needed!

<script type="module">
  import emberCliGoogleRecaptcha from 'https://cdn.skypack.dev/ember-cli-google-recaptcha';
</script>

README

ember-cli-google-recaptcha

EmberJS add-on for using Google reCAPTCHA services

<<<<<<< HEAD npm version node version

Compatibility

  • Ember.js v3.16 or above
  • Ember CLI v2.13 or above
  • Node.js v10 or above

Installation

1b6fdd4 (v3.3.0...v3.24.0)

Dependencies devDependencies Status

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

<<<<<<< HEAD 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.

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

The siteKey and verified component 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.

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

======= See the Contributing guide for details.

1b6fdd4 (v3.3.0...v3.24.0)

Unlike v2, you must determine when to execute the reCAPTCHA, reset the reCAPTCHA, and handle the expired action. Fortunately, this is not hard to do within EmberJS. As shown in the example above, we are going to execute the reCAPTCHA whenever we reset it. This, however, is not always required.

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!