`
hejun5918
  • 浏览: 2332 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

使用spring security 2.0 和extjs 3.0实现web登录

springspring securityextweb登录 
阅读更多

使用spring security 2.0 和extjs 3.0实现web登录

1开发环境说明

本例使用MyEclipse 6.5作为开发工具，jdk1.5作为编译工具，tomcat6.0作为web运行服务器。

2开发步骤

2.1搭建web项目

关于搭建web项目相关的文档网上有很多，在此略过。搭建成功后项目结构如下图



 

 

项目依赖的jar包如下图



 

 

2.2编辑登录页面

2.2.1 index.jsp源码

本项目中把index.jsp作为登录页面。代码如下：

 

<%@ taglib prefix='c' uri='http://java.sun.com/jstl/core_rt' %>

<%@ page import="org.springframework.security.ui.AbstractProcessingFilter" %>

<%@ page import="org.springframework.security.ui.webapp.AuthenticationProcessingFilter" %>

<%@ page import="org.springframework.security.AuthenticationException" %>

<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://"

           + request.getServerName() + ":" + request.getServerPort()

           + path + "/";

    String strLocale = request.getParameter("locale");  

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>Spring Security + ExtJS Login</title>

   

    <!-- Ext JS files -->

    <link rel="stylesheet" type="text/css" href="${ctx}/ext-3.0.0/resources/css/ext-all.css" />

    <script src="${ctx}/ext-3.0.0/adapter/ext/ext-base.js"></script>

    <script src="${ctx}/ext-3.0.0/ext-all.js"></script>

    <!-- login form -->

    <script src="${ctx}/js/login.js"></script>

   

  </head>

  <body>

  <br><br><br><br><br>

    <center>

    <div id="login"></div>

    </center>

  </body>

</html>
2.2.2 index.jsp源码说明

在Index.jsp文件中，代码“<link rel="stylesheet" type="text/css" href="${ctx}/ext-3.0.0/resources/css/ext-all.css" />”是引用extjs的样式。代码“<script src="${ctx}/ext-3.0.0/adapter/ext/ext-base.js"></script>”是加载extjs基本包。

代码“<script src="${ctx}/ext-3.0.0/ext-all.js"></script>”是加载extjs核心包。

代码“<script src="${ctx}/js/login.js"></script>”extjs登录表单。关于login.js的内容，将会在后面小节中介绍。

2.2.3 login.js源码

login.js文件中定义的就是extjs登录表单。代码如下：

 

Ext.onReady(function(){

    Ext.QuickTips.init();

    var login = new Ext.FormPanel({

       labelWidth:80,

       url:'j_spring_security_check',

       frame:true,

       title:'Please Login',

       defaultType:'textfield',

       width:300,

       height:150,

       monitorValid:true,

       items:[{

           fieldLabel:'Username',

           name:'j_username',

           allowBlank:false

       },{

           fieldLabel:'Password',

           name:'j_password',

           inputType:'password',

           allowBlank:false

       }],

       buttons:[{

           text:'Login',

           formBind: true,

           handler:function(){

           login.getForm().submit({

              method:'POST',

              success:function(){

              Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){

                  if (btn == 'ok'){

                     window.location = 'main.action';

                  }

              });

           },

           failure:function(form, action){

              if(action.failureType == 'server'){

                  obj = Ext.util.JSON.decode(action.response.responseText);

                  Ext.Msg.alert('Login Failed!', obj.errors.reason);

              }else{

                  Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);

              }

              login.getForm().reset();

           }

           });

       }

       }]

    });

    login.render('login');

});
2.2.4 index.js源码说明

在index.js中定义了一个login表单，url：'j_spring_security_check'对应spring security的登录验证地址。表单里放了两个输入域'j_username'、'j_password'，分别对应用户名和密码。表单中还有一个登录按钮'Login'，点击按钮提交到后台执行登录验证。验证成功跳转到'main.action'，验证失败则提示失败信息。'main.action'是在spring mvc中定义访问地址。具体见2.3节，配置spring mvc.

2.3配置spring mvc

本项目中的spring mvc用到2个文件，src目录下com.loiane.controller.MainController.java和WEB-INF目录下的spring-security-extjs-login-servlet.xml。

2.3.1 spring-security-extjs-login-servlet.xml源码

 

<?xml version="1.0" encoding="UTF-8"?>

 

<beans xmlns="http://www.springframework.org/schema/beans"

       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

       xsi:schemaLocation="http://www.springframework.org/schema/beans

       http://www.springframework.org/schema/beans/spring-beans-2.5.xsd">

 

    <bean name="/*.action" class="com.loiane.controller.MainController">

    </bean>

     

</beans>
2.3.2 spring-security-extjs-login-servlet.xml源码说明

spring-security-extjs-login-servlet.xml用于URL地址映射，把类似"/*.action"的请求地址映射到com.loiane.controller.MainController.java控制器类做进一步处理，文件中有一句代码：“<bean name="/*.action" class="com.loiane.controller.MainController"></bean>”。

2.3.3 com.loiane.controller.MainController.java源码

 

package com.loiane.controller;

 

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.springframework.web.servlet.ModelAndView;

import org.springframework.web.servlet.mvc.multiaction.MultiActionController;

 

public class MainController extends MultiActionController  {

         public ModelAndView main(HttpServletRequest request,

                            HttpServletResponse response) throws Exception {

                   return new ModelAndView("main.jsp");

         }

}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2.3.4 com.loiane.controller.MainController.java源码说明

com.loiane.controller.MainController.java继承

org.springframework.web.servlet.mvc.multiaction.MultiActionController.java类，跳转到main.jsp。

2.3.5 main.jsp源码

 

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

    pageEncoding="ISO-8859-1"%>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Spring Security + ExtJS Login</title>

</head>

<body>

<h1>You are successfully authenticated!</h1>

</body>

</html>

2.4配置spring security

本项目中的spring security用到2个文件，src目录下com.loiane.security.MyAuthenticationProcessingFilter.java和WEB-INF目录下的applicationContext-security.xml。

2.4.1 applicationContext-security.xml源码

 

<?xml version="1.0" encoding="UTF-8"?>

 <beans xmlns="http://www.springframework.org/schema/beans"

    xmlns:security="http://www.springframework.org/schema/security"

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.0.xsd

http://www.springframework.org/schema/security http://www.springframework.org/schema/security/spring-security-2.0.xsd">

    <security:global-method-security />

    <security:http auto-config="false" entry-point-ref="authenticationProcessingFilterEntryPoint">

       <security:intercept-url pattern="/index.jsp" filters="none" />

       <security:intercept-url pattern="/*.action" access="ROLE_USER" />

    </security:http>

    <bean id="authenticationProcessingFilter" class="com.loiane.security.MyAuthenticationProcessingFilter">

       <security:custom-filter position="AUTHENTICATION_PROCESSING_FILTER" />

       <property name="defaultTargetUrl" value="/main.html" />

       <property name="authenticationManager" ref="authenticationManager" />

    </bean>   

 

 

<security:authentication-manager alias="authenticationManager" />

 

    <bean id="authenticationProcessingFilterEntryPoint"

        class="org.springframework.security.ui.webapp.AuthenticationProcessingFilterEntryPoint">

       <property name="loginFormUrl" value="/index.jsp" />

       <property name="forceHttps" value="false" />

    </bean>

 

    <!--

    Usernames/Passwords are

        admin/111111

        dianne/111111

        scott/111111

        peter/111111

    These passwords are from spring security app example   

    -->

    <security:authentication-provider>

        <security:password-encoder hash="md5"/>

        <security:user-service>

            <security:user name=" admin " password="96e79218965eb72c92a549dd5a330112" authorities="ROLE_SUPERVISOR, ROLE_USER, ROLE_TELLER" />

            <security:user name="dianne" password="96e79218965eb72c92a549dd5a330112" authorities="ROLE_USER,ROLE_TELLER" />

            <security:user name="scott" password="96e79218965eb72c92a549dd5a330112" authorities="ROLE_USER" />

            <security:user name="peter" password="96e79218965eb72c92a549dd5a330112" authorities="ROLE_USER" />

        </security:user-service>

    </security:authentication-provider>

</beans>
2.4.2 applicationContext-security.xml源码说明

在applicationContext-security.xml文件中配置登录权限验证。

<security:http auto-config="false" entry-point-ref="authenticationProcessingFilterEntryPoint">

       <security:intercept-url pattern="/index.jsp" filters="none" />

       <security:intercept-url pattern="/*.action" access="ROLE_USER" />

    </security:http>

这段配置表示：我们要保护应用程序中的/*.action的URL，只有拥有ROLE_USER角色的用户才能访问。任何角色的用户都可以访问/index.jsp。你可以使用多个<intercept-url>元素为不同URL的集合定义不同的访问需求，它们会被归入一个有序队列中，每次取出最先匹配的一个元素使用。 所以你必须把期望使用的匹配条件放到最上边。entry-point-ref="authenticationProcessingFilterEntryPoint"表示定义一个权限验证的入口authenticationProcessingFilterEntryPoint。

 

<bean id="authenticationProcessingFilter" class="com.loiane.security.MyAuthenticationProcessingFilter">

       <security:custom-filter position="AUTHENTICATION_PROCESSING_FILTER" />

       <property name="defaultTargetUrl" value="/main.html" />

       <property name="authenticationManager" ref="authenticationManager" />

    </bean>

这段配置定义自定义权限处理过滤器com.loiane.security.MyAuthenticationProcessingFilter，defaultTargetUrl指定验证成功或失败后转向的页面，authenticationManager引用权限管理器。

 

<bean id="authenticationProcessingFilterEntryPoint"      class="org.springframework.security.ui.webapp.AuthenticationProcessingFilterEntryPoint">

       <property name="loginFormUrl" value="/index.jsp" />

       <property name="forceHttps" value="false" />

    </bean>

这段配置定义权限验证入口，指定登录页面为/index.jsp，不使用https协议。

 

<security:authentication-provider>

        <security:password-encoder hash="md5"/>

        <security:user-service>

            <security:user name="admin" password="96e79218965eb72c92a549dd5a330112" authorities="ROLE_SUPERVISOR, ROLE_USER, ROLE_TELLER" />

            <security:user name="dianne" password="96e79218965eb72c92a549dd5a330112" authorities="ROLE_USER,ROLE_TELLER" />

            <security:user name="scott" password="96e79218965eb72c92a549dd5a330112" authorities="ROLE_USER" />

            <security:user name="peter" password="96e79218965eb72c92a549dd5a330112" authorities="ROLE_USER" />

        </security:user-service>

    </security:authentication-provider>

</beans>

这段配置定义了4个用户，密码使用md5加密，admin密码为111111拥有ROLE_SUPERVISOR, ROLE_USER, ROLE_TELLER三个角色、dianne密码为111111拥有ROLE_USER,ROLE_TELLER两个角色、scott密码为111111拥有ROLE_USER角色、peter密码为111111拥有ROLE_USER角色。

2.4.3 com.loiane.security.MyAuthenticationProcessingFilter.java源码

 

 

package com.loiane.security;

 

import java.io.IOException;

import java.io.Writer;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpServletResponseWrapper;

import org.springframework.security.Authentication;

import org.springframework.security.AuthenticationException;

import org.springframework.security.ui.webapp.AuthenticationProcessingFilter;

 

public class MyAuthenticationProcessingFilter extends AuthenticationProcessingFilter {

         protected void onSuccessfulAuthentication(HttpServletRequest request,

                            HttpServletResponse response, Authentication authResult)

         throws IOException {

                   super.onSuccessfulAuthentication(request, response, authResult);

                   HttpServletResponseWrapper responseWrapper = new HttpServletResponseWrapper(response);

                   Writer out = responseWrapper.getWriter();

                   String targetUrl = determineTargetUrl( request );

                   out.write("{success:true, targetUrl : \'" + targetUrl + "\'}");

                   out.close();

         }

 

         protected void onUnsuccessfulAuthentication( HttpServletRequest request,

                            HttpServletResponse response, AuthenticationException failed )

         throws IOException {

                   HttpServletResponseWrapper responseWrapper = new HttpServletResponseWrapper(response);

                   Writer out = responseWrapper.getWriter();

                   out.write("{ success: false, errors: { reason: 'Login failed. Try again.' }}");

                out.close();

         }

}
2.4.4 com.loiane.security.MyAuthenticationProcessingFilter.java源码说明

com.loiane.security.MyAuthenticationProcessingFilter.java继承于

org.springframework.security.ui.webapp.AuthenticationProcessingFilter.java类，重写了

onSuccessfulAuthentication(HttpServletRequest request, HttpServletResponse response, Authentication authResult)和onUnsuccessfulAuthentication( HttpServletRequest request, HttpServletResponse response, AuthenticationException failed )方法。在onSuccessfulAuthentication()方法中返回验证成功后的跳转地址，在onUnsuccessfulAuthentication()方法中返回验证失败的信息。

2.5配置web.xml

2.5.1 web.xml源码

 

 

 

<?xml version="1.0" encoding="UTF-8"?>

<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

    <display-name>spring-security-extjs-login</display-name>

    <context-param>

       <param-name>contextConfigLocation</param-name>

       <param-value>

           /WEB-INF/spring-security-extjs-login-servlet.xml

           /WEB-INF/applicationContext-security.xml

       </param-value>

    </context-param>

    <filter>

        <filter-name>springSecurityFilterChain</filter-name>

<filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>

    </filter>

     <filter-mapping>

      <filter-name>springSecurityFilterChain</filter-name>

      <url-pattern>/*</url-pattern>

    </filter-mapping>

   

    <listener>     <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>

    </listener>

   

    <servlet>

    <servlet-name>spring-security-extjs-login</servlet-name>

    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

    <load-on-startup>1</load-on-startup>

  </servlet>

 

  <servlet-mapping>

    <servlet-name>spring-security-extjs-login</servlet-name>

    <url-pattern>*.action</url-pattern>

  </servlet-mapping>

 

  <welcome-file-list>

    <welcome-file>index.jsp</welcome-file>

  </welcome-file-list>

   

</web-app>

 

 

 

 

2.5.1 web.xml源码说明

<context-param>

       <param-name>contextConfigLocation</param-name>

       <param-value>

           /WEB-INF/spring-security-extjs-login-servlet.xml

           /WEB-INF/applicationContext-security.xml

       </param-value>

    </context-param>

    <filter>

这段代码配置spring使用的相关配置文件。/WEB-INF/spring-security-extjs-login-servlet.xml是关于spring mvc的相关配置。/WEB-INF/applicationContext-security.xml是关于登录权限验证相关的配置。

 

<filter>

        <filter-name>springSecurityFilterChain</filter-name>

<filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>

    </filter>

     <filter-mapping>

      <filter-name>springSecurityFilterChain</filter-name>

      <url-pattern>/*</url-pattern>

    </filter-mapping>

   

这段代码配置spring过滤链。处理所有URL地址。

 

<listener>     <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>

    </listener>

 

这段代码注册spring监听器。

 

<servlet>

    <servlet-name>spring-security-extjs-login</servlet-name>

    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

    <load-on-startup>1</load-on-startup>

  </servlet>

 

  <servlet-mapping>

    <servlet-name>spring-security-extjs-login</servlet-name>

    <url-pattern>*.action</url-pattern>

  </servlet-mapping>

 

这段代码注册spring mvc，处理*.action的请求。

 

 

 

 

 

 

2.6运行效果

登录页面



 

 

登录页面-验证成功提示



 

 

登录页面-验证成功后跳转到main.jsp页面



  

 

登录页面-验证失败提示



 

 

 

3参考文档

http://loianegroner.com/2010/02/integrating-spring-security-with-extjs-login-page/#comments

  • 大小: 25.2 KB
  • 大小: 31.9 KB
  • 大小: 12.3 KB
  • 大小: 15.5 KB
  • 大小: 16.2 KB
  • 大小: 12.2 KB
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    extJS3.0完整包

    extJS3.0 extJS3.0 extJS3.0 extJS3.0 extJS3.0 extJS3.0 extJS3.0

    ExtJS3.0中文API

    绝对的ExtJS3.0中文API,本人在网上找了好久才找到的,在此奉献给大家!!解压后有30多兆!!

    EXTJS3.0登陆DEMO

    EXTJS3.0登录DEMO是一个基于EXTJS框架的示例项目，展示了如何将EXTJS与STRUTS2、SPRING和IBATIS等流行Java技术整合，构建一个完整的Web应用程序。EXTJS是一个用于创建富客户端界面的JavaScript库，而STRUTS2、SPRING...

    ExtJS3.0 源码分析与开发实例宝典

    ExtJS3.0 源码分析与开发实例宝典

    extjs3.0开发包含示例api

    EXTJS 3.0是一款基于JavaScript的开源UI框架，它为Web应用提供了丰富的组件和功能。这个开发包包含了EXTJS 3.0的核心API、示例代码和源文件，是学习和开发EXTJS应用程序的重要资源。 一、EXTJS 3.0 API EXTJS 3.0的...

    ExtJSweb 开发指南中的 简单图书管理系统 ExtJS3.0+spring+hibernate+struts

    在本项目中，我们探讨的是一个基于Web的简单图书管理系统，该系统采用了经典的Java企业级开发框架：ExtJS 3.0、Spring、Hibernate以及Struts。这些技术的结合为开发高效、可维护的Web应用提供了强大的支持。下面将...

    extjs3.0 组件

    EXTJS 3.0 版本是其历史上的一个重要里程碑，提供了丰富的组件库和强大的功能，为开发人员提供了构建复杂Web界面的能力。在这个课程中，我们将深入探讨EXTJS 3.0 的核心组件，这些组件是构建用户界面的基础。 首先...

    Extjs3.0 常用组件介绍及怎么安装开发利器Spket

    6. **开始开发**: 现在你可以开始使用Spket的强大功能，如代码提示、自动完成、语法检查和调试，来提高你的ExtJS开发效率。 通过以上步骤，你可以充分利用Spket的特性，高效地进行ExtJS 3.0的开发工作。Spket的强大...

    Extjs3.0 中文API帮助文档

    Extjs3.0中文API文档 够详细 够详细 够详细

    spring security3+extjs4项目（含数据库文件）

    Spring Security 3 和 ExtJS 4 是两个在Web开发领域广泛应用的技术栈，它们结合可以构建出强大且安全的用户界面。下面将详细讲解这两个技术及其在项目中的应用。 Spring Security 是一个为Java应用程序提供安全服务...

    EXTJS3.0中文API (离线)

    EXTJS 3.0是该框架的一个重要版本，它提供了一系列先进的组件和功能，帮助开发者创建功能强大的Web应用。中文API手册是EXTJS开发者的重要参考资料，它使得不懂英语或者英语水平有限的开发者也能方便地学习和使用...

    extjs3.0 中扩展的日期控件

    由于extjs3.0自己封装的时间不能够选择时分秒，给大家开发带来了一些麻烦。虽然网上有ext2.0的日期扩展控件，但...公司现在项目正用了，因此我就对extjs3.0时间控件的扩展，实现了可选择时分秒功能。希望对大家有帮助。

    ExtJS3.0可视化开发工具

    总之，ExtJS 3.0可视化开发工具是Web开发中的利器，它结合了强大的ExtJS框架和直观的可视化设计，为开发者提供了便捷的开发环境，有助于快速构建高质量的Web应用程序。通过学习和掌握这类工具，开发者能够更加专注于...

    EXTJS3.0多文件上传组件

    在"EXTJS3.0多文件上传组件"中，我们主要关注的是如何利用EXTJS3.0的功能来实现一个高效的、用户友好的多文件上传功能。 首先，`swfupload.js`是Flash-Based的文件上传库，它允许用户在不离开当前页面的情况下进行...

    extjs3.0 API 中英

    7. **事件系统**：事件驱动是ExtJS的重要特性，所有组件都可以监听和响应事件，实现组件间的通信和联动。 8. **工具提示和提示框**：提供可自定义的工具提示（ToolTip）和提示框（ MessageBox），增强了用户体验。 ...

    ExtJS 3.0 API 文档离线包

    通过这个离线包中的“docs”文件，你可以深入研究ExtJS 3.0的每个类、方法和属性，掌握如何构建高效、交互性强的Web应用。无论你是初学者还是经验丰富的开发者，这个文档都将是你不可或缺的参考资料。

    ExtJs3.0和2.0中文API

    本压缩包包含了ExtJS 2.0和3.0两个版本的中文API文档，以及对应的中英文对照版CHM文件，对于深入理解和使用ExtJS具有极大的帮助。 在ExtJS 2.0中，核心特性包括： 1. **组件化开发**：ExtJS提供了大量的UI组件，如...

    extjs3.0部分插件代码

    总的来说，"extjs3.0部分插件代码"资料能够帮助我们深入理解ExtJS 3.0的组件体系，特别是Spinner插件的实现和应用。通过对这部分内容的学习，开发者可以更熟练地运用ExtJS构建功能丰富的Web应用，并提升用户界面的...

    extjs3.0框架

    在实际开发中，通过学习和掌握ExtJS 3.0框架，开发者可以快速搭建出功能完善的Web应用，同时，由于其强大的社区支持和丰富的扩展插件，可以应对各种复杂的业务需求。不过，需要注意的是，ExtJS 3.0已经相对老旧，...

    安装ExtJS3.0开发环境

    在网络上搜集，自己安装成功后在使用的开发环境。因ExtJS3.0和spket-1.6.18.jar的开发包太大不能上传，里面有安装说明和下载路径 ext-jsb2.zip jsb2是最新的。。请所需者取之

Magicbox
Global site tag (gtag.js) - Google Analytics