PDA

View Full Version : Cross Domain Authentication - Best Practice?



hoferchr
8 Sep 2012, 2:32 PM
Hi guys,
I am trying since days to find a way how I can securely authenticate with and process the information from a remote server by using a form-panel.

I need to do SSL+POST, which means that JSONP is out of question, right?
One post mentioned using form-submit and standardSubmit:true but when I do that, I just get forwarded to the server-page when I press the button. What is the right way to do that?

As I am a beginner with Ext_JS I kindly ask for some advice!
Thanks,
Christian

hoferchr
9 Sep 2012, 12:19 PM
oh boy.. that wasn't easy... but I found a solution which works. I want to share this, because I didnt find this information at one place, neither in the documentation nor in the forum.

I used following setup:

Form:
A simple login-form

Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',


config: {
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Formtest'
},
{
xtype: 'formpanel',
height: '195px',
id: 'form',
layout: {
type: 'card'
},
url: 'http://192.168.0.189/sencha/formtest/post.php',
items: [
{
xtype: 'fieldset',
title: 'Bitte Anmelden',
items: [
{
xtype: 'textfield',
label: 'UserID',
name: 'userid'
},
{
xtype: 'passwordfield',
label: 'Password',
name: 'pass'
},
{
xtype: 'button',
id: 'loginbu',
margin: '10px',
ui: 'confirm',
text: 'Login'
}
]
}
]
}
]
}


});


Controller:
Important here - enable CORS in Ajax-request: useDefaultXhrHeader: false

Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',


config: {
control: {
"#loginbu": {
tap: 'onButtonTap'
}
}
},


onButtonTap: function(button, e, options) {
var values=Ext.getCmp('form').getValues();


Ext.Ajax.request({
url: 'http://192.168.0.189/sencha/formtest/post.php',
params: {
username: values.userid,
password: values.pass
},
withCredentials: false,
useDefaultXhrHeader: false,
callback: function(response) {
//console.log(response);
},
success: function(response){
var text = response.responseText;
console.log('success');
console.log(text);
},
failure: function(response){
var text = response.responseText;
}
});
}
});


Serverside PHP: just a simple test script, giving back what it receives.
Set the headers for enabling CORS. Here are all information about CORS: http://enable-cors.org (http://enable-cors.org/)


<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: X-Requested-With");
header("Access-Control-Request-Method: GET,POST");
header('Content-Type: application/json');

$return['response']='Hello Client ...';
$return['post']=$_POST;

$json = json_encode($return);


echo isset($_GET['callback'])
? "{$_GET['callback']}($json)"
: $json;

?>