liminspace / vue-recaptcha

Google ReCAPTCHA component for Vue.js

vue-recaptcha

Description

Google ReCAPTCHA component for vue. If you like this package, please leave a star on github.

This version is for Vue 2.0. If you need Vue 1.x support please reference to vue-v1.x.

• Description
• Install
  • NPM
  • CDN
• Usage
  • General
  • Normal ReCAPTCHA
  • Bind Challenge to Button
• API
  • Props
  • Methods
  • Events
• FAQ
  • What is "ReCAPTCHA couldn't find user-provided function: vueRecaptchaApiLoaded"?
  • How to test vue-recaptcha?
  • How about an e2e testing (or integration testing)?

Install

NPM

$ npm install --save vue-recaptcha

CDN

<script src="https://unpkg.com/vue-recaptcha@latest/dist/vue-recaptcha.js"></script>
<!-- Minify -->
<script src="https://unpkg.com/vue-recaptcha@latest/dist/vue-recaptcha.min.js"></script>

Usage

General

Place this in head to load reCAPTCHA:

<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>
</script>

With `onload` callback, it will notify us when the api is ready for use.

Normal ReCAPTCHA

<template>
  <vue-recaptcha sitekey="Your key here"></vue-recaptcha>
</template>

<script>
  import VueRecaptcha from 'vue-recaptcha';
  export default {
    ...
    components: { VueRecaptcha }
  };
</script>

Bind Challenge to Button

<template>
  <vue-recaptcha sitekey="Your key here">
    <button>Click me</button>
  </vue-recaptcha>
</template>

<script>
  import VueRecaptcha from 'vue-recaptcha';
  export default {
    ...
    components: { VueRecaptcha }
  };
</script>

Notice: You could only place one element as vue-recaptcha child.

For more information, please reference to example

API

Props

• sitekey (required)
  ReCAPTCHA site key
• theme (optional)
  The color theme for reCAPTCHA
• type (optional)
  The type of reCAPTCHA
• size (optional)
  The size of reCAPTCHA
• tabindex (optional)
  The tabindex of reCAPTCHA
• badge (optional) (Invisible ReCAPTCHA only)
  Position of the reCAPTCHA badge

For more information, please reference to ReCAPTCHA document and Invisible ReCAPTCHA document.

Methods

• reset
  Reset reCAPTCHA instance
• execute
  Invoke reCAPTCHA challenge

Events

• verify(response) Emit on reCAPTCHA verified response is the successful reCAPTCHA response
• expired() Emit on reCAPTCHA expired
• render(id) Emit on reCAPTCHA mounted on DOM id is the widget id of the component

FAQ

What is "ReCAPTCHA couldn't find user-provided function: vueRecaptchaApiLoaded"?

It's because google's recaptcha have been loaded before your app. You can simply ignore it because vue-recaptcha can still detect and render recaptcha. If you care about this, try to move the script tag of recatpcha after to your app.

How to test vue-recaptcha?

You can mock window.grecaptcha to bypass google's recaptcha. Here is an example which work with jest.

How about an e2e testing (or integration testing)?

Please refernece to recaptcha's faq.