aurelia-google-recaptcha

An integration of Google's reCAPTCHA api for Aurelia Framework.

Plugin is inspired by Jeremy Danyow's post, so please give a lot of credits to him as well, as we do.

Index

• aurelia-google-recaptcha
  • Index
  • Audience
  • Getting Started
  • Usage
    • Generic Options
  • Overview
  • Development
  • Issues
  • License

Audience

This documentation is designed for people familiar with Aurelia Framework, HTML forms, server-side processing or mobile application development.

We hope you find this documentation easy to follow. For feedback and discussions please use the issues page of this project.

Getting Started

npm i aurelia-google-recaptcha --save

or

yarn add aurelia-google-recaptcha

Usage

In your aurelia main.js add:

aurelia.use.plugin(PLATFORM.moduleName('aurelia-google-recaptcha'));
// or (if you want to configure the plugin from the start)
aurelia.use.plugin(PLATFORM.moduleName('aurelia-google-recaptcha'), config => {
    config.assign({
        siteKey: '', // use this as general sitekey if you use only one type of recaptcha
        siteKeys: {
          v2: '', // use these sitekeys to separte the values between all 3 types of recaptcha
          v2i: '',
          v3: ''
        },
        lang: 'en'  // for V2, we can also set the supported language
                    // see https://developers.google.com/recaptcha/docs/language
    });
});

In your HTML add one of the components as presented in the Overview section.

<recaptcha-* ...></recaptcha-*>

Generic Options

Option	Type	Default	Description
auto	Boolean	false	Optional. Trigger an auto-validate loop interval, keeping the recaptcha validated.
id	String		Optional. Two Way bindable value, announcing recaptcha component ID.
sitekey	String		Optional. Your can also mention the sitekey inline within code. This value will override the one from config.
value	String		Optional. Two Way bindable value, announcing recaptcha result outside of the component.

Overview

As Google will tell, you, to start using reCAPTCHA, you need to sign up for an API key pair for your site. Please read the documentation on reCAPTCHA website to learn how to obtain the API keys.

From the versions presented by reCAPTCHA, we chose to implement, within our Aurelia plugin, the following:

• reCAPTCHA v3
• reCAPTCHA v2
  • Checkbox
  • Invisible

For verifying the user's response please read the reCAPTCHA documentation.

Development

Fork the repo then clone it

$ git clone git@github.com:dragoscirjan/aurelia-google-recaptcha-dev.git && cd aurelia-google-recaptcha

yarn global add gulp-cli (or $ npm install --global gulp-cli): Install Gulp cli tool.

$ yarn (or $ npm i): Install the dependencies;

$ yarn build (or $ npm run build): Build to production;

$ yarn dev: Run the docz to see your changes;

NOTE: Momentarely I do not use the testing environment. I'm using this project to develop. You're all invited to help with the unit tests, if you wish to.

$ yarn test: Run all tests: type checking and unit tests;

$ yarn test:watch: Watch unit tests;

$ yarn tsc: Typescript checking;

$ yarn tsc:watch: Typescript checking with watching;

Issues

For issues, please reffer to this repository's issue page.

License

MIT