A simple invisible Google reCAPTCHA component with vue

vue-programmatic-invisible-google-recaptcha

A simple invisible Google reCAPTCHA component focused solely on programmatic invocation.

Install

# npm
npm i vue-programmatic-invisible-google-recaptcha

# yarn
yarn add vue-programmatic-invisible-google-recaptcha

Or you can include it through the browser at the bottom of your page:

<script src="https://unpkg.com/vue-programmatic-invisible-google-recaptcha"></script>

About

This is a simple component that helps deal with an invisible Google reCAPTCHA that you intend to invoke programmatically. There are a few plugins that help with Google's reCAPTCHA, but this one is focused on the invisble version with a programmatic invocation only. Due to its nature, reCAPTCHA can be a little complex - so that is what is driving the narrow scope here. Library supports easy multiple reCAPTCHAs on the same page.

Here's a breakdown of the steps you go through when using this library:

• Load the Google reCAPTCHA library using the provided script tag.
• Whenever you'd like, invoke the reCAPTCHA using this.$refs.invisibleRecaptcha1.execute() method (replacing invisibleRecaptcha1 with the ref name you set).
• Google will either decide to show a challange or not. Either way, you'll get the recaptchaToken in the registered recaptchaCallback event. Make sure to register for that.
• Use that token to verify in your backend.
• Call the method again if you'd like to get a new token.

Usage Example

import VueProgrammaticInvisibleGoogleRecaptcha from 'vue-programmatic-invisible-google-recaptcha'
Vue.component('vue-programmatic-invisible-google-recaptcha', VueProgrammaticInvisibleGoogleRecaptcha)

<!-- Put this in your base HTML file - I use Vue CLI 3 so I put it at the bottom of the ./public/index.html file. -->
<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>

<!-- This is in the component you want to have the reCAPTCHA -->
<vue-programmatic-invisible-google-recaptcha
    ref="invisibleRecaptcha1"
    :sitekey="'<YOUR_SITEKEY_HERE>'"
    :elementId="'invisibleRecaptcha1'"
    :badgePosition="'left'"
    :showBadgeMobile="false"
    :showBadgeDesktop="true"
    @recaptchaCallback="recaptchaCallback"
></vue-programmatic-invisible-google-recaptcha>

<!-- Where you want to invoke the reCAPTCHA -->
submitButtonClicked() {
    // Do whatever you want here (probably some validation). After
    // that's done (or passed your expectations) you can then invoke the reCAPTCHA.
    this.$refs.invisibleRecaptcha1.execute()
},

<!-- The reCAPTCHA's registered callback. This is where you'll get your token. -->
recaptchaCallback (recaptchaToken) {
    // Use the `recaptchaToken` to pass to your backend to verify the token
    axios.post('/enter', {recaptchaToken: recaptchaToken}).then((result) => {
        console.log(result)
    })
},

Note - I find it to be a good idea to allow the user to reset their reCAPTCHA on their own if they're experiencing an issue. This component exposes a function for this. To do this, give them a button with the following code in the click function: this.$refs.invisibleRecaptcha1.reset(). This will reset the reCAPTCHA and hopefully get them passed the issue they're having.

Props

Methods

Note - call these methods through the ref you set up with your component. Example: this.$refs.invisibleRecaptcha1.execute().

Events

Development

# install dependencies
npm install

# serve with hot reload
npm run watch

# build demo page
npm run build:example

# build
npm run build

# publish to npm
npm version patch
npm publish

GitHub