专栏首页全栈之路vue之滑块验证码

vue之滑块验证码

本文章采用阿里云的滑块验证,如果要使用的话,首先注册并申请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的知识,可以在网上相互借鉴。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 《你不知道的js(上卷)》笔记1(基础知识和闭包)

    首先,读本书让我了解到js的最重要的两个知识点——闭包还有this指向,其次一点的就是编译原理和对象原形。

    陨石坠灭
  • 关于win10子系统(ubuntu)

    关于如何安装安装ubuntu,之前都是需要下载安装一个虚拟机,然后下载镜像安装包,不过现在已经不需要那么麻烦了。安装教程:Win10安装Ubuntu子系统教程(...

    陨石坠灭
  • Android MediaCodec图片合成视频

    YUV是为了解决彩色电视与黑白电视的兼容性。黑白视频只有Y值,也就是灰度。而彩色电视则有YUV3个分量,如果只读取Y值,就只能显示黑白画面了。YUV最大的优点在...

    陨石坠灭
  • SpringBoot2.x系列教程(八)SpringBoot常用注解汇总

    随着Spring及Spring Boot的发展,基于Java的配置已经慢慢替代了基于xml的配置形式。本篇文章为大家整理和简介Spring Boot中常用的注解...

    用户1161110
  • MYSQL ICP 索引下推 为什么他行,你不行?

    MYSQL 的ICP 估计大家也都知道,Index condition pushdown,但这个东西怎么用,有什么用,什么时候用,估计能答得上来的人就不多了。

    AustinDatabases
  • h3c交换机gvrp

    GARP提供了一种机制,用于协助同一个局域网内的交换成员之间分发、传播和注 册某种信息(如VLAN、组播地址等)。GARP本身不作为一个实体存在于设备中,遵循G...

    py3study
  • 点量流媒体服务器和普通视频服务器有什么区别?

    点量流媒体服务器除了能实现视频服务器所有功能外,点量流媒体流媒体服务器还可以实现直播转播大并发,加密​‌‌防盗,边下边播功能,结合ott点播系统使用效果更佳!

    点量小崔
  • ajax+json实现echarts多个统计图显示

    前端时常会遇到这样的问题,有一个单独的模块用作统计图,将多个折线或者柱状图,混合使用,下面的例子是用ajax+json模拟了调用接口实现echarts多个统计图...

    祈澈菇凉
  • 读者投稿:synchronized与ReentrantLock的区别,我们又应该作何选择呢?

    彤哥
  • 【网站架构运维丨主题周】业务中台如何提升研发效率

    说到研发效率还真不仅仅就是如何写代码这么简单,读过《人月神话》一书的人都知道,要开发一个产品,并不是人越多越好,而是涉及人与人之间的信息传递成本,有时候人与人的...

    博文视点Broadview

扫码关注云+社区

领取腾讯云代金券