PDA

View Full Version : login form



bee
26 Nov 2011, 2:12 AM
HI Guys,

Did anyone try security login page using j_security_check. I am using extjs 4. please send me some sample code or any plugin available I ve seen one plugin, but written in extjs 2, it is getting horrible while converting in ext4

Jan (HL)
26 Nov 2011, 11:28 AM
Ehm, well. I assume that you are using Spring Security? You didn't say that.

So, let's say you are using Spring Security: What is the problem? If you have already use Ext JS 2 which is at least more than 2-3 years old.. than you should have the skills to understand both architectures of Javascript and Spring Framework. Sorry, hard but fair.

(Additionally, in Spring Security, you can change the login entry point to whatever you want, e.g. /app/login.json or something else. Nobody has to to use "j_security_check" as a token. Nobody (user) should even "know" that someone (developer) has used Spring in the backend.)

So, what do you want? If you want to seperated pages (login.html, index.html), this is standard Spring Security way and has nothing to do with Ext JS.

If you want to integrate the login within the actual Ext JS application (say make a "login popup")you have to provide an entry point with ajax. That's it.

Anyway, the login process should always redirect to a special, custom so called "login-result" controller which will nothing else than returning {sucess:true} for a valid session and {success:false} for an invalid one. Just perform a standard Ajax call with the form data of the login form's fields and use the callbacks success and failure. No magic. ;)

bee
26 Nov 2011, 10:08 PM
Ehm, well. I assume that you are using Spring Security? You didn't say that.

So, let's say you are using Spring Security: What is the problem? If you have already use Ext JS 2 which is at least more than 2-3 years old.. than you should have the skills to understand both architectures of Javascript and Spring Framework. Sorry, hard but fair.

(Additionally, in Spring Security, you can change the login entry point to whatever you want, e.g. /app/login.json or something else. Nobody has to to use "j_security_check" as a token. Nobody (user) should even "know" that someone (developer) has used Spring in the backend.)

So, what do you want? If you want to seperated pages (login.html, index.html), this is standard Spring Security way and has nothing to do with Ext JS.

If you want to integrate the login within the actual Ext JS application (say make a "login popup")you have to provide an entry point with ajax. That's it.

Anyway, the login process should always redirect to a special, custom so called "login-result" controller which will nothing else than returning {sucess:true} for a valid session and {success:false} for an invalid one. Just perform a standard Ajax call with the form data of the login form's fields and use the callbacks success and failure. No magic. ;)

Aha! Jan your guess was right. I want to use j_security_check in extjs url config. I am not using java-spring framework. Just simple one extjs login form , where I have username.password,login button and reset button. So when I click login button. I am calling function as below



