Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Web前端图形验证码登录验证功能

Web前端图形验证码登录验证功能

原创
作者头像
悟空码字
修改于 2023-04-11 10:02:19
修改于 2023-04-11 10:02:19
1.6K00
代码可运行
举报
运行总次数:0
代码可运行

大家好,我是小悟

前言

相信大家经常在各种网站上登录、注册、下发短信、活动等会看到,系统会弹出来一个滑块验证,让你把一个滑块滑到指定空缺的位置(还有其他种形式,比如按顺序点击文字或图案等等),系统会校验,校验正确则登录成功,否则即使账号密码输入正确也无法登录。

这样做主要是为了系统更安全,减少被机器模拟登录行为破坏网站。今天就来实践一下腾讯云提供的图片验证功能。

验证时序图

实现

前端代码

1、div代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div class="col-xs-4">
<button type="button" id="TencentCaptcha"
        data-appid="2017233567"
        data-cbfn="callback" class="btn btn-primary btn-block btn-flat">登录</button>
</div>

2、js代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
window.callback = function(res){
        if(res.ret === 0){
            var data = "username="+vm.username+"&password="+vm.password+"&ticket="+res.ticket+"&randstr="+res.randstr;
            $.ajax({
                type: "POST",
                url: "sys/login",
                data: data,
                dataType: "json",
                success: function (result) {
                    if(result.code == 0){//登录成功
                        parent.location.href ='index.html';
                    }else{
                        vm.error = true;
                        vm.errorMsg = result.msg;
                    }
                }
            });
        }
    };

后端代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@Value("${tencent.captcha.url}")
private String url;
@Value("${tencent.captcha.aid}")
private String aid;
@Value("${tencent.captcha.AppSecretKey}")
private String appSecretKey;

@ResponseBody
@PostMapping(value = "/sys/login")
public R login(String username, String password, String ticket, String randstr, HttpServletRequest request) {
  try{
    Subject subject = ShiroUtils.getSubject();
    UsernamePasswordToken token = new UsernamePasswordToken(username, password);
    subject.login(token);
  }catch (UnknownAccountException e) {
    return R.error(e.getMessage());
  }catch (IncorrectCredentialsException e) {
    return R.error("账号或密码不正确");
  }catch (LockedAccountException e) {
    return R.error("账号已被锁定,请联系管理员");
  }catch (AuthenticationException e) {
    return R.error("账户验证失败");
  }
  HttpMethod method =HttpMethod.POST;
  MultiValueMap<String, String> params= new LinkedMultiValueMap<String, String>();
  params.add("aid", aid);
  params.add("AppSecretKey", appSecretKey);
  params.add("Ticket", ticket);
  params.add("Randstr", randstr);
  params.add("UserIP", IPUtils.getIpAddr(request));
  String msg = httpClient.client(url,method,params);
  JSONObject json = JSONObject.parseObject(msg);
  String response = (String) json.get("response");
  String evilLevel = (String) json.get("evil_level");
  String errMsg = (String) json.get("err_msg");
  if("1".equals(response)){
    return R.ok();
  }else {
    return R.error("验证失败");
  }
}

参数配置,aid和AppSecretKey在腾讯云后台获取

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
tencent:
  captcha:
    url: https://ssl.captcha.qq.com/ticket/verify
    aid: ***********
    AppSecretKey: ***********

效果

您的一键三连,是我更新的最大动力,谢谢

山水有相逢,来日皆可期,谢谢阅读,我们再会

