Skip to content
  • Home
  • About
Search
Close

CoreDump

A Developer Notes

Tag: Spring Security

Integrating Sencha Touch Login Form with Spring Security

July 16, 2011 Wongso35 Comments

Previously, I wrote a tutorial on integrating Spring Security and ExtJS login form. Now I am integrating the same Spring Security code with the Sencha Touch login form. Here I will cover the implementation of the form only and 2 use cases; login & logout. The sample code is based on Sencha Touch 1.1.0 and the foloder structure is following the Sencha Touch MVC.

Login
Login – Error
Login – Success

First, lets see the login form and controller. The form has 2 fields, login id & password. When you click the login button, the form is submitted to http://<ownurl>/j_spring_security_check (the defLoginUrl in line 4 is defined in login.jsp).

 Just a note, if you are using Sencha Touch 1.0 then you will need to implement a listener within the form to catch the “submit” and “exception” event. This is because there is a minor defect in the Ext.form.FormPanel submit function and it caused the form to ignore “success” & “failure” function in the submit.

test.views.LoginForm = Ext.extend(Ext.form.FormPanel, {
   scroll: 'vertical',
   fullscreen: true,
   url: defLoginUrl,
   items: [{
      xtype: 'textfield',
      label: 'Login',
      name: 'j_username'
   },{
      xtype: 'passwordfield',
      label: 'Password',
      name: 'j_password'
   }],
   dockedItems: [{
      xtype: 'toolbar',
      dock: 'bottom',
      items: [{
         text: 'Reset',
         handler: function() {
            test.views.loginForm.reset();
         }
      },{
         text: 'Login',
         ui: 'confirm',
            handler: function() {
               Ext.dispatch({
                  controller: test.controllers.loginController,
                  action: 'submit',
                  data: test.views.loginForm
               });
             }
      }]
   }],
   initComponent: function() {
      test.views.LoginForm.superclass.initComponent.apply(this, arguments);
   }
});

 

test.controllers.loginController = new Ext.Controller({
   submit: function(options) {
      var theForm = options.data;
      test.views.loginForm.submit({
         method: 'POST',
         waitMsg: {
            message: 'Processing',
            cls : 'demos-loading'
         },
         scope: this,
         success: function(form, response) {
            window.location = '/';
         },
         failure: function(form, response) {
            Ext.Msg.alert('Warning', response.errorMessage);
         }
      });
   }
});

Depending on the result of the authentication the server side will return a JSON data. The format is

{"username":null,"errorMessage":"Login failed. Try again.","loggedIn":false,"success":false}

Once authenticated, you will see the main page with a logout button. The code is shown below.

test.views.Dashboard = Ext.extend(Ext.Panel, {
   fullscreen: true,
   dockedItems: [{
      xtype: 'toolbar',
      title: 'Dashboard',
      dock: 'top',
      items: [{
         xtype: 'button',
         text: 'Logout',
         ui: 'confirm',
         handler: function() {
            Ext.dispatch({
               controller: test.controllers.dashboardController,
               action: 'logout'
            });
         },
         scope: this
      }]
   }],
   html: '<p>Welcome!</p>',
   initComponent: function() {
      test.views.Dashboard.superclass.initComponent.apply(this, arguments);
   }
});

 

test.controllers.dashboardController = new Ext.Controller({
   logout: function(options) {
      window.location = '/j_spring_security_logout';
   }
});

Hope that is useful. Happy coding!

view demo – download source 

References:

  • Customizing Spring Security Login using ExtJS
  • Sencha Touch MVC Application – Part 2
  • RSS - Posts
  • RSS - Comments

Recent Posts

  • Docker Swarm Sample
  • The Future of Software Engineering
  • Agile Architecture
  • Successful IT Systems Demand Serious IT Governance
  • Deploying Grails Application to CloudFoundry
  • Customizing Spring Security Login using ExtJS in Grails Apps
  • Integrating Sencha Touch Login Form with Spring Security
  • Custom Number Formatting in Flex.

Archives

  • April 2018
  • June 2015
  • May 2015
  • October 2013
  • July 2011
  • June 2011
  • March 2011
  • February 2011
  • September 2010
  • August 2010
  • July 2010
  • March 2010
  • December 2009
  • November 2009

Twitter Updates

  • RT @nthonyChu: Did you know you can run Azure #CloudShell ☁️ as a tab in @MicrosoftTeams? https://t.co/pOTP5fBdMy 1 week ago
  • RT @TIME: ⚡️ “Best Inventions of 2019” twitter.com/i/moments/1197… 2 weeks ago
  • RT @github: Introducing GitHub for mobile. Review lines of code, chime in on a design discussion, merge changes, and more. GitHub for mob… 3 weeks ago
  • RT @ZonePhysics: Nature is the best Designer 😍 https://t.co/dZzAyp3pXF 4 weeks ago
  • RT @ZonePhysics: This is your eye under microscope. https://t.co/VCZemYRChN 4 weeks ago
December 2019
M T W T F S S
« Apr    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Pages

  • About

Blogroll

  • WordPress.org
  • MSFT Bot Framework
  • Google Maps JavaScript API V3
  • Virtual Red Dot
  • WordPress.com
  • FlipMag – AI & Automation

GitHub

  • My GitHub Repo
Blog at WordPress.com.
Back to top
Cancel
Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy