@nuxtjs/recaptcha
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    Google reCAPTCHA

    npm version npm downloads Circle CI Codecov Standard JS

    🤖 Simple and easy Google reCAPTCHA integration with Nuxt.js

    📖 Release Notes

    Setup

    1. Add @nuxtjs/recaptcha dependency with yarn or npm into your project
    2. Add @nuxtjs/recaptcha to modules section of nuxt.config.js
    3. Configure it:
    {
      modules: [
        [
          '@nuxtjs/recaptcha', {
            /* reCAPTCHA options */
          }
        ],
      ]
    }

    using top level options

    {
      modules: [
        '@nuxtjs/recaptcha',
      ],
    
      recaptcha: {
        /* reCAPTCHA options */
      },
    }

    Configuration

    {
      // ...
      recaptcha: {
        hideBadge: Boolean, // Hide badge element (v3 & v2 via size=invisible)
        language: String,   // Recaptcha language (v2)
        siteKey: String,    // Site key for requests
        version: Number,     // Version
        size: String        // Size: 'compact', 'normal', 'invisible' (v2)
      },
      // ...
    }

    Runtime config

    // nuxt.config.js
    export default {
      publicRuntimeConfig: {
        recaptcha: {
          /* reCAPTCHA options */
          siteKey: process.env.RECAPTCHA_SITE_KEY // for example
        }
      }
    }

    Usage

    reCAPTCHA v2

    1. Add <recaptcha> component inside your form:
    <form @submit.prevent="onSubmit">
      <input autocomplete="true" placeholder="Email" type="email" v-model="email">
      <input autocomplete="current-password" placeholder="Password" type="password" v-model="password">
      <recaptcha />
      <button type="submit">Sign In</button>
    </form>
    1. Call getResponse inside form submit handler to get reCAPTCHA token:
    async onSubmit() {
      try {
        const token = await this.$recaptcha.getResponse()
        console.log('ReCaptcha token:', token)
    
        // send token to server alongside your form data
    
        // at the end you need to reset recaptcha
        await this.$recaptcha.reset()
      } catch (error) {
        console.log('Login error:', error)
      }
    },

    See: v2 example

    reCAPTCHA v3

    1. Call init function inside mounted hook of your page
    async mounted() {
      try {
        await this.$recaptcha.init()
      } catch (e) {
        console.error(e);
      }
    }
    1. Call execute function form submit handler to get reCAPTCHA token:
    async onSubmit() {
      try {
        const token = await this.$recaptcha.execute('login')
        console.log('ReCaptcha token:', token)
    
        // send token to server alongside your form data
    
      } catch (error) {
        console.log('Login error:', error)
      }
    }
    1. Call destroy function inside beforeDestroy hook of the page. (This will remove reCAPTCHA scripts, styles and badge from the page)
    beforeDestroy() {
      this.$recaptcha.destroy()
    }

    See: v3 example

    Server Side

    When you send data + token to the server, you should verify the token on the server side to make sure it does not requested from a bot. You can find out how to verify token on the server side by looking at the server middleware inside v2 example. (The server side is same for both versions)

    Info Hiding Badges

    You're allowed to hide the badge (i.e. for v3 and v2 invisible), as long as you include the recaptcha branding in the user flow.

    For example:

    <small>This site is protected by reCAPTCHA and the Google 
        <a href="https://policies.google.com/privacy">Privacy Policy</a> and
        <a href="https://policies.google.com/terms">Terms of Service</a> apply.
    </small>

    Development

    1. Clone this repository
    2. Install dependencies using yarn install or npm install
    3. Start development server using npm run dev

    License

    MIT License

    Copyright (c) mvrlin mvrlin@pm.me

    Install

    npm i @nuxtjs/recaptcha

    DownloadsWeekly Downloads

    9,570

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    22.9 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar