Package Exports

adonis-recaptcha2

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (adonis-recaptcha2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Adonis ReCAPTCHA v2

Version for Adonis v4

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

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

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>

adonis-recaptcha2