https://github.com/apostrophecms/login-recaptcha
Adds reCAPTCHA v3 to Apostrophe login pages
https://github.com/apostrophecms/login-recaptcha
Last synced: about 1 year ago
JSON representation
Adds reCAPTCHA v3 to Apostrophe login pages
- Host: GitHub
- URL: https://github.com/apostrophecms/login-recaptcha
- Owner: apostrophecms
- License: mit
- Created: 2022-01-14T19:44:50.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-13T17:27:59.000Z (about 2 years ago)
- Last Synced: 2024-04-14T09:04:17.707Z (about 2 years ago)
- Language: JavaScript
- Size: 44.9 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
Apostrophe reCAPTCHA Login Verification
This login verification module adds a [reCAPTCHA](https://developers.google.com/recaptcha/intro) 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:
```javascript
require('apostrophe')({
shortName: 'my-project',
modules: {
'@apostrophecms/login-recaptcha': {}
}
});
```
The other requirement is to add [reCAPTCHA site and secret keys](https://developers.google.com/recaptcha/intro#recaptcha-overview) 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.
```javascript
// 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](https://www.npmjs.com/package/@apostrophecms/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:
```javascript
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.