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

时间  2019-11-17
标签 play yabe 项目 验证码 繁體版
原文   原文链接

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

博客分类：
 

添加验证码功能html

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

Java代码   收藏代码
  1. /** 
  2.  * 添加验证码 
  3.  */  
  4. public static void captcha(String id) {  
  5.     //Images.Captcha继承了InputStream，具有流的功能  
  6.     Images.Captcha captcha = Images.captcha();  
  7.     //向客户端输出流  
  8.     renderBinary(captcha);  
  9. }  

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

 

Html代码   收藏代码
  1. GET     /captcha            Application.captcha  

 

 

访问http://localhost:9000/captcha，便可显示验证码，每次刷新都显示不一样的验证码安全



 

 

 

服务端与客户端如何处理验证码cookie

验证码生成了，服务端如何对其进行校验呢？session

首先，play是一个无状态的框架，它不会去维护每一个客户端的session状态框架

session以cookie形式存储的，可是cookie未加密，在客户端可以获取到captcha，不安全dom

说一千道一万，要验证都须要对客户端显示的验证码进行跟踪才能实现，否则丢了关联如何验证？！post

 

解决办法：ui

在服务端使用缓存来保存验证码，为其生成一个ID，将此ID传到客户端

再由客户端显示验证码时传回服务端，服务端拿到ID后保存验证码

同时，客户端的form中增长一个hidden来保存ID

当提交表单时，经过这个ID就能找到当时生成的验证码，继而验证

 

集群环境下，这个缓存中的验证码怎么处理呢？

Server A 处理请求，生成验证码，同时保存ID，返回验证码

提交表单时，请求被分配给Server B 进行处理，Server B 的缓存里没有这个ID啊，怎么办？

 

共享缓存，好比，使用Redis做为几个Server共用的一个大缓存

 

改造Application的captcha()，将验证码captcha放到缓存中 

Java代码   收藏代码
  1. /** 
  2.  * 添加验证码 
  3.  * @param id 服务端缓存中存放的验证码的id(一个uuid) 
  4.  */  
  5. public static void captcha(String id) {  
  6.     //Images.Captcha继承了InputStream，具有流的功能  
  7.     Images.Captcha captcha = Images.captcha();  
  8.       
  9.     //为验证码指定颜色并返回验证码  
  10.     String code = captcha.getText("#E4EAFD");  
  11.       
  12.     //放到缓存中,缓存有效期10mn  mn分钟?  
  13.     Cache.set(id, code, "10mn");  
  14.       
  15.     //向客户端输出流  
  16.     renderBinary(captcha);  
  17. }  

 

在显示评论的窗体时，生成一个惟一的ID，返回到客户端的页面中

Java代码   收藏代码
  1. /** 
  2.  * 显示详细的博文评论 
  3.  */  
  4. public static void show(Long id) {  
  5.     Post post = Post.findById(id);  
  6.     //生成一个惟一的ID，做为服务端保存验证码时的key  
  7.     String randomID = Codec.UUID();   
  8.     render(post, randomID);  
  9. }  

 

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

Html代码   收藏代码
  1. <!-- 显示一个表单，用户能够添加评论 -->  
  2. <h3>Post a comment</h3>  
  3. #{form @Application.postComment(post.id)}  
  4.       
  5.     <!-- 在这里显示提交评论时出现的错误 -->  
  6.     #{ifErrors}  
  7.         <p class="error">All fields are required!</p>  
  8.     #{/ifErrors}  
  9.       
  10.     <p>  
  11.         <label for="author">Your name:</label>  
  12.         <input type="text" name="author" id="author"/>  
  13.     </p>  
  14.     <p>  
  15.         <label for="content">Your comment:</label>  
  16.         <textarea name="content" id="content"></textarea>  
  17.     </p>  
  18.       
  19.     <!-- 验证码 -->  
  20.     <p>  
  21.         <label for="code">Please type the code below:</label>  
  22.         <img alt="captcha" src="@{Application.captcha(randomID)}">  
  23.         <br/>  
  24.         <input type="text" name="code" id="code" size="18" value=""/>  
  25.         <input type="hidden" name="id" value="${randomID}">  
  26.     </p>  
  27.       
  28.     <p>  
  29.         <input type="submit" value="submit your comment"/>          
  30.     </p>  
  31. #{/form}  

 

刷新页面，点击博文添加评论



 

 

 

服务端对验证码进行校验

客户端已经经过隐藏域保存了验证码的ID，提交表单后，服务端的postComment()接收到ID后就能进行验证操做了！

让postComment()接收ID并从缓存中取出验证码，进行校验

此外，具体指定了@Required标明的字段为空时，对应的提示信息

