添加验证码功能
在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,也简单,保存验证码到缓存的时候,校验的时候做点手脚就行了!