Aliyun noCAPTCHA component for Vue.js

vue-nocaptcha

Aliyun No-Captcha on Vue.

What this do

  • Use Aliyun noCAPTCHA in Vue
  • Use noCAPTCHA locally, load fast!
  • Support both Desktop and H5 noCAPTCHA
  • Support full https request
  • Support language switch

Install

npm install vue-nocaptcha

Version

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

there's 3 versions of Vue-noCAPTCHA now.

  • full version (support both desktop and H5)
// import { nocaptcha } from 'vue-nocaptcha'
import nocaptcha from 'vue-nocaptcha/nocaptcha.js'
export default {
    components: {
        nocaptcha
    }
}

And,

  • single desktop version
import nocaptcha from 'vue-nocaptcha/nocaptcha_pc.js'
export default {
    components: {
        nocaptcha
    }
}
  • single H5 version
import nocaptcha from 'vue-nocaptcha/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>

GitHub