Impossible to use vue-recaptcha-v3

user_2672338 0
Viewed 2879

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?

vuejs3 vue.js
1 Answers

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

user_62771510
Related