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

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>