登录验证的简单实现

   
    登录界面的设计比较特别，因为按正规程序来走界面是设计出来的，但我无意中在网上找到了上面这张很酷的图 片，找到了之后很想用它，便自己给它实现了一下，所以严格来说这个登录界面不是设计出来的，而是我用一些特别的手段做出来的，而且登录的验证也是很简单的。当然这是我个人的喜好，真正的项目是不可以这样做的，你会发现有很多显示的问题，而且验证也不是这么来走，一般都是采用数据库来实现。

    这里我把图片设置为背景图片插入，然后在这个图片的“用户”后面那个小方框那里放上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（显示）