Java实现网页滑动验证与短信验证码案例精析

最新推荐文章于 2024-06-24 13:43:26 发布
置顶 最新推荐文章于 2024-06-24 13:43:26 发布
阅读量4.9k 收藏 33
点赞数 7
分类专栏： 短信验证码 文章标签： Java 网页滑动验证 接入短信验证码 验证码案例分析
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/veesing/article/details/88290441
版权

PC版滑动验证的实现

简介

滑动验证是基于人机识别技术开发的智能验证码产品。用户通过简单的右滑交互，无需思考即可通过验证。

资源引入说明

使用PC版滑动验证码，需要引入以下js资源，为保证服务功能最优，官方会定期迭代升级线上js资源，因此请避免使用本地文件导入js资源，以免后端版本更新而前端资源未更新造成冲突：

<!-- 国内使用 -->
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
<!-- 若您的主要用户来源于海外，请替换使用下面的js资源 -->
<!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script> -->

其中，t字段建议设置为小时级别时间戳，随时间更新，确保js不会被浏览器长时间缓存，这样能够享受到官方针对js的动态发布迭代。

完整接入demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!-- 国内使用 -->
        <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
         <!-- 若您的主要用户来源于海外，请替换使用下面的js资源 -->
        <!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script> -->
    </head>
    <body>
        <div id="your-dom-id" class="nc-container"></div> <!--No-Captcha渲染的位置，其中 class 中必须包含 nc-container-->
        <script type="text/javascript">
        var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':');
        var NC_Opt = 
        {
            renderTo: "#your-dom-id",
            appkey: "CF_APP_1",
            scene: "register",
            token: nc_token,
            customWidth: 300,
            trans:{"key1":"code0"},
            elementID: ["usernameID"],
            is_Opt: 0,
            language: "cn",
            isEnabled: true,
            timeout: 3000,
            times:5,
            apimap: {
                // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
                // 'get_captcha': '//b.com/get_captcha/ver3',
                // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
                // 'get_img': '//c.com/get_img',
                // 'checkcode': '//d.com/captcha/checkcode.jsonp',
                // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
                // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
                // 'umid_serUrl': 'https://g.com/service/um.json'
            },   
            callback: function (data) { 
                window.console && console.log(nc_token)
                window.console && console.log(data.csessionid)
                window.console && console.log(data.sig)
            }
        }
        var nc = new noCaptcha(NC_Opt)
        nc.upLang('cn', {
            _startTEXT: "请按住滑块，拖动到最右边",
            _yesTEXT: "验证通过",
            _error300: "哎呀，出错了，点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
            _errorNetwork: "网络不给力，请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
        })
        </script>
    </body>
</html>

参数详细说明

参数 含义 是否必填
renderTo 声明滑动验证需要渲染的目标元素ID 是
appkey 应用标示。它和scene字段一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以从console的配置里找到它正确的值，请勿乱写 是
scene 场景标示。它和appkey字段一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以从console的配置里找到它正确的值，请勿乱写 是
token 滑动验证码的主键，请务必不需要写死固定值。请确保每个用户每次打开页面时，token都是不同的。建议格式为”您的appkey”+”时间戳”+”随机数” 是
customWidth 滑动条的长度，建议预留300像素以上 否
trans 业务键字段。您可以不写此字段，也可以按照下文中”问题排查与错误码”部分文档配置此字段，便于线上问题排查 否
elementID 通过Dom的ID属性自动填写trans业务键，您可以不写此字段，也可以按照下文中”问题排查与错误码”部分文档配置此字段，便于线上问题排查 否
is_Opt 是否自己配置底层采集组件。如无特殊场景请保持写0或不写此项。默认为0 否
isEnabled 是否启用，无特殊场景请默认写true。默认为true 否
timeout 内部网络请求的超时时间，一般不需要改，默认值为3000ms 否
times 允许服务器超时重复次数，默认5次 否
apimap 用于自己指定滑动验证各项请求的接口地址。如无特殊情况，请不要配置这里的apimap 否
callback 前端滑动验证通过时会触发此回调，您可以在这个回调中将token、sessionid、sig记录下来，随业务请求带到您的server端调用验签 是

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

