(六)play之yabe项目【验证码】
添加验证码功能
在Application.java中添加一个action:captcha()
- /**
- * 添加验证码
- */
- public static void captcha(String id) {
- //Images.Captcha继承了InputStream,具备流的功能
- Images.Captcha captcha = Images.captcha();
- //向客户端输出流
- renderBinary(captcha);
- }
修改routes文件,为获得验证码添加新的路由
- GET /captcha Application.captcha
访问http://localhost:9000/captcha,即可显示验证码,每次刷新都显示不同的验证码
服务端与客户端如何处理验证码
验证码生成了,服务端如何对其进行校验呢?
首先,play是一个无状态的框架,它不会去维护每个客户端的session状态
session以cookie形式存储的,但是cookie未加密,在客户端能够获取到captcha,不安全
说一千道一万,要验证都需要对客户端显示的验证码进行跟踪才能实现,不然丢了关联如何验证?!
解决办法:
在服务端使用缓存来保存验证码,为其生成一个ID,将此ID传到客户端
再由客户端显示验证码时传回服务端,服务端拿到ID后保存验证码
同时,客户端的form中增加一个hidden来保存ID
当提交表单时,通过这个ID就能找到当时生成的验证码,继而验证
集群环境下,这个缓存中的验证码怎么处理呢?
Server A 处理请求,生成验证码,同时保存ID,返回验证码
提交表单时,请求被分配给Server B 进行处理,Server B 的缓存里没有这个ID啊,怎么办?
共享缓存,比如,使用Redis作为几个Server共用的一个大缓存
改造Application的captcha(),将验证码captcha放到缓存中
- /**
- * 添加验证码
- * @param id 服务端缓存中存放的验证码的id(一个uuid)
- */
- public static void captcha(String id) {
- //Images.Captcha继承了InputStream,具备流的功能
- Images.Captcha captcha = Images.captcha();
- //为验证码指定颜色并返回验证码
- String code = captcha.getText("#E4EAFD");
- //放到缓存中,缓存有效期10mn mn分钟?
- Cache.set(id, code, "10mn");
- //向客户端输出流
- renderBinary(captcha);
- }
在显示评论的窗体时,生成一个唯一的ID,返回到客户端的页面中
- /**
- * 显示详细的博文评论
- */
- public static void show(Long id) {
- Post post = Post.findById(id);
- //生成一个唯一的ID,作为服务端保存验证码时的key
- String randomID = Codec.UUID();
- render(post, randomID);
- }
在show.html模板中显示验证码时,传入此ID
- <!-- 显示一个表单,用户可以添加评论 -->
- <h3>Post a comment</h3>
- #{form @Application.postComment(post.id)}
- <!-- 在这里显示提交评论时出现的错误 -->
- #{ifErrors}
- <p class="error">All fields are required!</p>
- #{/ifErrors}
- <p>
- <label for="author">Your name:</label>
- <input type="text" name="author" id="author"/>
- </p>
- <p>
- <label for="content">Your comment:</label>
- <textarea name="content" id="content"></textarea>
- </p>
- <!-- 验证码 -->
- <p>
- <label for="code">Please type the code below:</label>
- <img alt="captcha" src="@{Application.captcha(randomID)}">
- <br/>
- <input type="text" name="code" id="code" size="18" value=""/>
- <input type="hidden" name="id" value="${randomID}">
- </p>
- <p>
- <input type="submit" value="submit your comment"/>
- </p>
- #{/form}
刷新页面,点击博文添加评论
服务端对验证码进行校验
客户端已经通过隐藏域保存了验证码的ID,提交表单后,服务端的postComment()接收到ID后就能进行验证操作了!
让postComment()接收ID并从缓存中取出验证码,进行校验
此外,具体指定了@Required标明的字段为空时,对应的提示信息
- /**
- * 添加评论
- * 使用@Required注解,检测author和content参数不能为空
- *
- * @param code 客户端输入的验证码
- * @param randomID 服务端保存验证码时用的ID
- */
- public static void postComment(
- Long postId,
- @Required(message="Author is required") String author,
- @Required(message="A comment is required") String content,
- @Required(message="Please type the code below") String code,
- String randomID) {
- Post post = Post.findById(postId);
- //验证码校验,如果equals()返回false,则message()中的信息将传递到客户端
- validation.equals(code, Cache.get(randomID)
- ).message("Invalid code,Please type it again!");
- //错误检测
- if(validation.hasErrors()) {
- //将post对象重新传入模板中,否则新打开的show.html中的post为null!!!
- render("Application/show.html",post);
- }
- //保存评论信息
- post.addComment(author, content);
- //设置提交成功后的提示信息到flash作用域
- flash.success("Thanks for posting %s", author);
- //重新显示该篇博文即其评论
- show(postId);
- }
修改show.html模板,如果验证失败,则显示验证失败的提示信息
- <!-- 显示一个表单,用户可以添加评论 -->
- <h3>Post a comment</h3>
- #{form @Application.postComment(post.id)}
- <!--
- 这里显示提交评论时出现的错误
- 由于postComment()中已经使用@Required(message="xxx")声明了错误提示信息
- 所以,这里只需要显示第一个错误即可!
- -->
- #{ifErrors}
- <p class="error">${errors[0]}</p>
- #{/ifErrors}
- <p>
- <label for="author">Your name:</label>
- <input type="text" name="author" id="author"/>
- </p>
- <p>
- <label for="content">Your comment:</label>
- <textarea name="content" id="content"></textarea>
- </p>
- <!-- 验证码 -->
- <p>
- <label for="code">Please type the code below:</label>
- <img alt="captcha" src="@{Application.captcha(randomID)}">
- <br/>
- <input type="text" name="code" id="code" size="18" value=""/>
- <input type="hidden" name="id" value="${randomID}">
- </p>
- <p>
- <input type="submit" value="submit your comment"/>
- </p>
- #{/form}
验证错误的情况下,为了保持客户端输入的评论内容,在action中重传客户端输入的内容
修改Application.postComment(),这里有很多需要注意的地方!!!
- /**
- * 添加评论
- * 使用@Required注解,检测author和content参数不能为空
- *
- * @param code 客户端输入的验证码
- * @param randomID 服务端保存验证码时用的ID
- */
- public static void postComment(
- Long postId,
- String author,
- @Required(message="A comment is required") String content,
- @Required(message="Please type the code below") String code,
- String randomID) {
- System.out.println("Application.postComment()");
- Post post = Post.findById(postId);
- //验证码校验,如果equals()返回false,则message()中的信息将传递到客户端
- Logger.info("提交评论,randomID="+randomID);
- Logger.info("提交评论,验证码="+code);
- validation.equals(code, Cache.get(randomID)
- ).message("Invalid code,Please type it again!");
- //错误检测
- if(validation.hasErrors()) {
- /**
- * 将post对象重新传入模板中,否则新打开的show.html中的post为null!!!
- * 如果出现错误,则将客户端输入的评论内容重新返回到客户端进行回显。
- * 必须将randomID重新传回到客户端,不然客户端的然的randomID将取不到值
- * 最后导致提价评论后,验证码的ID为空,无法进行验证码的校验操作--总是校验错误,这里很关键!
- * 而且,这里render("Application/show.html")直接调用模板,不会再调用show()进行验证码ID的生成
- * 所以,一个客户端在未验证成功之前,都将使用这个ID作为服务端缓存的key进行存储
- */
- render("Application/show.html",post,randomID,author,content);
- }
- //保存评论信息
- post.addComment(author, content);
- //设置提交成功后的提示信息到flash作用域
- flash.success("Thanks for posting %s", author);
- //清除指定验证码的缓存
- Cache.delete(randomID);
- //重新显示该篇博文即其评论
- show(postId);
- }
在show.html中,为评论的2个输入域增加value属性,用来显示回显的内容
- <p>
- <label for="author">Your name:</label>
- <!-- ${author}:回填数据 -->
- <input type="text" name="author" id="author" value="${author}"/>
- </p>
- <p>
- <label for="content">Your comment:</label>
- <!-- ${content}:回填数据 -->
- <textarea name="content" id="content">${content}</textarea>
- </p>
刷新页面,重新评论
后台校验发现验证码错误,刷新show.html,回显上一次输入的评论并重新生成验证码
输入正确的验证码,提交评论,成功!
输入正确的验证码之后,评论提交成功!
另外,现在对验证码的要求是,严格区分大小写!
要实现IgnoreCase,也简单,保存验证码到缓存的时候,校验的时候做点手脚就行了!
(六)play之yabe项目【验证码】的更多相关文章
- (六)Net Core项目使用Controller之一 c# log4net 不输出日志 .NET Standard库引用导致的FileNotFoundException探究 获取json串里的某个属性值 common.js 如何调用common.js js 筛选数据 Join 具体用法
(六)Net Core项目使用Controller之一 一.简介 1.当前最流行的开发模式是前后端分离,Controller作为后端的核心输出,是开发人员使用最多的技术点. 2.个人所在的团队已经选择 ...
- (四)play之yabe项目【页面】
(四)play之yabe项目[页面] 博客分类: 框架@play framework 主页面 显示当前发表博客的完整内容,以及历史博客列表 Bootstrap Job 一个play job任务就是 ...
- (八)play之yabe项目【身份验证】
(八)play之yabe项目[身份验证] 博客分类: 框架@play framework 添加身份验证 play提供了一个模块-Secure(安全模块),用来做身份验证 允许Secure模块 修改 ...
- (九)play之yabe项目【发表博文】
(九)play之yabe项目[发表博文] 博客分类: 框架@play framework 发表一篇博文 填充管理页面 从主页链接到管理页面时,只简单显示了登陆用户的名称 现在对显示的内容加以丰富 ...
- (七)play之yabe项目【CRUD】
(七)play之yabe项目[CRUD] 博客分类: 框架@play framework 增加CRUD功能 使用CRUD能干嘛?----> 在页面对模型进行增删改查操作,这样有什么实际意义 ...
- (三)play之yabe项目【数据模型】
(三)play之yabe项目[数据模型] 博客分类: 框架@play framework 创建项目 play new yabe What is the application name? [yab ...
- 团队作业第六周--alpha阶段项目复审
组名 优点 缺点 排名 天冷记得穿秋裤队 支持文件离线下载,没有限速 部分功能未实现 1 中午吃啥队 点餐系统需求高,系统功能完善 界面可以再完善 2 小谷围驻广东某工业719电竞大队 项目贴近大学生 ...
- 关于centos7字体缺失导致项目验证码丢失报错500问题
这个问题是这样的,迁移架构的时候项目验证码刷不出来, 页面报错500, 就像下面那样. tomcat报错是数组越界, 看下面 最诡异的是, 开发那边再三确定代码里面没有问题, 于是我试了一下把war包 ...
- 第六周—Alpha阶段项目复审(五饭来了吗)
第六周--Alpha阶段项目复审(五饭来了吗) 以下部分排名只是个人观点: 小组 优点 缺点,bug报告 名次 中午吃啥队 较完整的团体结构,可提供给商家和用户 感觉界面再优化一下就很棒了 1 天冷记 ...
随机推荐
- wndows系统命令总结
window8系统下 打开运行窗口----------鼠标放到任务栏的windows图标下,右击,弹出菜单中如上图或者 打开运行窗口---------按“WIN+R”键, cmd-------打开命令 ...
- 看上去很美 国内CDN现状与美国对比
CDN的理想与现实 多年以前,当<Kingdom of Heaven>这部史诗电影发行的时候,中国的影迷使用电驴和BT来寻找种子,而那个时候,高清也才刚刚进入电影领域,我的同事不惜用自家的 ...
- MFC窗口和控件大小等比例变化
第一步:OnInitDialog里保存对话框及其所有子窗体的Rect区域 CRect rect; GetWindowRect(&rect); listRect.AddTail(rect);// ...
- ubuntu 安装bochs
//首先官网下载bochs源码wget http://bochs.sourceforge.net/svn-snapshot/bochs-20150503.tar.gz//然后解压 tar vxzf b ...
- easyui menubutton combobox 被遮盖问题
如图一所示,menubutton 中的 combobox 被遮盖 z-Index 不够.这是作者给出的解决方案 <a href="#" class="easyui- ...
- eclipse 手动/自动安装插件
只要你的Eclipse的压缩包,一般为xxx.zip,其内部包含了对应的features和plugins文件夹,(不管是否还有content.jar和artifacts.jar)则都可以: 要么手动解 ...
- 转载:Linux kernel rt_mutex的背景和简介
From: http://blog.chinaunix.net/uid-23146151-id-3074045.html 最近在看linux rtmutex部分的实现过程,就像他注释中写的一样,还是比 ...
- 审核流(2)流程设计-SNF.WorkFlow功能使用说明--SNF快速开发平台3.1
流程设计 图形化的流程设计,更方便.直观 1.打开“流程设计“程序,如上.点击”新建“如下: 2.红色部分为必填项,审批对象是选择要审批的程序菜单,单据名称是在审核流流转时用于提示的单据名称,还要选择 ...
- [OpenCV] Identify and Track Specific Object
Abstract—Augmented Reality (AR) has become increasingly popular in recent years and it has a widespr ...
- extractCSS – 帮助你从 HTML 中快速分离出 CSS
extractCSS 是一个免费的基于 Web 的应用程序,能够从 HTML 中提取风格相关的信息,包括 id.class 和内联样式,而且输出可以定制(缩进和括号的用法).该工具非常有用,当我们快速 ...