
Research
Malicious fezbox npm Package Steals Browser Passwords from Cookies via Innovative QR Code Steganographic Technique
A malicious package uses a QR code as steganography in an innovative technique.
vue-recaptcha-v3
Advanced tools
[](https://www.npmjs.com/package/vue-recaptcha-v3) [](https://www.npmjs.com/package/vue-recaptcha-v3)
A simple and easy to use reCAPTCHA (v3 only) library for Vue based on reCAPTCHA-v3.
The latest version of this package supports Vue 3! See here for Vue 2 usage.
With NPM:
$ npm install vue-recaptcha-v3
With Yarn:
$ yarn add vue-recaptcha-v3
To use this package you only need a valid site key for your domain, which you can easily get here.
import Vue from 'vue'
import { VueReCaptcha } from 'vue-recaptcha-v3'
// For more options see below
Vue.use(VueReCaptcha, { siteKey: '<site key>' })
new Vue({
methods: {
async recaptcha() {
// (optional) Wait until recaptcha has been loaded.
await this.$recaptchaLoaded()
// Execute reCAPTCHA with action "login".
const token = await this.$recaptcha('login')
// Do stuff with the received token.
}
},
template: '<button @click="recaptcha">Execute recaptcha</button>'
})
import { createApp } from 'vue'
import { VueReCaptcha, useReCaptcha } from 'vue-recaptcha-v3'
const component = {
setup() {
const { executeRecaptcha, recaptchaLoaded } = useReCaptcha()
const recaptcha = async () => {
// (optional) Wait until recaptcha has been loaded.
await recaptchaLoaded()
// Execute reCAPTCHA with action "login".
const token = await executeRecaptcha('login')
// Do stuff with the received token.
}
return {
recaptcha
}
},
template: '<button @click="recaptcha">Execute recaptcha</button>'
}
createApp(component)
.use(VueReCaptcha, { siteKey: '<site key>' })
To get type suggestions for instance variables (this is not needed for composition API), create a new file called shims-vue-recaptcha-v3.d.ts
and put the following inside it:
import { ReCaptchaInstance } from 'recaptcha-v3'
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$recaptcha: (action: string) => Promise<string>
$recaptchaLoaded: () => Promise<boolean>
$recaptchaInstance: ReCaptchaInstance
}
}
This plugin offers optional options to configure the behavior of some parts.
Available options:
Name | Description | Type | Default value |
---|---|---|---|
siteKey | The site key for your domain from Google. | string | none |
loaderOptions | Optional options for the recaptcha-v3 loader. The available options are described here. | object | null |
To use the options just pass an object to the Vue.use(...)
method. For example:
import Vue from 'vue'
import { VueReCaptcha } from 'vue-recaptcha-v3'
Vue.use(VueReCaptcha, {
siteKey: '<site key>',
loaderOptions: {
useRecaptchaNet: true
}
})
Some topics which are not commonly used, but required in some cases.
In some cases it's necessary to interact with the reCAPTCHA-v3 instance, which provides more control over reCAPTCHA.
const recaptcha = this.$recaptchaInstance
// Hide reCAPTCHA badge:
recaptcha.hideBadge()
// Show reCAPTCHA badge:
recaptcha.showBadge()
FAQs
[](https://www.npmjs.com/package/vue-recaptcha-v3) [](https://www.npmjs.com/package/vue-recaptcha-v3)
The npm package vue-recaptcha-v3 receives a total of 47,689 weekly downloads. As such, vue-recaptcha-v3 popularity was classified as popular.
We found that vue-recaptcha-v3 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A malicious package uses a QR code as steganography in an innovative technique.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.
Application Security
/Research
/Security News
Socket detected multiple compromised CrowdStrike npm packages, continuing the "Shai-Hulud" supply chain attack that has now impacted nearly 500 packages.