Java代码   收藏代码
  1. /** 
  2.     * 添加评论 
  3.     * 使用@Required注解，检测author和content参数不能为空 
  4.     *  
  5.     * @param code 客户端输入的验证码 
  6.     * @param randomID 服务端保存验证码时用的ID 
  7.     */  
  8.    public static void postComment(  
  9.                             Long postId,   
  10.                             @Required(message="Author is required") String author,   
  11.                             @Required(message="A comment is required") String content,  
  12.                             @Required(message="Please type the code below") String code,  
  13.                             String randomID) {  
  14.       
  15.     Post post = Post.findById(postId);  
  16.       
  17.     //验证码校验，若是equals()返回false,则message()中的信息将传递到客户端  
  18.     validation.equals(code, Cache.get(randomID)  
  19.             ).message("Invalid code,Please type it again!");  
  20.       
  21.     //错误检测  
  22.     if(validation.hasErrors()) {  
  23.         //将post对象从新传入模板中，不然新打开的show.html中的post为null！！！  
  24.         render("Application/show.html",post);  
  25.     }  
  26.     //保存评论信息  
  27.     post.addComment(author, content);  
  28.       
  29.     //设置提交成功后的提示信息到flash做用域  
  30.     flash.success("Thanks for posting %s", author);  
  31.       
  32.     //从新显示该篇博文即其评论  
  33.     show(postId);  
  34.    }  

 

修改show.html模板，若是验证失败，则显示验证失败的提示信息

Html代码   收藏代码
  1. <!-- 显示一个表单，用户能够添加评论 -->  
  2. <h3>Post a comment</h3>  
  3. #{form @Application.postComment(post.id)}  
  4.       
  5.     <!--   
  6.         这里显示提交评论时出现的错误  
  7.         因为postComment()中已经使用@Required(message="xxx")声明了错误提示信息  
  8.         因此，这里只须要显示第一个错误便可！  
  9.     -->  
  10.     #{ifErrors}  
  11.         <p class="error">${errors[0]}</p>  
  12.     #{/ifErrors}  
  13.       
  14.     <p>  
  15.         <label for="author">Your name:</label>  
  16.         <input type="text" name="author" id="author"/>  
  17.     </p>  
  18.     <p>  
  19.         <label for="content">Your comment:</label>  
  20.         <textarea name="content" id="content"></textarea>  
  21.     </p>  
  22.       
  23.     <!-- 验证码 -->  
  24.     <p>  
  25.         <label for="code">Please type the code below:</label>  
  26.         <img alt="captcha" src="@{Application.captcha(randomID)}">  
  27.         <br/>  
  28.         <input type="text" name="code" id="code" size="18" value=""/>  
  29.         <input type="hidden" name="id" value="${randomID}">  
  30.     </p>  
  31.       
  32.     <p>  
  33.         <input type="submit" value="submit your comment"/>          
  34.     </p>  
  35. #{/form}  

 

 验证错误的状况下，为了保持客户端输入的评论内容，在action中重传客户端输入的内容

修改Application.postComment()，这里有不少须要注意的地方！！！

Java代码   收藏代码
  1. /** 
  2.      * 添加评论 
  3.      * 使用@Required注解，检测author和content参数不能为空 
  4.      *  
  5.      * @param code 客户端输入的验证码 
  6.      * @param randomID 服务端保存验证码时用的ID 
  7.      */  
  8.     public static void postComment(  
  9.                                 Long postId,   
  10.                                 String author,   
  11.                                 @Required(message="A comment is required") String content,  
  12.                                 @Required(message="Please type the code below") String code,  
  13.                                 String randomID) {  
  14.           
  15.         System.out.println("Application.postComment()");  
  16.         Post post = Post.findById(postId);  
  17.           
  18.         //验证码校验，若是equals()返回false,则message()中的信息将传递到客户端  
  19.         Logger.info("提交评论，randomID="+randomID);  
  20.         Logger.info("提交评论，验证码="+code);  
  21.         validation.equals(code, Cache.get(randomID)  
  22.                 ).message("Invalid code,Please type it again!");  
  23.           
  24.         //错误检测  
  25.         if(validation.hasErrors()) {  
  26.             /** 
  27.              * 将post对象从新传入模板中，不然新打开的show.html中的post为null！！！ 
  28.              * 若是出现错误，则将客户端输入的评论内容从新返回到客户端进行回显。 
  29.              * 必须将randomID从新传回到客户端，否则客户端的然的randomID将取不到值 
  30.              * 最后致使提价评论后，验证码的ID为空，没法进行验证码的校验操做--老是校验错误，这里很关键！ 
  31.              * 并且，这里render("Application/show.html")直接调用模板，不会再调用show()进行验证码ID的生成 
  32.              * 因此，一个客户端在未验证成功以前，都将使用这个ID做为服务端缓存的key进行存储 
  33.             */  
  34.             render("Application/show.html",post,randomID,author,content);  
  35.         }  
  36.         //保存评论信息  
  37.         post.addComment(author, content);  
  38.           
  39.         //设置提交成功后的提示信息到flash做用域  
  40.         flash.success("Thanks for posting %s", author);  
  41.           
  42.         //清除指定验证码的缓存  
  43.         Cache.delete(randomID);  
  44.           
  45.         //从新显示该篇博文即其评论  
  46.         show(postId);  
  47.     }  

 

 

 在show.html中，为评论的2个输入域增长value属性，用来显示回显的内容

Html代码   收藏代码
  1. <p>  
  2.     <label for="author">Your name:</label>  
  3.     <!-- ${author}：回填数据 -->  
  4.     <input type="text" name="author" id="author" value="${author}"/>  
  5. </p>  
  6. <p>  
  7.     <label for="content">Your comment:</label>  
  8.     <!-- ${content}：回填数据 -->  
  9.     <textarea name="content" id="content">${content}</textarea>  
  10. </p>  

 

刷新页面，从新评论



 

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



 

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



 

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

 

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

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程