简单介绍下阿里云的H5滑动验证+H5示例源码

简介: 简单介绍下阿里云的H5滑动验证+H5示例源码

我承认我是很菜,不过还好我喜欢看别人的源码,看过以后我还喜欢分享出来,给你们也看看,不要觉得我很伟大, 事实上我就是那么伟大(滚犊子,还写不写了),嗯,好的,下面开始。

效果预览:

这是用的阿里云的组件做的,源码是这样的:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <!-- 国内使用 -->
    <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
    <!-- 若您的主要用户来源于海外,请替换使用下面的js资源 -->
    <!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/nch5/index.js?t=2015052012"></script> -->
</head>
<body>
    <div id="__nc" style="margin-left:auto;margin-right:auto;width:30%;height:100px;padding-top:100px;">
        <div id="nc"></div>
    </div>
    <script>  
    var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':');
    var nc=NoCaptcha.init({
        renderTo: '#nc',     //声明滑动验证需要渲染的目标元素ID
        appkey: 'CF_APP_1',  
        scene: 'register',   
        token: nc_token,     
        trans: {"key1": "code200"},
        elementID: ["usernameID"],
        is_Opt: 0,
        language: "cn",
        timeout: 10000,
        retryTimes: 5,
        errorTimes: 5,
        inline:false,
        apimap: {
            // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
            // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
        },
        bannerHidden:false,
        initHidden:false, 
        callback: function (data) {
            window.console && console.log(nc_token)
            window.console && console.log(data.csessionid)
            window.console && console.log(data.sig)
        },
        error: function (s) {
        }
    });
    NoCaptcha.setEnabled(true);
    nc.reset();//请务必确保这里调用一次reset()方法
    NoCaptcha.upLang('cn', {
        'LOADING':"加载中...",//加载
        'SLIDER_LABEL': "请向右滑动验证",//等待滑动
        'CHECK_Y':"验证通过",//通过
        'ERROR_TITLE':"非常抱歉,这出错了...",//拦截
        'CHECK_N':"验证未通过", //准备唤醒二次验证
        'OVERLAY_INFORM':"经检测你当前操作环境存在风险,请输入验证码",//二次验证
        'TIPS_TITLE':"验证码错误,请重新输入"//验证码输错时的提示
    });
    </script>
</body>
</html>

ps:这次的代码是可以直接使用的,但是有的说,想要里面的js,很简单,查看网页源代码就可以,后者你很懒,也行,下面是js:点击下载

是不是脑瓜子嗡嗡的,我第一次看也一样,慢慢看吧。

相关文章
|
9天前
|
运维 网络协议 安全
Serverless 应用引擎产品使用之阿里云函数计算中添加自定义域名进行域名DNS验证如何解决
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
29 1
|
9天前
|
前端开发 Serverless Shell
Serverless 应用引擎操作报错合集之在阿里云函数计算中,laravel zip包使用示例的start.sh脚本启动时出现错误代码如何解决
Serverless 应用引擎(SAE)是阿里云提供的Serverless PaaS平台,支持Spring Cloud、Dubbo、HSF等主流微服务框架,简化应用的部署、运维和弹性伸缩。在使用SAE过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
34 3
|
9天前
调用阿里云接口实现短信消息的发送源码——CSDN博客
调用阿里云接口实现短信消息的发送源码——CSDN博客
73 0
|
6月前
|
人工智能 自然语言处理 搜索推荐
阿里云“伙伴千问计划”已验证30余个行业应用场景
2023云栖大会上,阿里云发布了“通义千问伙伴计划”阶段性成果。
|
8月前
|
存储 弹性计算 JavaScript
基于阿里云短信服务的防机器人验证
基于阿里云相关产品和服务实现一个手机验证码登录的功能,防止机器人批量注册,服务端采用阿里云ECS服务器,程序语言选用JAVA,服务器软件选用Tomcat,应用服务采用阿里云短信服务,
199 0
|
8月前
|
SQL 分布式计算 测试技术
从 Clickhouse 到阿里云数据库 SelectDB 版内核 Apache Doris:有赞业务场景下性能测试与迁移验证
从 Clickhouse 到阿里云数据库 SelectDB 版内核 Apache Doris 迁移实践:有赞查询提速近 10 倍,OLAP 分析更实时高效!
从 Clickhouse 到阿里云数据库 SelectDB 版内核 Apache Doris:有赞业务场景下性能测试与迁移验证
|
11月前
|
机器学习/深度学习 API Python
阿里云DSW实例wandb使用示例
wandb是一个免费的,用于记录实验数据的工具。wandb相比于tensorboard之类的工具,有更加丰富的用户管理,团队管理功能,更加方便团队协作。本文主要演示如何在阿里云DSW实例中使用wandb。
625 1
|
11月前
|
弹性计算 Linux 开发工具
阿里云学生服务器免费用半年_1个月加6个月_学生验证
阿里云学生服务器免费用半年_1个月加6个月_学生验证流程,阿里云学生服务器优惠活动:高效计划,可以免费领取一台阿里云服务器,如果你是一名高校学生,想搭建一个linux学习环境、git代码托管服务器,或者创建个人博客网站记录自己的学习成长历程,拥有一台云服务器是很有必要的。阿里云的飞天加速计划3.0——高校计划,面向学生开发者提供免费的云服务器福利,通过学生身份认证及续费任务后,最多可领取7个月免费云服务器ECS资源
92898 40
|
11月前
|
弹性计算 Linux 开发工具
阿里云学生服务器申请_学生验证流程_免费学生机
2023阿里云学生服务器申请_学生验证流程_免费学生机,如果你从未参与过阿里云高校学生免费领取ECS的活动,在通过学生身份认证及续费任务后,最多可领取1+6个月免费云服务器ECS资源
909 5
|
11月前
|
弹性计算 小程序
阿里云学生验证网页入口及流程
阿里云学生验证网页入口及流程,阿里云学生用户完成学生认证可以免费领取一台阿里云服务器,那么问题来了,阿里云学生验证申请入口​在哪?阿里云百科分享阿里云学生验证入口网页链接及学生认证全流程
376 0

热门文章

最新文章