方法详细说明

noCaptcha对象中维护了一些方法提供给您使用，您可以通过诸如var nc = new noCaptcha(NC_Opt); nc.functionName(parm);的方式来调用使用它们。

最低0.47元/天 解锁文章
veesing
关注
  • 7
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
图形验证码+短信验证码【Java应用实例】
短信接口_短信验证码_短信验证码接口
03-27 2万+
一、图形验证码的实现 1.1 简介 常在网上晃悠的人，对下面这张图都不会陌生。特别是在注册新账号、确认交易时，它们都会频繁出现，要求我们输入正确的验证码，那这些看上去跟我们要做的事情完全无关的验证码到底有何作用呢？ 其实，验证码的校验即是一个直接的图灵测试，简单的逻辑是：服务提供者向用户方提出一个较为复杂的问题，能正确回答的即是人类，回答不出的即是机器或者程序代码。这个概念基于这样一个重...
测试开发工程师常见面试题
Hningning的博客
11-26 4916
1. CPU 和 GPU的区别 CPU 力气大啥P事都能干，还要协调。 GPU 上面那家伙的小弟，老大让他处理图形，这方面处理简单，但是量大，老大虽然能处理，可是老大只有那么几个兄弟，所以不如交给小弟处理了，小弟兄弟多，有数百至数千个，而且是专门只干这行和只能干这行。 详细解释 2. 推荐的算法有哪些？ 1 基于人口统计学的推荐 2 基于内容的推荐 3 协同过滤 4 混合推荐算法 3. 协同过滤 ...
Java实现滑块拼图验证码校验（亲测有效）
weixin_46991199的博客
06-24 637
这里使用 以小图的四边为最终边界，上凹下凸，左无由凸，左边框高亮阴暗简单处理。返回滑块拼图验证码信息：两个Base64字符串图片信息和(X,Y)坐标。通过token，获取 Redis中的 (X,Y)坐标值，注意有效期。返回前端，两个Base64字符串图片信息，Y坐标值和 token。在阈值误差范围内，返回前端验证通过，否则返回前端验证不通过。在若干原图中随机一张原图，生成滑块拼图验证码信息。滑动拼图结束后，调用校验滑块拼图验证码接口。调用获取滑块拼图验证码接口，展示图片信息。
java实现滑动验证码
12-08
java实现滑动验证码
java实现图片滑动验证(包含前端代码)
08-25
Java 实现图片滑动验证 Java 实现图片滑动验证是指使用 Java 语言来实现图片滑动验证功能，该功能主要用于防止机器人和恶意攻击。图片滑动验证是一种常用的验证码机制，它可以防止机器人和恶意攻击，保护网站和应用...
js+java实现登录滑动图片验证
10-15
总结来说，js+Java实现的登录滑动图片验证结合了前端的交互设计和后端的图像处理及验证逻辑，提供了一种有效的用户验证方式，既能增强安全性，又能提升用户体验。在实际开发中，应根据项目需求调整细节，确保安全性...
java图片滑动验证（登录验证）原理与实现方法详解
08-25
Java图片滑动验证（登录验证）原理与实现方法详解 Java图片滑动验证（登录验证）是一种常用的身份验证机制，它可以有效地防止机器人和恶意攻击。下面将详细介绍Java图片滑动验证（登录验证）的原理和实现方法。 ...
Java实现点击文字验证码与拖动/滑动图片验证码（源码+demo+单元测试+实现思路）
06-04
DraggedCaptchaApplication为启动滑动验证码demo。 2.运行环境支持 2.1 JDK1.8 2.2. MAVEN-3.3 2.3. spring-boot-2.1.17.RELEASE 2.4. Redis 3. 核心技术要点 3.1.JAVA掌握AWT的BufferedImage、Graphics2D、...
短信验证码接口测试【接入之前必备工作】
短信接口_短信验证码_短信验证码接口
03-19 9666
短信验证码接入在项目中太常见了，但是很多平台的验证码价格昂贵和接收速度慢等不利于用户体验的特点，此次主要是选择短信验证码的接入测试，接入之前就可以进行短信平台的挑选。 第一步：选择短信平台 寻找若干个短信平台，获取测试接口（注：有些平台是可以免费进行试用或者测试，有些平台是不能进行测试的，试用之前最好了解清楚。）如下图所以，就是某个短信平台的接口测试环境。 第二步：获取App...
手机APP项目中调用第三方短信验证码接口
短信接口_短信验证码_短信验证码接口
03-21 4923
手机APP登录方式，除了短信验证码登录之外，还可以绑定第三方社交账号进行登录，但是手机验证码登录是必不可少的一个环节，可以在后期客户维护起到至关重要的作用。 这次是从前端和后端给介绍第三方的短信验证码接口的接入（注：标准的HTTP接口或者HTTPS接口适用于各种语言，且容易接入） <html> <head> <meta charset="utf-8...
注意这两点，就可以提升企业短信验证码的发送速度
短信接口_短信验证码_短信验证码接口
03-13 700
短信验证码是企业的刚需，不管是用户注册还是用户通知，作用总是不可代替。快速的短信验证码，可以明显提升用户体验，也可以给用户留下一个好印象。下面给大家介绍一下提升短信验证码速度方法。 第一、服务器相应速度，验证码是属于触发类型，一般来说更看重的是合作短信平台的服务器，虽说自身服务器也会产生一定的影响，但是基本是可以忽略不计的。 短信平台的服务器对请求处理不及时，这就导致短信验证码的延...
Springboot项目集成短信验证码（超简单）
短信接口_短信验证码_短信验证码接口
02-29 627
springboot集成短信验证码，有问题请在评论区留言～
接入短信验证码代码
短信接口_短信验证码_短信验证码接口
03-20 619
短信验证码接入分前端和后端，具体代码如下 前端代码 <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1...
开题报告电影票订票APP的设计与实现 已通过开题答辩的.doc
07-30
近些年的电影在人们文娱活动中占据重要地位，另外，由于人们的生活越来越富有，越来越多的人们不再选择在家里看电影，而是选择去电影院看电影。但是，以往的售票方式是需要工作人员一张张的录入到账户薄中的，这一模式已不再适应现在的实际情况，因为手动的操作不仅繁琐还容易存在差错。随着电子商务的发展，网络购票已经成为一种趋势，电子影票也已经慢慢走入人们的生活。目前，网票网作为国内首家全国性的网上选座购买电影票平台完全实现网上/手机查看影讯、自助选座、网银支付、自助验票全自助化营运模式。
Magene_C506_1722330141_905661_1722351868.fit
最新发布
07-30
Magene_C506_1722330141_905661_1722351868.fit
麻雀搜索算法SSA-CNN-BiLSTM-Mutilhead-Attention多变量时序预测含源码 5631.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-BiLSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-BiLSTM-Mutilhead-Attention回归预测
开题报告 二手手机收售系统【答辩高分内容】.doc
07-30
当换手机变成如“女人换衣服”般的容易，你被换下的那款二手手机究竟流向何处，才能释放其最大经济价值？某环保组织曾批露一组数据——每年，中国都会产生230万吨电子垃圾，仅次于美国的300万吨，是世界第二大电子垃圾生产国，并且还以年均20％的速度增加。另外据不完全统计，目前全国仅闲置手机就有10亿多部，并且每年新增3至5亿部。机遇与危机并存 据统计，我国手机用户数量现已达11．46亿。仅去年一年，全国就销售4．25亿部新手机，同时有近4亿部手机被淘汰。在这个手机更新换代比眨眼还快的年代，我国旧手机的回收和无害化处理措施却没能跟上，不少淘汰下来的旧手机都面临“无处可去”的尴尬。
KeePass密码管理器
07-30
KeePass是一个开源的密码管理器，它允许用户存储和管理他们的密码、证书、银行账户、信用卡信息等敏感数据。以下是一些关于KeePass的要点： 安全性：KeePass使用强大的加密算法来保护存储的数据，例如AES或Twofish。这意味着只有知道主密码或拥有主密钥文件的用户才能访问数据库。 跨平台：KeePass有多个版本，包括KeePass 2.x（适用于Windows）和KeePassXC（适用于Linux和macOS），它们都可以免费使用。 数据库：KeePass使用自己的数据库格式来存储密码，这使得用户可以创建复杂的数据库结构，包括分组、子分组和标签。 便携性：KeePass数据库可以存储在任何地方，包括U盘或云存储服务，使得用户可以随时随地访问他们的密码。 自动填充：KeePass可以集成到大多数现代浏览器中，自动填充登录表单，减少手动输入密码的需求。 密码生成器：KeePass内置了密码生成器，可以生成强大且难以猜测的密码。
java 图片滑动验证码_java实现图片滑动验证
06-11
以下是一个简单的 Java 图片滑动验证码的示例代码，使用 Java Swing 库实现： ```java import java.awt.*; import java.awt.event.*; import javax.swing.*; import java.util.Random; public class ImageSliderVerificationCode extends JFrame { private static final long serialVersionUID = 1L; private final int WIDTH = 400; private final int HEIGHT = 300; private final int BLOCK_SIZE = 50; private Image bgImage; private Image blockImage; private int blockX; private int blockY; private int mouseX; private int mouseY; private boolean isDragging; public ImageSliderVerificationCode() { setTitle("Image Slider Verification Code"); setSize(WIDTH, HEIGHT); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setResizable(false); setLocationRelativeTo(null); bgImage = new ImageIcon("background.jpg").getImage(); blockImage = new ImageIcon("block.png").getImage(); addMouseListener(new MouseAdapter() { public void mousePressed(MouseEvent e) { if (e.getX() >= blockX && e.getX() <= blockX + BLOCK_SIZE && e.getY() >= blockY && e.getY() <= blockY + BLOCK_SIZE) { isDragging = true; mouseX = e.getX(); mouseY = e.getY(); } } public void mouseReleased(MouseEvent e) { isDragging = false; if (blockX >= WIDTH - BLOCK_SIZE) { JOptionPane.showMessageDialog(null, "Verification passed!"); System.exit(0); } else { blockX = 0; blockY = new Random().nextInt(HEIGHT - BLOCK_SIZE); repaint(); } } }); addMouseMotionListener(new MouseMotionAdapter() { public void mouseDragged(MouseEvent e) { if (isDragging) { blockX += e.getX() - mouseX; blockY += e.getY() - mouseY; if (blockX < 0) { blockX = 0; } if (blockX > WIDTH - BLOCK_SIZE) { blockX = WIDTH - BLOCK_SIZE; } if (blockY < 0) { blockY = 0; } if (blockY > HEIGHT - BLOCK_SIZE) { blockY = HEIGHT - BLOCK_SIZE; } mouseX = e.getX(); mouseY = e.getY(); repaint(); } } }); } public void paint(Graphics g) { g.drawImage(bgImage, 0, 0, null); g.drawImage(blockImage, blockX, blockY, null); } public static void main(String[] args) { ImageSliderVerificationCode verCode = new ImageSliderVerificationCode(); verCode.setVisible(true); } } ``` 此代码将生成一个包含背景图片和滑块图片的窗口。当用户按住滑块图片并拖动它时，窗口将显示移动后的滑块图片。如果用户将滑块图片拖动到窗口的右边缘，则显示验证通过的消息并退出程序。否则，滑块图片将被重置到窗口的左侧，并随机在窗口的垂直方向上移动。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值