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

johndatserakis

vue-programmatic-invisible-google-recaptcha

  "name": "vue-programmatic-invisible-google-recaptcha",

  "description": "A simple invisible Google reCAPTCHA component focused solely on programmatic invocation.",

  "author": "John Datserakis <johndatserakis@gmail.com>",

    "url": "git+https://github.com/johndatserakis/vue-programmatic-invisible-google-recaptcha.git"

    "url": "https://github.com/johndatserakis/vue-programmatic-invisible-google-recaptcha/issues"

  "main": "dist/vue-programmatic-invisible-google-recaptcha.umd.js",

  "module": "dist/vue-programmatic-invisible-google-recaptcha.esm.js",

  "unpkg": "dist/vue-programmatic-invisible-google-recaptcha.min.js",

    "./sfc": "src/vue-programmatic-invisible-google-recaptcha.vue"

    "watch": "cross-env NODE_ENV=development webpack-dev-server --open --hot",

    "watch:vue-cli": "vue serve ./src/vue-programmatic-invisible-google-recaptcha.vue",

    "build": "rm -rf ./dist npm run build:unpkg & npm run build:es & npm run build:umd & npm run build:unpkg",

    "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/vue-programmatic-invisible-google-recaptcha.umd.js",

    "build:es": "rollup --config build/rollup.config.js --format es --file dist/vue-programmatic-invisible-google-recaptcha.esm.js",

    "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vue-programmatic-invisible-google-recaptcha.min.js",

    "build:example": "rm -rf ./docs && cross-env NODE_ENV=production webpack --progress --hide-modules"

    "rollup-plugin-node-resolve": "^3.3.0",

# vue-programmatic-invisible-google-recaptcha

[View demo](https://promosis.github.io/vue-programmatic-invisible-google-recaptcha/)

[View on npm](https://www.npmjs.com/package/vue-programmatic-invisible-google-recaptcha)

[View on GitHub](https://github.com/promosis/vue-programmatic-invisible-google-recaptcha)

npm i vue-programmatic-invisible-google-recaptcha

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>`

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.

import VueProgrammaticInvisibleGoogleRecaptcha from 'vue-programmatic-invisible-google-recaptcha'

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

<vue-programmatic-invisible-google-recaptcha

    @recaptchaCallback="recaptchaCallback"

></vue-programmatic-invisible-google-recaptcha>

    // 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()

    // Use the `recaptchaToken` to pass to your backend to verify the token

    axios.post('/enter', {recaptchaToken: recaptchaToken}).then((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.

| ref | String | Unique String gives you control over the component | Yes |

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 gather the token. If Google decides that the user needs to complete a test they'll do it here. |

| event    | value  | description                    |

| recaptchaCallback | String | This even gets emitted when the token has been aquired. You can then use this token to verify the user on your backend. |

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

Thanks to Google for their [reCAPTCHA](https://www.google.com/recaptcha) library.

[MIT](http://opensource.org/licenses/MIT)

Packaged with a mixture of [vue-lib-template](https://github.com/biigpongsatorn/vue-lib-template) and [vue-sfc-rollup](https://github.com/team-innovation/vue-sfc-rollup).

		{
		"name": "vue-programmatic-invisible-google-recaptcha",
		"version": "1.0.1",
		"version": "1.0.2",
		"description": "A simple invisible Google reCAPTCHA component focused solely on programmatic invocation.",
		@@ -5,0 +5,0 @@ "author": "John Datserakis <johndatserakis@gmail.com>",

		@@ -41,2 +41,6 @@ # vue-programmatic-invisible-google-recaptcha
		- 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.

		@@ -43,0 +47,0 @@ ### Usage Example

Improved metrics