image.png

本文章采用阿里云的滑块验证，如果要使用的话，首先注册并申请appKey。

帮助文档：https://help.aliyun.com/document_detail/66318.html?spm=a2c4g.11186623.4.2.KlnLng

服务器采用python验证:https://segmentfault.com/a/1190000010594386
本文章讲的是如何在vue框架集成阿里的滑块验证，所以服务器的部分不会涉及。

好了，其实集成中最关键的就是js的加载，相关的知识请看本文章提到的另一篇文章：vue动态加载远程js完美实践

好了，新建文件no-captcha.vue，直接上代码：

<template>
    <div :id="modelName" :class="[modelName]">
        <div class="nc-container" ></div>
        <!-- <no-captcha-js src="http://g.alicdn.com/sd/ncpc/nc.js?t=2015052012" type="text/javascript" charset="utf-8" /> -->
    </div>
  
</template>

<script>

export default {

    data () {
        return {
            'appKey':'<你的appkey>',
            'modelName':'no-captcha',
            'nc_token':null,
            'lang':'cn',
            'NC_Opt':null,
        }
    },

    mounted(){ this.init(); },
    components:{
        
    },
    methods: {

        init(){
            var self = this;
            this.nc_token = [this.appKey, (new Date()).getTime(), Math.random()].join(':');
            this.NC_Opt = {
                renderTo: "#no-captcha",
                appkey: "<你的appkey>",
                scene: "nc_login",
                token: this.nc_token,
                customWidth: 300,
                trans:{"key1":"code0"},
                // elementID: ["usernameID"],
                is_Opt: 0,
                language: this.lang,
                isEnabled: true,
                timeout: 3000,
                times:5,
                apimap: {},   
                callback: function (data) { 
                    window.console && console.log(self.nc_token)
                    window.console && console.log(data.csessionid)
                    window.console && console.log(data.sig)
                    //将这三个参数在这里回调服务器的接口，进行服务器的验证
                }
            }
            $api.loadJs("http://g.alicdn.com/sd/ncpc/nc.js?t=2015052012",{
                    success(data){
                        self.generarte();
                    }
              });
                    
        },

        generarte(){
            var nc = new noCaptcha(this.NC_Opt)
            nc.upLang('cn', {
                _startTEXT: "请按住滑块，拖动到最右边",
                _yesTEXT: "验证通过",
                _error300: "哎呀，出错了，点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
                _errorNetwork: "网络不给力，请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
            });
        }
    }
}
</script>

<style>

</style>

引入方法就是一般组件的方法，后续还有很多可以完善的地方，不过都是vue的知识，可以在网上相互借鉴。