我手中的金箍棒,上能通天,下能探海

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
EasyRTC-SFU如何实现登录页的验证码校验功能?
大家都知道每个网站的安全校验机制都是网站安全的重要组成部分,包括密码、短信验证码、二维码验证等验证方式,除此之外,我们登陆很多网站都能了解到用户登录是会有验证码校验功能的。
TSINGSEE青犀视频
2021/05/24
6920
vue+drf+第三方滑动验证码的接入实现
近期在项目开发练习中用到了登录功能 + 验证码的需求,验证码一般分为三种类型:图片验证码、短信验证码、滑动验证码,相关实现思路如下
仙人技术
2021/02/04
1.4K0
从零玩转腾讯滑块验证码
现在大部分公司的前端都是以滑块验证码进行验证机器人行为,后端也有但差不多都是图形验证码或者手机验证码,直接进入主题接下来我们要玩转的技术 是腾讯云出品的滑块验证码(可以免费领取5W以上的免费次数有效期限一年哦)
杨不易呀
2022/01/19
11.6K7
从零玩转腾讯滑块验证码
从构建分布式秒杀系统聊聊验证码
为了拦截大部分请求,秒杀案例前端引入了验证码。淘宝上很多人吐槽,等输入完秒杀活动结束了,对,结束了...... 当然了,验证码的真正作用是,有效拦截刷单操作,让羊毛党空手而归。
java架构师
2019/03/19
1.2K0
从构建分布式秒杀系统聊聊验证码
从构建分布式秒杀系统聊聊验证码
为了拦截大部分请求,秒杀案例前端引入了验证码。淘宝上很多人吐槽,等输入完秒杀活动结束了,对,结束了...... 当然了,验证码的真正作用是,有效拦截刷单操作,让羊毛党空手而归。
小柒2012
2018/10/09
9250
从构建分布式秒杀系统聊聊验证码
登录验证码demo-java
在一些类似于管理系统的项目中,我们在登录时经常会用到图片验证码。这里把我自己写的一个小系统(后台是java语言)的验证码部分摘出来。 总体思路是后端有一个生成验证码图片的接口,把验证码图片写入浏览器,前端页面在img标签里的src属性里填写后端生成验证码图片的接口地址即可。 1、java部分-CaptchaController.java 我这里是把后端生成的验证码生成图片返回给浏览器时,同时存入到了数据库中,前端登录时,后端根据前端输入的验证码和数据库中的验证码作对比,来判断是否可以登录。 package
用户1174387
2018/01/17
3.3K0
登录验证码demo-java
Shiro整合Spring实现登录验证和授权之入门
Apache Shiro是一个功能强大、灵活的,开源的安全框架。它可以干净利落地处理身份验证、授权、企业会话管理和加密。
CBeann
2023/12/25
4080
Shiro整合Spring实现登录验证和授权之入门
BS1045-基于Android的校园交流信息通讯管理系统
基于Android的校园交流信息通讯管理系统,系统采用多层MVC软件架构,采用Java websocket 通信开发技术实现针对校园内部学生之间的学习资源分享,及时通讯,教学课程小组的建立及管理,实现校园内部快速线上教学,校园交友等功能。
计算机程序优异哥
2022/12/05
2520
常用验证码之滑动验证码|图形验证码
这里是常用验证码的第三篇——滑动/图形验证码。在前两篇已经实现了随机验证码和算术验证码,感兴趣的可以去看一下~
流眸
2020/07/06
22.1K1
Shiro无状态Web应用集成--Java学习网
在一些环境中,可能需要把Web应用做成无状态的,即服务器端无状态,就是说服务器端不会存储像会话这种东西,而是每次请求时带上相应的用户名进行登录。如一些REST风格的API,如果不使用OAuth2协议,就可以使用如REST+HMAC认证进行访问。HMAC(Hash-based Message Authentication Code):基于散列的消息认证码,使用一个密钥和一个消息作为输入,生成它们的消息摘要。注意该密钥只有客户端和服务端知道,其他第三方是不知道的。访问时使用该消息摘要进行传播,服务端然后对该消息摘要进行验证。如果只传递用户名+密码的消息摘要,一旦被别人捕获可能会重复使用该摘要进行认证。
用户1289394
2021/01/20
3720
Shiro无状态Web应用集成--Java学习网
Java图形验证码支持gif、中文、算术等
图形验证码是最经典,也是最常用的验证方式。今天介绍一个非常不错的类库:Java图形验证码,支持gif、中文、算术等类型,可用于Java Web、JavaSE等项目。
BUG弄潮儿
2020/10/19
1K0
验证码的实现
周杰伦本人
2023/10/12
2570
easyui+ssm+shiro做的登录注册修改密码审核用户(二)
easyui+ssm+shiro做的登录注册修改密码审核用户(二)
Java架构师必看
2021/04/13
6500
easyui+ssm+shiro做的登录注册修改密码审核用户(二)
nodejs使用redis实现图形验证码功能
简单的写了一下node如果使用redis以及如何生成图形验证码。主要目的是为了在设计登陆注册的时候有图形验证码可以简单防止频繁的刷登陆注册接口。将验证码存于redis中主要是因为redis是一个key-value类型的缓存。用完即删除,十分适用于这样的临时存值的需求
w候人兮猗
2020/06/24
1.1K0
一文搞懂Go整合captcha实现验证码功能
最近在使用Go语言搞一个用户登录&注册的功能,说到登录&注册相关,我们油然会产生一种增加验证码的想法,因此着手实现,后来在GitHub上找到了这个名叫captcha的插件,于是就利用文档进行了初步的学习,并融入到自己的项目中,整个过程下来感觉这个插件的设计非常巧妙,所以就想写一篇文章分享一下,通过本篇文章,你会学到:
闫同学
2024/02/07
6230
Todo List: 多人协同处理待办事项,权限管理 – 第七章(第1节)
Todo List项目到这里已经到了非常重要的部分,涉及到用户部分。权限,多人协同操作等,都是非常重要,且复杂的地方,所以这里分为几个章节,一步一步的完成。
Javanx
2019/09/04
1.5K0
Todo List: 多人协同处理待办事项,权限管理 – 第七章(第1节)
《SSM篇》《整合SSM+Mybitas-plus+shiro+quartz容灾项目登录篇》
一、环境搭建 1.配置pom <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.
2020/10/29
8990
快速搭建Spring Boot项目及常用技术整合
Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置。
一觉睡到小时候
2019/12/13
9530
【Java 进阶篇】Java Web开发:实现验证码功能
在Web应用程序中,验证码(CAPTCHA)是一种常见的安全工具,用于验证用户是否为人类而不是机器。验证码通常以图像形式呈现,要求用户在登录或注册时输入正确的字符。在这篇文章中,我们将详细介绍如何在Java Web应用程序中实现验证码功能。
繁依Fanyi
2023/11/02
1.3K0
【Java 进阶篇】Java Web开发:实现验证码功能
从4开始,在后端系统中增加用户注册和登录功能
本次我们接着上四篇文章进行讲解《从0开始,用Go语言搭建一个简单的后端业务系统》、《从1开始,扩展Go语言后端业务系统的RPC功能》、《从2开始,在Go语言后端业务系统中引入缓存》以及《从3开始,在业务系统中增加分页功能》,这次是系统中比较核心的功能——用户登录&注册,这个功能其实本应该是最先实现的,但是由于不同因素的影响,放到了本次进行实现,不过也无伤大雅,后期我们都会不断的进行查漏补缺和优化来使我们的项目总体上更加优雅,话不多说,我们开始正文:
闫同学
2023/10/12
3090
相关推荐
EasyRTC-SFU如何实现登录页的验证码校验功能?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档