{ text:'Login',
formBind: true,
handler:function(){
this.up('form').getForm().submit({
method:'POST',
url :'/login/j_security_check',
success:function(){
Ext.Msg.alert('Status', 'Login Successful!' /*, function(btn, text){
if (btn == 'ok'){
var redirect = '/app/index.html';
window.location = redirect;
}
}*/);
}
});
}
The commented code on butoon ok click is not working so commented .
When I click it ,in network it works fine and even if i give wrong password, i get in net work as invalid password, but I am not able to go further to call my main application. As per my knowledge , it must call implicitely.

I tried with ajax , it didnt work thats why I was asking in forum.If you have any sample small example can you please attach here?

And i did start from ext2, but I am not confident to convert ext2 to 4. So I left that idea behind, looking for new idea. Could you please see my submit function and let me know where I am wrong ?

Jan (HL)
27 Nov 2011, 5:14 AM
Oh, wow. I'm wonder if your application is very small. Because you *should* make your component configuration more separated from each other.

Untestet, but should work.


var win = Ext.create('Ext.window.Window', {
sucessfulLoginLocation : '/app/index.html',
items: [{
xtype : 'button',
text: 'Login',
handler: function(btn) {
this.up('form').getForm().submit({
method: 'POST',
url: '/login/j_security_check',
success: function(response) {
var data = Ext.JSON.decode(response.responseText, true);
if (data && data.success) {
this.up('window').onSuccessfulLogin();
}
}
});
}
}],
onSuccessfulLogin : function() {
window.location = this.sucessfulLoginLocation;
}
});


That's actually Ext JS 4 (some parts).

bee
27 Nov 2011, 2:36 PM
This is what I am getting response back from ur code and even when I started coding I was getting same. thats why i needed some sort of plugin which will take of json request.



Uncaught Ext.Error: You're trying to decode an invalid JSON String: <html lang="en-us" xmlns="http://www.w3.org/1999/xhtml" xmlns:htmldb="http://htmldb.oracle.com" xmlns:apex="http://apex.oracle.com"><head><title>Application Express Login</title><link rel="icon" href="/i/favicon.ico" type="image/x-icon"><link rel="shortcut icon" href="/i/favicon.ico" type="image/x-icon"><script src="/i/javascript/apex_ns_3_1.js" type="text/javascript"></script><script src="/i/javascript/apex_3_1.js" type="text/javascript"></script><script src="/i/javascript/apex_get_3_1.js" type="text/javascript"></script><script src="/i/javascript/apex_builder.js" type="text/javascript"></script><script type="text/javascript"><!--/*Global JS Variables*/var htmldb_Img_Dir = "/i/";//--></script><link rel="stylesheet" href="/i/css/apex_3_1.css" type="text/css" /><!--[if IE]><link rel="stylesheet" href="/i/css/apex_ie_3_1.css" type="text/css" /><![endif]--><style type="text/css"> /* Set for same widht in IE and FF*/ #F4550_P11_PASSWORD,#F4550_P11_USERNAME,#F4550_P11_COMPANY{width:200px;}.htmldbLoginTop{margin:0 0 10px 0;} .htmldbLoginTop th {background-color:#aaaaaa;} .htmldbLoginTop th.L{background-repeat : no-repeat;background-image:url(/i/htmldb/builder/left_curve.gif);width:10px;vertical-align:top;background-position : top left;} .htmldbLoginTop th.C{text-align:center;font-weight:bold;font-size:14px;color:#ffffff} .htmldbLoginTop th.R{background-repeat : no-repeat;background-image:url(/i/htmldb/builder/right_curve.gif);width:10px;vertical-align:top;background-position : top right;} .htmldbLoginBottom{margin:0 0 10px 0;} .htmldbLoginBottom th {background-color:#eeeeee;} .htmldbLoginBottom th.LF{background-repeat : no-repeat;;width:10px;vertical-align:top;background-position : top left;} .htmldbLoginBottom th.CF{text-align:center;font-weight:bold;font-size:12px;color:#ffffff}.htmldbLoginBottom th.RF{background-repeat:no-repeat;width:10px;vertical-align:top;background-position: top right;}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="/i/css/apex_builder_3_1.css" type="text/css" /><!--[if IE]><link rel="stylesheet" href="/i/css/apex_builder_ie_3_1.css" type="text/css" /><![endif]--></head><body ><noscript></noscript><form action="wwv_flow.accept" method="post" name="wwv_flow" id="wwvFlowForm" autocomplete="off"> <input type="hidden" name="p_flow_id" value="4550" id="pFlowId" /> <input type="hidden" name="p_flow_step_id" value="1" id="pFlowStepId" /> <input type="hidden" name="p_instance" value="2230359300632227" id="pInstance" /> <input type="hidden" name="p_page_submission_id" value="2384063711741772" id="pPageSubmissionId" /> <input type="hidden" name="p_request" value="" id="pRequest" /><a name="PAGETOP"></a><div id="htmldbLogo2"><img src="/i/htmldb/apex_logo.gif" width="300" height="30" alt="Application Express" /></div><div class="htmldbSep"><br/></div><div id="htmldbBreadcrumbTop"><br /></div><div class="htmldbBreadcrumbRegion"><br /></div><a name="SkipRepNav"></a><div id="htmldbMessageHolder"></div><div class="htmldbBodyMargin"><table summary="" cellpadding="0" cellspacing="0" border="0" height="70%"><tr><td valign="top"></td><td class="htmldbColumnSep"><div class="htmldbColumnSep"><br /></div></td><td valign="top"><div class="htmldbInstruct600" id="R138313119334276541"></div><table cellspacing="0" cellpadding="0" border="0" class="htmldbLoginTop" summary="" id="R30251320176465048"><tr><th class="L"><br /></th><th class="C">Login</th><th class="R"><br /></th></tr><tr><td colspan="3" style="font-size:12px;padding:6px;">Enter Application Express workspace and credentials. <br /><br /><table id="apex_layout_30251320176465048" class="formlayout" summary="" ><tr><td nowrap="nowrap" align="right"><label for="F4550_P1_COMPANY"><a class="htmldbLabelOptional" href="javascript:popupFieldHelp('30250621039456935','2230359300632227','Close')" tabindex="999">Workspace</a></label></td><td colspan="1" rowspan="1" align="left"><input type="hidden" name="p_arg_names" value="30250621039456935" /><input type="text" name="p_t01" size="40" maxlength="2000" value="" id="F4550_P1_COMPANY" tabindex="1" /></td></tr><tr><td nowrap="nowrap" align="right"><label for="F4550_P1_USERNAME"><a class="htmldbLabelOptional" href="javascript:popupFieldHelp('30251012844458645','2230359300632227','Close')" tabindex="999">Username</a></label></td><td colspan="1" rowspan="1" align="left"><input type="hidden" name="p_arg_names" value="30251012844458645" /><input type="text" name="p_t02" size="40" maxlength="2000" value="" id="F4550_P1_USERNAME" tabindex="2" /></td></tr><tr><td nowrap="nowrap" align="right"><label for="F4550_P1_PASSWORD"><a class="htmldbLabelOptional" href="javascript:popupFieldHelp('30251520608467092','2230359300632227','Close')" tabindex="999">Password</a></label></td><td colspan="1" rowspan="1" align="left"><input type="hidden" name="p_arg_names" value="30251520608467092" /><input type="password" name="p_t03" size="40" maxlength="2000" value="" onkeypress="return submitEnter(this,event)" id="F4550_P1_PASSWORD" tabindex="3" /></td></tr></table><table summary="" cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td align="right"> <input type="button" value="Login" onclick="doSubmit('LOGIN_BUTTON');" id="LOGIN_BUTTON" tabindex="4" class="htmldbButton" /></td></tr></table><img src="/i/1px_trans.gif" height="2" width="260" alt=""/></td></tr><tr class="htmldbLoginBottom"><th class="LF"><br /></th><th class="CF"><a href="javascript:popupURL('wwv_flow_help.show_help?p_lang=en-us&p_session=2230359300632227&p_flow_id=4550&p_step_id=1');" title="Click here to learn how to get started" style="text-align:center;font-size:10px;display:block;margin:2px;">Click here to learn how to get started</a></th><th class="RF"><br /></th></tr></table></td><td class="htmldbColumnSep"><div class="htmldbColumnSep"><br /></div></td><td valign="top" style="width:100%"><div style="float:right;"><table cellspacing="0" cellpadding="0" border="0" class="htmldbTasks" summary="" id="R5734329754154454"><tbody><tr><th class="L"><br /></th><th class="C">Tasks</th><th class="R"><br /></th></tr><tr><td colspan="3" class="B"><ul class="htmldbUl"><li><a href="f?p=4550:7:2230359300632227::NO:::" title="Reset Password">Reset Password</a></li><li><a href="f?p=4550:4:2230359300632227::NO:::" title="Find My Workspace">Find My Workspace</a></li><li><a href="javascript:popupURL('http://www.oracle.com/technology/products/database/application_express/index.html');" title="Product Page">Product Page</a></li></ul></td></tr></tbody></table></div></td></tr></table></div><div class="htmldbFlowL">Language: en-us</div><div class="htmldbFlowV">Application Express </div><div class="htmldbNewBottom"><div class="htmldbNewBottom1"><br /></div><div class="htmldbNewBottom2">Copyright &copy; 1999, 2009, Oracle. All rights reserved.</div><br /></div><input type="hidden" name="p_md5_checksum" value="" /></form><a name="END"><br /></a><script type="text/javascript"><!-- first_field('F4550_P1_COMPANY');//--></script></body></html>

Jan (HL)
27 Nov 2011, 2:51 PM
Hm, seems you are using APEX.

But you (your server) has provide yourself the answer of your problem (in HTML which is obviously not JSON parsable): The login process was made against the wrong entry point and this lets the server respond with a new login form page).

