`
schy_hqh
  • 浏览: 558054 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

(六)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,也简单,保存验证码到缓存的时候,校验的时候做点手脚就行了!

  • 大小: 12.5 KB
  • 大小: 23.9 KB
  • 大小: 26 KB
  • 大小: 31 KB
  • 大小: 24.7 KB
  • 大小: 64.2 KB
分享到:
评论

相关推荐

    play framework测试项目

    "yabe"这个文件名可能是项目的简称或别名,具体含义可能需要查看项目源代码才能明确。通常,一个Play项目会包含以下主要目录结构: 1. `app`:包含所有应用程序代码,如控制器、模型、视图和服务。 2. `conf`:存储...

    新建play框架项目.pdf

    在本教程中,我们将深入理解如何使用Play框架创建一个完整的Web项目,以一个博客应用为例,名为Yabe(Yet Another Blog Engine)。 首先,确保你的计算机已经安装了Java 5或更高版本,因为Play框架依赖于Java环境。...

    yabe:另一个博客引擎-Curso Play 1.3.1

    综上所述,"yabe:另一个博客引擎 - Curso Play 1.3.1"涉及到使用Java语言和Play框架开发的一个博客引擎项目。通过学习这个课程或教程,开发者可以了解如何使用Play框架构建Web应用,并可能涉及数据库集成、模板引擎...

    play_入门学习手册

    在CMD中运行`play new yabe`,然后进入项目目录并执行`play run`启动项目。在浏览器输入`http://localhost:9000`,如果看到项目启动成功,说明配置完成。若要将项目转换为Eclipse项目,可以使用`play eclipsify`命令...

    play框架教程前6章

    创建一个新的Play应用,只需在命令行输入`play new yabe`,然后按照提示输入应用的全名,如"Yet Another Blog Engine"。这将生成一个名为yabe的目录,包含了标准的工程结构: 1. `App/`:包含应用程序的核心代码,...

    yabe:另一个博客引擎(Play Framework 1.3.x)

    矢部 另一个博客引擎(Play Framework 1.3.x)

    学习BACnet/IP协议所使用的Yabe和VTS工具

    同时,这两个工具也适用于实际项目中的设备调试和系统集成工作。安装文件"SetupYabe_v1.2.2.exe"是Yabe的安装程序,而"VTS_3.6.7.zip"则是VTS的压缩包,解压后即可运行。 总的来说,熟悉并掌握Yabe和VTS的使用,...

    yabe:另一个后端库

    yabe:另一个后端库

    Play框架7版本教程-数据模型的首次迭代.doc

    User类应该位于`/yabe/app/models/User.java`,并使用`@Entity`注解来声明这是一个JPA实体。`@Entity`告诉JPA框架这个类应该被当作数据库表来处理。此外,User类扩展了`play.db.jpa.Model`类,这个类提供了一些辅助...

    SetupYabe_v1.1.9.exe

    Currently supports both BACnet IPv4, IPv6 + BACnet MSTP + BACnet PTP + BACnet Ethernet. Basic functions for read, write, read multiple, write multiple, iam, whois, subscribeCOV, notify, WriteFile, ...

    Yet Another Bacnet Explorer:Yabe-BACnet设备的图形资源管理器程序-C#代码-开源

    用C#编写的图形化资源管理器程序,用于浏览BACnet设备(在Windows和Linux上运行)。 当前同时支持BACnet IPv4,IPv6 + BACnet MSTP + BACnet PTP + BACnet以太网。 用于读取,写入,读取多个,写入多个,iam,whois...

    yabe_sql:剧本1.3.x教程紧随其后

    "yabe_sql" 可能是一个开源项目或工具的名字,而 "剧本1.3.x教程" 指的是该项目或工具的1.3.x版本的相关教学材料。"紧随其后" 暗示这是一个系列教程中的一个后续部分,可能是对之前版本的更新或者扩展。 【描述分析...

    hal库生成基础代码,然后添BACnet mtsp部分,已经成功和电脑BACnet模拟软件Yabe通讯成功

    软件平台:stm32cubemx keil5 使用hal库生成基础代码,然后添BACnet mtsp部分,已经成功和电脑BACnet模拟软件Yabe通讯成功。 硬件平台:基于正点原子stm32f407探索者开发板硬件。

    yabe-online-mall.github.io

    "矢部网上商城"是一个基于GitHub Pages部署的在线商城项目,其源代码托管在"yabe-online-mall.github.io"的仓库中。这个项目主要利用HTML(HyperText Markup Language)来构建网页结构,展示了如何使用基本的Web技术...

    BACnet常用的开发工具,包括点位扫描工具,主站模拟工具以及抓包分析工具

    一些常用的BACnet点位扫描工具包括Yabe,BACnetscan 等。 BACnet主站模拟工具:主站模拟工具用于模拟BACnet主站的功能,以便测试和验证设备的响应和行为。它们允许开发人员发送和接收BACnet命令和数据,并模拟不同的...

    BACnet设备Socket UDP通信源码

    通过理解和研究这个源码,开发者可以更好地了解如何在实际项目中实现BACnet设备之间的通信,提高楼宇自动化的互操作性和效率。然而,由于BACnet协议的复杂性,初学者可能需要花费一定时间来熟悉其细节。希望这个源码...

    BacNet协议应用软件

    "yetanotherbacnetexplorer-code-282-trunk"可能表示的是YABE项目的某个版本或分支。"code-282"可能是一个版本号,而"trunk"通常指的是主分支,意味着这是项目的主线开发代码。解压这个文件后,开发者将能看到源代码...

    YABE - Yet Another Bookmarks Extension-crx插件

    语言:English 更好的书签popup 功能: 1.左键单击在新选项卡中打开书签。 2.中间单击或“Ctrl”单击单击“在”新建后台“选项卡中打开书签。 3.... 4.... 5.... v1.2.1 - 节点删除后还原滚动位置。 v1.2.0....

Global site tag (gtag.js) - Google Analytics