image.png

本文章采用阿里云的滑塊驗證肠套，如果要使用的話嗅虏，首先注冊并申請appKey畅哑。

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

服務(wù)器采用python驗證:https://segmentfault.com/a/1190000010594386
本文章講的是如何在vue框架集成阿里的滑塊驗證速址，所以服務(wù)器的部分不會涉及。

好了欲主，其實集成中最關(guān)鍵的就是js的加載，相關(guān)的知識請看本文章提到的另一篇文章：vue動態(tài)加載遠程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)
                    //將這三個參數(shù)在這里回調(diào)服務(wù)器的接口，進行服務(wù)器的驗證
                }
            }
            $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: "網(wǎng)絡(luò)不給力挽铁，請<a href=\"javascript:__nc.reset()\">點擊刷新</a>",
            });
        }
    }
}
</script>

<style>

</style>

引入方法就是一般組件的方法伟桅，后續(xù)還有很多可以完善的地方敞掘，不過都是vue的知識，可以在網(wǎng)上相互借鑒贿讹。