Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/johndatserakis/vue-programmatic-invisible-google-recaptcha
🔒A simple invisible Google reCAPTCHA component focused solely on programmatic invocation.
https://github.com/johndatserakis/vue-programmatic-invisible-google-recaptcha
google invisible programmatic recaptcha v2 vue
Last synced: 11 days ago
JSON representation
🔒A simple invisible Google reCAPTCHA component focused solely on programmatic invocation.
- Host: GitHub
- URL: https://github.com/johndatserakis/vue-programmatic-invisible-google-recaptcha
- Owner: johndatserakis
- License: mit
- Created: 2018-09-10T18:49:27.000Z (about 6 years ago)
- Default Branch: develop
- Last Pushed: 2019-04-30T19:01:55.000Z (over 5 years ago)
- Last Synced: 2024-05-29T03:14:21.009Z (6 months ago)
- Topics: google, invisible, programmatic, recaptcha, v2, vue
- Language: Vue
- Homepage: https://johndatserakis.github.io/vue-programmatic-invisible-google-recaptcha/
- Size: 621 KB
- Stars: 27
- Watchers: 5
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-programmatic-invisible-google-recaptcha
A simple invisible Google reCAPTCHA component focused solely on programmatic invocation.
### Demo
[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)
### 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:
```html
```
### 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 `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.
### Usage Example
```js
import VueProgrammaticInvisibleGoogleRecaptcha from 'vue-programmatic-invisible-google-recaptcha'
Vue.component('vue-programmatic-invisible-google-recaptcha', VueProgrammaticInvisibleGoogleRecaptcha)
```
```html
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.
### Props
| 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`
### Methods
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. |
### Events
| 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. |
### Development
``` 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
```
### Other
Go ahead and fork the project! Submit an issue if needed. Have fun!
### Thank You
Thanks to Google for their [reCAPTCHA](https://www.google.com/recaptcha) library.
### License
[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).