登录验证的简单实现

[img]http://wuxun1997.iteye.com/upload/picture/pic/42727/8948e8b6-7a46-31c2-bd4b-5a8b9838aa03.jpg[/img]
登录界面的设计比较特别,因为按正规程序来走界面是设计出来的,但我无意中在网上找到了上面这张很酷的图 片,找到了之后很想用它,便自己给它实现了一下,所以严格来说这个登录界面不是设计出来的,而是我用一些特别的手段做出来的,而且登录的验证也是很简单的。当然这是我个人的喜好,真正的项目是不可以这样做的,你会发现有很多显示的问题,而且验证也不是这么来走,一般都是采用数据库来实现。

这里我把图片设置为背景图片插入,然后在这个图片的“用户”后面那个小方框那里放上input控件,这样就覆盖了原来的用户输入框,用同样的方法搞定密码输入框和登录按钮。当然这里需要耐心去调input控件的坐标。登录按钮也可以采用该图片的usemap属性来定位,通过map的area属性把原来图片的登录按钮设置成图片热区,再用js把超链接设置成一个提交按钮,不过通过这种方式提交的话按回车键是没有用的,只能用鼠标点,这一点很让人不爽,所以还是建议用input覆盖吧。

接下来的关键问题是怎么进行登录验证?这里不是利用数据库来验证,而是采用了一种比较简单却实现起来不那么顺利的验证:Tomcat安全验证,即把登录Tomcat时的用户名和密码验证搬到了这个登录界面来了。具体怎么做呢?很简单,只要找到Tomcat的conf文件夹下的tomcat-users.xml文件,并修改里面的相关配置就可以,比如:

<?xml version='1.0' encoding='utf-8'?>
<tomcat-users>
<role rolename="admin"/>
<role rolename="tomcat"/>
<role rolename="role5"/>
<user username="jimmy" password="123456" roles="role5"/>
<user username="tomcat" password="tomcat" roles="tomcat"/>
<user username="admin" password="123456" roles="admin"/>
</tomcat-users>

然后在工程的web.xml最后面加上登录配置,这一段配置的格式是固定的,不能改:

<login-config>
<auth-method>FORM</auth-method>
<form-login-config>
<form-login-page>/WEB-INF/views/login.jsp</form-login-page>
<form-error-page>/WEB-INF/views/error.jsp</form-error-page>
</form-login-config>
</login-config>

最后设置login.jsp的表单提交的目标地址,以及用户名和密码的input控件上的名字,都必须按规定来:

<form method="POST" action="/j_security_check">

<input type="text" name="j_username">
<input type="text" name="j_password">

按照常规是这样走,但这时问题来了,点击登录按钮提交表单后它链接到了一个404页面去,提示找不到 /j_security_check这个地址。原因是约束没配,要在web.xml加入资源约束:

<security-constraint>
<web-resource-collection>
<web-resource-name>Protected Area</web-resource-name>
<url-pattern>/resources/*</url-pattern>
<url-pattern>/dic/*</url-pattern>
<url-pattern>/fee/*</url-pattern>
<url-pattern>/register/*</url-pattern>
<url-pattern>/index.jsp</url-pattern>
</web-resource-collection>

<auth-constraint>
<role-name>admin</role-name>
<role-name>role5</role-name>
</auth-constraint>
</security-constraint>

<security-role>
<role-name>role5</role-name>
</security-role>

<security-role>
<role-name>admin</role-name>
</security-role>

404没了,但400却跑出来了,原来使用tomcat的这个安全验证首先必须要先访问一个页面,再使用这个登录机制它才会跳到原来这个页面,比如:首先访问 index.jsp,然后再访问login.jps,这个登录页面在登录成功后才会到index.jsp去,要不然就会有这个错误。也就是说,如果要利用 tomcat来实现验证,可以这样来走:先试着冲进门里面(index.jsp)去,冲不进去后再敲门(login.jsp),得到主人的许可后(验证成功)这一次才能名正言顺的进门,要不然它就不知道该去哪里了(400页面)。

问题是如果我们先进入index.jsp那么我们还要验证干吗?解决方法其实也很简单,利用tomcat自己的机制,把login.jsp放进WEB-INF里面去,因为tomcat不允许直接访问WEB-INF文件夹里面的文件,所以我们首先不会去login.jsp,也就是说会先去访问index页面,因为在tomcat的配置文件里最后面有这样一段话:

<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>

它把index页面当成了默认的加载页面,那么我们一进入tomcat它就自己把我们带到了index.jsp,相当于我们去冲门了,但是,很重要的一点是,在上面我们已经把index页面放进一个约束里面了,把它关联到登录页面,也就是所在每次访问index.jsp之前必须先访问login.jps,也就是把index.jsp保护起来了,这时它自然会再退出来敲门,而冲门这个动作是瞬间发生的,我们根本无法用肉眼看见,这样就把第一次访问index.jsp隐藏起来了,所以当显示login.jsp来到在我们面前时,index.jsp已经飘然的离开了。

登录流程:index.jsp(默认页面,不显示,被隐藏) -> login.jsp(登录成功) -> index.jsp(显示)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值