@nuxtjs/recaptcha
v1.1.2
Published
Simple and easy Google reCAPTCHA integration with Nuxt.js
Downloads
71,625
Readme
Google reCAPTCHA
🤖 Simple and easy Google reCAPTCHA integration with Nuxt.js
Setup
- Add
@nuxtjs/recaptcha
dependency withyarn
ornpm
into your project - Add
@nuxtjs/recaptcha
tomodules
section ofnuxt.config.js
- Configure it:
{
modules: [
[
'@nuxtjs/recaptcha', {
/* reCAPTCHA options */
}
],
]
}
using top level options
{
modules: [
'@nuxtjs/recaptcha',
],
recaptcha: {
/* reCAPTCHA options */
},
}
Configuration
{
// ...
recaptcha: {
hideBadge: Boolean, // Hide badge element (v3 & v2 via size=invisible)
language: String, // Recaptcha language (v2)
mode: String, // Mode: 'base', 'enterprise'
siteKey: String, // Site key for requests
version: Number, // Version
size: String // Size: 'compact', 'normal', 'invisible' (v2)
},
// ...
}
Runtime config
// nuxt.config.js
export default {
publicRuntimeConfig: {
recaptcha: {
/* reCAPTCHA options */
siteKey: process.env.RECAPTCHA_SITE_KEY // for example
}
}
}
Generate reCAPTCHA Site Keys
You can generate keys for the basic
mode by registering a new site.
For the enterprise
mode, use the Google Cloud Console.
Usage
reCAPTCHA v2
- Add
<recaptcha>
component inside your form:
<form @submit.prevent="onSubmit">
<input autocomplete="true" placeholder="Email" type="email" v-model="email">
<input autocomplete="current-password" placeholder="Password" type="password" v-model="password">
<recaptcha />
<button type="submit">Sign In</button>
</form>
- Call
getResponse
inside form submit handler to get reCAPTCHA token:
async onSubmit() {
try {
const token = await this.$recaptcha.getResponse()
console.log('ReCaptcha token:', token)
// send token to server alongside your form data
// at the end you need to reset recaptcha
await this.$recaptcha.reset()
} catch (error) {
console.log('Login error:', error)
}
},
See:
reCAPTCHA v3
- Call
init
function insidemounted
hook of your page
async mounted() {
try {
await this.$recaptcha.init()
} catch (e) {
console.error(e);
}
}
- Call
execute
function form submit handler to get reCAPTCHA token:
async onSubmit() {
try {
const token = await this.$recaptcha.execute('login')
console.log('ReCaptcha token:', token)
// send token to server alongside your form data
} catch (error) {
console.log('Login error:', error)
}
}
- Call
destroy
function insidebeforeDestroy
hook of the page. (This will remove reCAPTCHA scripts, styles and badge from the page)
beforeDestroy() {
this.$recaptcha.destroy()
}
See:
Server Side
When you send data + token
to the server, you should verify the token on the server side to make sure it does not requested from a bot.
You can find out how to verify token on the server side by looking at the server middleware inside v2 example. (The server side is same for both versions)
Info Hiding Badges
You're allowed to hide the badge (i.e. for v3 and v2 invisible), as long as you include the recaptcha branding in the user flow.
For example:
<small>This site is protected by reCAPTCHA and the Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and
<a href="https://policies.google.com/terms">Terms of Service</a> apply.
</small>
Development
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
License
Copyright (c) mvrlin [email protected]