A simple invisible Google reCAPTCHA component focused solely on programmatic invocation.
npm install vue-programmatic-invisible-google-recaptchaA simple invisible Google reCAPTCHA component focused solely on programmatic invocation.
``npm
npm i 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 installserve with hot reload
npm run watchrun the tests
npm run testbuild demo page
npm run build:examplebuild library
npm run build:librarybuild everything and run tests
npm run build
``Go ahead and fork the project! Submit an issue if needed. Have fun!
Thanks to Google for their reCAPTCHA library.
Packaged with a mixture of vue-lib-template and vue-sfc-rollup.