Newfoundland Pitbull Mix

    adonis-recaptcha2
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.1 • Public • Published

    Adonis ReCAPTCHA v2

    Version for Adonis v4

    Build Status Coverage Status

    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

    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>

    Install

    npm i adonis-recaptcha2

    DownloadsWeekly Downloads

    38

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    11.3 kB

    Total Files

    10

    Last publish

    Collaborators

    • lookingit