Apostrophe reCAPTCHA Login Verification
This login verification module adds a reCAPTCHA check when any user logs into the site. It uses reCAPTCHA v3, which means that the test is invisible aside from a reCAPTCHA logo at the bottom of the screen.
Installation
To install the module, use the command line to run this command in an Apostrophe project's root directory:
npm install @apostrophecms/login-recaptcha
Usage
Instantiate the reCAPTCHA login module in the app.js file:
require('apostrophe')({
shortName: 'my-project',
modules: {
'@apostrophecms/login-recaptcha': {}
}
});The other requirement is to add reCAPTCHA site and secret keys to the @apostrophecms/login module (not this module). This module adds functionality to that module (it "improves" it, in Apostrophe speak), so most configuration should be directly on the core login module.
// modules/@apostrophecms/login/index.js
module.exports = {
options: {
recaptcha: {
site: 'ADD YOUR SITE KEY',
secret: 'ADD YOUR SECRET KEY'
}
}
};Once configured, reCAPTCHA verification should work on all login attempts.
Content security headers
If your site has a content security policy, including if you use the Apostrophe Security Headers module, you will need to add additional configuration to use this module. This module adds a script tag to the site's head tag fetching reCAPTCHA code. That reCAPTCHA code also constructs an iframe. The external script and iframe use the www.google.com and www.gstatic.com domains, so we need to allow resources from that domain.
If you are using the Apostrophe Security Headers module, add the following policy configuration for that module:
module.exports = {
options: {
policies: {
'login-recaptcha': {
'script-src': 'www.google.com www.gstatic.com',
'frame-src': 'www.google.com'
},
// Any other policies...
}
}
};If your content security policy is configured some other way, add www.google.com to the frame-src directive and www.google.com www.gstatic.com to the script-src directive.