๐ค Simple and easy Google reCAPTCHA integration with Nuxt.js
- Add
@nuxtjs/recaptchadependency withyarnornpminto your project - Add
@nuxtjs/recaptchatomodulessection ofnuxt.config.js - Configure it:
{
modules: [
[
'@nuxtjs/recaptcha', {
/* reCAPTCHA options */
}
],
]
}using top level options
{
modules: [
'@nuxtjs/recaptcha',
],
recaptcha: {
/* reCAPTCHA options */
},
}{
// ...
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)
},
// ...
}// nuxt.config.js
export default {
publicRuntimeConfig: {
recaptcha: {
/* reCAPTCHA options */
siteKey: process.env.RECAPTCHA_SITE_KEY // for example
}
}
}You can generate keys for the basic mode by registering a new site.
For the enterprise mode, use the Google Cloud Console.
- 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
getResponseinside 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:
- Call
initfunction insidemountedhook of your page
async mounted() {
try {
await this.$recaptcha.init()
} catch (e) {
console.error(e);
}
}- Call
executefunction 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
destroyfunction insidebeforeDestroyhook of the page. (This will remove reCAPTCHA scripts, styles and badge from the page)
beforeDestroy() {
this.$recaptcha.destroy()
}See:
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)
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>- Clone this repository
- Install dependencies using
yarn installornpm install - Start development server using
npm run dev
Copyright (c) mvrlin [email protected]
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent