CODEWITHSUNDEEP
vue.jsvuejs3
Dom
Dom

Reputation: 3438

Impossible to use vue-recaptcha-v3

I am a beginner in vue.js 3. I am trying to use vue-recaptcha-v3 which seems popular. But I do not understand how to use it.

In my main.js, I have :

import { VueReCaptcha } from 'vue-recaptcha-v3'

const app = createApp(App)
  .use(store)
  .use(router)
  .use(VueReCaptcha, { siteKey: '6Lc_______________ipg' })

In my form I just added this :

<VueReCaptcha />

I have this error:

enter image description here

(in English : "This key is not activated for the invisible captcha").

I imagine that my approach is very simple. How can I achieve what I want to do?

Upvotes: 3

Views: 10851

Answers (1)

tony19
tony19

Reputation: 138536

That seems to indicate a misconfigured site key. Also, there's no VueReCaptcha component (vue-recaptcha-v3 is only a plugin that provides API methods), so don't add <VueReCaptcha /> to your template.

Based on the docs, these are the steps I took that worked for me:

  1. Sign up for an API key pair for your site.

  2. For Label, enter a label for the key (e.g., Codesandbox Demo)

  3. For reCAPTCHA Type, choose reCAPTCHA v3.

  4. For Domains, enter the domain where the key will be used (e.g., csb.app for Codesandbox), and click the + icon.

  5. Check the box for Accept the reCAPTCHA Terms of Service.

  6. Click Submit.

In your component, use the Composition API to setup your reCAPTCHA:

<template>
  <button @click="recaptcha">Execute recaptcha</button>
</template>

<script>
import { useReCaptcha } from 'vue-recaptcha-v3'

export default {
  setup() {
    const { executeRecaptcha, recaptchaLoaded } = useReCaptcha()

    const recaptcha = async () => {
      await recaptchaLoaded()
      const token = await executeRecaptcha('login')
      console.log({ token })
    }

    return {
      recaptcha
    }
  },
}
</script>

demo

Upvotes: 11

Related Questions