In reference to your quoted response the login entry point (the login processing url) is "wwv_flow.accept". The login form page is only the specific login url which will used to redirect if the user tries to access an url w/o enough permissions. The names of the fields are not "username" and "password", too.

Because I do not know APEX and its security level personally, I would guess renaming the parameters should work. I find it a little bit strange that are this dynamic looking field names (which could be somehow like one-time form tokens). If not, your job is only to clone the login request by yourself (checked by tools like firebug).

bee
28 Nov 2011, 2:08 AM
Hi Jan, I tried to avoid that json string error by calling ext.ux.j2eeauth extension . I am calling submit button handler. as below :


this.up('form').getForm().submit({
success : this.onLoginSuccess, failure : this.onLoginFailure,
scope : this

});

onLoginSuccess = function() {
// win.el.unmask();
var cookie = cookieUtil.get('loginCookie');
console.log('cookie '+cookie);
if (cookie) {
// this.buildViewport();
console.log('logic to write to move next');
// win.hide();
// win = null;
}
else {
// this.onLoginFailure();
}
};


onLoginFailure = function() {
win.el.unmask();
Ext.MessageBox.alert('Failure', "Login failed. Please try again");
};

But this submit function doesn't get called. what could be the reason ?

And one more thing is that I get my get request and response in network what I expect , but I am not able to call in front end extjs please see image 29617atatched

Jan (HL)
28 Nov 2011, 2:16 AM
If you can't avoid using the standard apex j2ee stuff, don't use JSON.decode(). However, you have to determine on yourself whether the user has a valid login or not (e.g. with that cookie check).

The "submit function"? Do you mean your success callback? Will be the failure callback called? And if yes, what are the error arguments?

bee
28 Nov 2011, 2:20 AM
I am not getting cookie name on my console . so I am thinking submit is not getting called. The problem is that it is not showing any error.

Jan (HL)
28 Nov 2011, 2:51 AM
Do you can provide a link to that extension?

bee
5 Dec 2011, 8:11 AM
Do you can provide a link to that extension?
Please find the link below . It is developed in extjs 2.0
http://www.sencha.com/forum/showthread.php?26494-Ext.ux.J2EEAuth-extension&

Jan (HL)
5 Dec 2011, 11:32 AM
Oh, wow.*

Well, I have not seen any magic stuff. The ajax request thing is a little bit strange, but I have no idea what APEX required for a full login submit.

Anyway, like I already suggested: Log and trace the behavior of login processing within the working state (meaning pre-extjs 4) and rebuild it within the new state (meaning extjs 4).

* Now I know why it isn't working with Ext JS 4. ;)