vue-aliyun-captcha
介绍
阿里云滑动验证vue 2。0组件
使用
<template>
<div id="app">
<form novalidate @submit.stop.prevent="submit">
<div>
<label>登录名</label>
<input type="text" v-model="username"></md-input>
</div>
<div>
<label>密码</label>
<input type="password" v-model="password"></md-input>
</div>
<button type="button" @click="onSignin">登录</button>
<aliyun-capcha appkey='FFFF00000000016C4A73' scene='login' v-on:callback='onCaptcha'></aliyun-capcha>
</form>
</div>
</template>
<script>
import Vue from 'vue'
import AliyunCaptcha from 'vue-aliyun-captcha'
export default {
data () {
return {
username:''
,password:''
}
},
components: {
'aliyun-capcha': AliyunCaptcha
},
methods: {
onCaptcha (data) {
this.csessionid = data.csessionid
this.sig = data.sig
this.token = data.token
this.scene = data.scene
this.nc = data.nc
},
onSignin () {
if(this.nc) {
this.nc.reset()
}
// let user = {password: this.password
// , session: this.csessionid
// , sig: this.sig
// , token: this.token
// , scene: this.scene
// };
// }).catch( err => {
// if(this.nc) {
// this.nc.reset()
// }
// })
}
}
}
</script>
<aliyun-capcha appkey='aliyun 滑动验证提供的key' scene='场景' v-on:callback='onCaptcha'></aliyun-capcha>
场景为 login或register,组件会检查是否浏览器类型,在手机浏览器上,会自动加上_h5后缀,以和阿里云的验证要求一致。
callback函数原型为
onCaptcha (data) {
this.csessionid = data.csessionid
this.sig = data.sig
this.token = data.token
this.scene = data.scene
this.nc = data.nc // nc 指向阿里云滑动验证码提供的对象,以便在登录/注册失败时 reset
}
另外,目前需要在html页面引入阿里云滑动验证的css
<link type="text/css" href="//g.alicdn.com/sd/ncpc/nc.css?t=1497440454594" rel="stylesheet" />
待找到好的办法后,去掉这个css引用
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
Dependencies
Dependencies
autoprefixer: ^6.7.2babel-core: ^6.22.1babel-eslint: ^7.1.1babel-loader: ^6.2.10babel-plugin-component: ^0.9.0babel-plugin-istanbul: ^3.1.2babel-plugin-transform-runtime: ^6.22.0babel-preset-es2015: ^6.22.0babel-preset-stage-2: ^6.22.0babel-register: ^6.22.0chai: ^3.5.0chalk: ^1.1.3chromedriver: ^2.27.2connect-history-api-fallback: ^1.3.0cross-env: ^3.1.4cross-spawn: ^5.0.1css-loader: ^0.26.1eslint: ^3.14.1eslint-config-standard: ^6.2.1eslint-friendly-formatter: ^2.0.7eslint-loader: ^1.6.1eslint-plugin-html: ^2.0.0eslint-plugin-promise: ^3.4.0eslint-plugin-standard: ^2.0.1eventsource-polyfill: ^0.9.6express: ^4.14.1extract-text-webpack-plugin: ^2.0.0-rc.2file-loader: ^0.10.0friendly-errors-webpack-plugin: ^1.1.3function-bind: ^1.1.0html-webpack-plugin: ^2.28.0http-proxy-middleware: ^0.17.3inject-loader: ^2.0.1karma: ^1.4.1karma-coverage: ^1.1.1karma-mocha: ^1.3.0karma-phantomjs-launcher: ^1.0.2karma-sinon-chai: ^1.2.4karma-sourcemap-loader: ^0.3.7karma-spec-reporter: 0.0.26karma-webpack: ^2.0.2lolex: ^1.5.2mocha: ^3.2.0nightwatch: ^0.9.12opn: ^4.0.2ora: ^1.1.0phantomjs-prebuilt: ^2.1.14selenium-server: ^3.0.1semver: ^5.3.0shelljs: ^0.7.6sinon: ^1.17.7sinon-chai: ^2.8.0url-loader: ^0.5.7vue-loader: ^10.3.0vue-style-loader: ^2.0.0vue-template-compiler: ^2.1.10webpack: ^2.2.1webpack-bundle-analyzer: ^2.2.1webpack-dev-middleware: ^1.10.0webpack-hot-middleware: ^2.16.1webpack-merge: ^2.6.1