adonis-recaptcha2

Google reCAPTCHA for AdonisJS

Showing:

Popularity

Downloads/wk

62

GitHub Stars

18

Maintenance

Last Commit

2mos ago

Contributors

3

Package

Dependencies

2

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

Adonis ReCAPTCHA v2

npm-image license-image typescript-image

Verifier for Google ReCAPTCHA v2. Not working with ReCAPTCHA Enterprise or v3

Docs for Adonis v4

Installation

Make sure to install it using npm or yarn.

# npm
npm i adonis-recaptcha2
node ace configure adonis-recaptcha2

# yarn
yarn add adonis-recaptcha2
node ace configure adonis-recaptcha2

How to use

Step 1: Get secret and site keys

You need to receive your siteKey and secretKey for your domain from Google reCAPTCHA v3 Admin Console

Login and Follow the steps on this page to include the reCAPTCHA on your website.

Step 2: Initialization

  • Make sure to register the provider inside .adonisrc.json file.
{
  "providers": [
    "...other packages",
    "adonis-recaptcha2"
  ] 
}
  • Add variables to .env file of project.
...
RECAPTCHA_SITE_KEY=YOUR_KEY
RECAPTCHA_SECRET_KEY=YOUR_KEY
  • Add fields to env.ts file of project.
import Env from '@ioc:Adonis/Core/Env'

export default Env.rules({
  // ...
  RECAPTCHA_SITE_KEY: Env.schema.string(),
  RECAPTCHA_SECRET_KEY: Env.schema.string(),
})
  • Set options in config/recaptcha.ts.
import Env from '@ioc:Adonis/Core/Env'
import { RecaptchaConfig } from '@ioc:Adonis/Addons/Recaptcha2'

const recaptchaConfig: RecaptchaConfig = {
  // ...
  siteKey: Env.get('RECAPTCHA_SITE_KEY'),
  // ...
  secretKey: Env.get('RECAPTCHA_SECRET_KEY'),
}
export default recaptchaConfig

Step 3: Add named middleware to start/kernel.ts

Server.middleware.registerNamed({
  recaptcha: () => import('App/Middleware/Recaptcha')
})

Step 4: Add middleware for start/routes.ts

Example:

Route.post('login', 'AuthController.login').middleware('recaptcha')

This middleware will check g-recaptcha-response field in body request

{
  "login": "admin",
  "password": "admin",
  "g-recaptcha-response": "osjoiadjaoisdjasijda..."
}

Field g-recaptcha-response it is Google reCAPTCHA v2 response

Use in Views

Note: Required View (@adonisjs/view)

Step 1: Enable views in config/recaptcha.ts

const recaptchaConfig: RecaptchaConfig = {
  // ... 
  views: true
}

Step 2: Use recaptcha() function in templates

...
<head>
  ...
  {{ recaptcha('script') }}
</head>
<body>
  <section>
    ...
    <form action="/login">
      ...
      {{ recaptcha('form') }}
    </form>
  </section>
</body>
</html>

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100