aurelia-plugins-google-recaptcha
A Google Recaptcha plugin for Aurelia.
Installation
Webpack/Aurelia CLI
npm install aurelia-plugins-google-recaptcha --save
When using Aurelia CLI add the following dependency to aurelia.json
:
Add node_modules/babel-polyfill/dist/polyfill.min.js
to the prepend list in aurelia.json
. Do not forgot to add babel-polyfill
to the dependencies in package.json
.
For projects using Webpack, please add babel-polyfill
to your webpack.config.js
as documented by babeljs.io.
JSPM
jspm install aurelia-plugins-google-recaptcha
Bower
bower install aurelia-plugins-google-recaptcha
Configuration
Inside of your main.js
or main.ts
file simply load the plugin inside of the configure method using .plugin()
.
{ aureliause ; aureliause ; await aureliastart; aurelia;}
Usage
Once Google Recaptcha is configured, to use it simply add the custom element <aup-google-recaptcha></aup-google-recaptcha>
in your view.
Get the response
To get the response of the recaptcha, add an event handler to callback.call
of the custom element.
response = ''; {} { thisresponse = response; }
Validation
Assuming you have aurelia-validation correctly configured, the Google Recaptcha can be validated when submitting a form.
Submit
;;; @ response = ''; { thisvalidationController = validationController; ValidationRules ; thisvalidationController; } { thisresponse = response; } async { try const errors = await thisvalidationController; if !errorsvalid return; // Do some magic here... catch err // Error handling... }
Invisible Recaptcha
To use the Invisible Recaptcha, first make sure you have an appropriate siteKey defined in your config. Set the size
property to invisible
. You can also set the badge
property. Use the window.grecaptcha.execute()
method to invoke the Google Recaptcha and get a response back in the defined callback. To make sure that the Recaptcha will fire again after a first submit, capture the widgetId
from the Recaptcha and use it with the window.grecaptcha.execute(widgetId)
method.
Submit
response = ''; widgetId; { thisresponse = response; } { windowgrecaptcha; }