vue-programmatic-invisible-google-recaptcha

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

$3

View demo

View on npm

View on GitHub

$3

``


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:

`html



`

$3

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 recaptcha-callback 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.

$3

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

`html




ref="invisibleRecaptcha1"
:sitekey="''"
:elementId="'invisibleRecaptcha1'"
:badgePosition="'left'"
:showBadgeMobile="false"
:showBadgeDesktop="true"
@recaptcha-callback="recaptchaCallback"
>


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()
},


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.

$3

| prop | type | description | required | default |
|---|---|---|---|---|
| ref | String | Unique String gives you control over the component | Yes |
| sitekey | String | Public key given to you by Google. | Yes |
| elementId | String | Unique String for the id of the element. Allows for multiple seperate reCAPTCHAs | Yes |
| badgePosition | String | Pass 'left' to show badge on left side of screen. | No | 'right' |
| showBadgeMobile | Boolean |true to show badge on mobile. false to hide badge on mobile. | No | true
| showBadgeDesktop | Boolean |true to show badge on desktop. false to hide badge on desktop. | No | true

$3

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

| method | parameters | description |
|---------|-------|--------------------------------|
| execute | none | Used to gather the token. If Google decides that the user needs to complete a test they'll do it here. |
| reset | none | Used to reset the reCAPTCHA instance. |

$3

| event | parameter value | description |
|---------|-------|--------------------------------|
| recaptcha-callback | String | This even gets emitted when the token has been aquired. You can then use this token to verify the user on your backend. |

$3

` bash


install dependencies

npm install

serve with hot reload

npm run watch

run the tests

npm run test

build demo page

npm run build:example

build library

npm run build:library

build everything and run tests

npm run build
``

$3

Go ahead and fork the project! Submit an issue if needed. Have fun!

$3

Thanks to Google for their reCAPTCHA library.

$3

MIT

Packaged with a mixture of vue-lib-template and vue-sfc-rollup.