chiaweilee / vue-nocaptcha

Aliyun No-Captcha on Vue

Vue-noCAPTCHA

Vue.js 2 Only

What this do

1. LoadAsync
2. LoadFast 🔜
3. Support Desktop and Mobile 📱💻
4. Support Full HTTPS 🔒
5. Support Languages 🇨🇳🇺🇸🇬🇧🇯🇵🇩🇪🇪🇸🇫🇷🇮🇩🇮🇹🇰🇷🇳🇱🇵🇱🇷🇺🇹🇭🇹🇷🇻🇳

Install

npm install vue-nocaptcha

Version

NOTE: Please Keep Update this plugin to maintain nc.js and nch5.js files fresh

Full version (both Desktop and Mobile)

// import { nocaptcha } from 'vue-nocaptcha'
import nocaptcha from 'vue-nocaptcha/lib/nocaptcha.js'
export default {
    components: {
        nocaptcha
    }
}

Single Desktop version

import nocaptcha from 'vue-nocaptcha/lib/nocaptcha_pc.js'
export default {
    components: {
        nocaptcha
    }
}

Single Mobile version

import nocaptcha from 'vue-nocaptcha/lib/nocaptcha_h5.js'
export default {
    components: {
        nocaptcha
    }
}

Usage

base usage

<nocaptcha
  :appkey="'FFFF00000000016AB730'"
  :scene="'test'"
  @callback="getToken"
></nocaptcha>

desktop and h5 set

<nocaptcha
  :appkey="{
    pc: 'FFFF00000000016AB730',
    h5: 'FFFF00000000016AB730'
  }"
  :scene="{
    pc: 'test',
    h5: 'h5test'
  }"
  @callback="getToken"
></nocaptcha>

as component (suggest)

import { nocaptcha } from 'vue-nocaptcha'
export default {
    components: {
        nocaptcha
    }
}

as global component

import Vue from 'vue'
import nocaptcha from 'vue-nocaptcha'
Vue.use(nocaptcha)

pc/h5 version control

Normally, it can be control automatic.

Maybe, you need control it yourself.

<nocaptcha
  :h5="isMobile()"
></nocaptcha>

NOTE: no h5 prop in single PC/H5 version

more

use https

<nocaptcha
  https
></nocaptcha>

use oversea CDN

<nocaptcha
  aeis
></nocaptcha>

use lang

<nocaptcha
  lang="'vi_VN'"
></nocaptcha>

events

<nocaptcha
  @load="onLoad"
  @callback="onSuccess"
  @error="onError"
></nocaptcha>