Vue.js google reCaptcha callback

javascript, recaptcha, vue.js

Solution

I came across this problem too and it took me 2 days to solve it.

So I will provide here a general answer for integrating recaptcha with vue.js from scratch step by step, to be an easy guide for people who will be in the same situation in the future (I am supposing vue-cli is used here).

Note: I am using here the invisible recaptcha but the process is pretty similar to the normal one

Step 1:

add the recaptcha javascript api to your index.html

index.html

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Step 2:

make a component called `Recaptcha` or whatever you want to call it (making a component will make your code easier to read, easier to maintain and easier to add recaptcha to more than one page if you need)

Recaptcha.vue

<template>
  <div 
  id="g-recaptcha"
  class="g-recaptcha"
  :data-sitekey="sitekey">
  </div>
</template>

<script>
export default {
  data () {
    return {
      sitekey: '6LfAEj0UAAAAAFTGLqGozrRD8ayOy*********',
      widgetId: 0
    }
  },
  methods: {
    execute () {
      window.grecaptcha.execute(this.widgetId)
    },
    reset () {
      window.grecaptcha.reset(this.widgetId)
    },
    render () {
      if (window.grecaptcha) {
        this.widgetId = window.grecaptcha.render('g-recaptcha', {
          sitekey: this.sitekey,
          size: 'invisible',
          // the callback executed when the user solve the recaptcha
          callback: (response) => {
            // emit an event called verify with the response as payload
            this.$emit('verify', response)
            // reset the recaptcha widget so you can execute it again
            this.reset() 
          }
        })
      }
    }
  },
  mounted () {
    // render the recaptcha widget when the component is mounted
    this.render()
  }
}
</script>

Step 3:

Import the recaptcha component and add it to your page (parent component).

page.vue

<template>
  <div>
    <h1>Parent component (your page)</h1>
    <button @click="executeRecaptcha">execute recaptcha</button>
    <!-- listen to verify event emited by the recaptcha component -->
    <recaptcha ref="recaptcha" @verify="submit"></recaptcha>
  </div>
</template>

<script>
import Recaptcha from 'recaptcha'
export default {
  components: {
    Recaptcha
  },
  methods: {
    // send your recaptcha token to the server to verify it
    submit (response) {
      console.log(response)
    },
    // execute the recaptcha widget
    executeRecaptcha () {
      this.$refs.recaptcha.execute()
    }
  }
}
</script>

Problem

Original source