(六)play之yabe项目【验证码】

添加验证码功能

在Application.java中添加一个action：captcha()

Java代码

/**
* 添加验证码
*/
public static void captcha(String id) {
//Images.Captcha继承了InputStream，具备流的功能
Images.Captcha captcha = Images.captcha();
//向客户端输出流
renderBinary(captcha);
}

修改routes文件，为获得验证码添加新的路由

Html代码

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放到缓存中

Java代码

/**
* 添加验证码
* @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，返回到客户端的页面中

Java代码

/**
* 显示详细的博文评论
*/
public static void show(Long id) {
Post post = Post.findById(id);
//生成一个唯一的ID，作为服务端保存验证码时的key
String randomID = Codec.UUID();
render(post, randomID);
}

在show.html模板中显示验证码时，传入此ID

Html代码

<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标明的字段为空时，对应的提示信息

Java代码

/**
* 添加评论
* 使用@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模板，如果验证失败，则显示验证失败的提示信息

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()，这里有很多需要注意的地方！！！

Java代码

/**
* 添加评论
* 使用@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属性，用来显示回显的内容

Html代码

<p>
<label for="author">Your name:</label>
<input type="text" name="author" id="author" value="${author}"/>
</p>
<p>
<label for="content">Your comment:</label>
<textarea name="content" id="content">${content}</textarea>
</p>

刷新页面，重新评论

后台校验发现验证码错误，刷新show.html，回显上一次输入的评论并重新生成验证码

输入正确的验证码，提交评论，成功！

输入正确的验证码之后，评论提交成功！

另外，现在对验证码的要求是，严格区分大小写！

要实现IgnoreCase，也简单，保存验证码到缓存的时候，校验的时候做点手脚就行了！

(六)play之yabe项目【验证码】相关推荐

【飞谷六期】爬虫项目1
报名了飞谷六期的爬虫项目,但是自己相关的基础还是较弱,每天都有种无所事事的感觉.决定还是记录一下每天学习到的知识,自己看看也知道学习了些什么. 1.XShell连接阿里云,Xftp传输文件 2.把例子 ...
信息系统项目管理师必背核心考点（六十二）项目组合治理主要过程
科科过为您带来软考信息系统项目管理师核心重点考点(六十二)项目组合治理的主要过程,内含思维导图+真题 [信息系统项目管理师核心考点]项目组合治理的主要过程 1.注定项目组合管理计划 2.定义项目组合 ...
(四)play之yabe项目【页面】
(四)play之yabe项目[页面] 博客分类: 框架@play framework 主页面显示当前发表博客的完整内容,以及历史博客列表 Bootstrap Job 一个play job任务就是一个 ...
(八)play之yabe项目【身份验证】
(八)play之yabe项目[身份验证] 博客分类: 框架@play framework 添加身份验证 play提供了一个模块-Secure(安全模块),用来做身份验证允许Secure模块修改ya ...
(三)play之yabe项目【数据模型】
(三)play之yabe项目[数据模型] 博客分类: 框架@play framework 创建项目 play new yabe What is the application name? [yabe] ...
(七)play之yabe项目【CRUD】
(七)play之yabe项目[CRUD] 博客分类: 框架@play framework 增加CRUD功能使用CRUD能干嘛?----> 在页面对模型进行增删改查操作,这样有什么实际意义呢? ...
(十)play之yabe项目【测试】
项目测试一个项目,首先得经过一系列的测试(开发人员自测,专门的测试人员测试,客户测试)才能上线运行. 尽早发现问题对大家都有好处,作为一个开发人员,自己写的代码最好充分自测后再提交测试. 测试从不同 ...
.NET Core实战项目之CMS 第十六章用户登录及验证码功能实现
前面为了方便我们只是简单实现了基本业务功能的增删改查,但是登录功能还没有实现,而登录又是系统所必须的,得益于 ASP.NET Core的可扩展性因此我们很容易实现我们的登录功能.今天我将带着大家一起来 ...
（六）Neo4j综合项目
0.概述本文以热播电视剧<人民的名义>中的人物关系为数据基础,抛开案例本身的内容,本项目的意义在于指出使用Neo4j数据库的一般流程是什么?包括数据的导入.操作.查询.展示,从而体会出与 ...

(六)play之yabe项目【验证码】

(六)play之yabe项目【验证码】相关推荐

最新文章

热门文章