phonegap: cookie based authentication (PHP) not working [webview]

Question

I'm working on a mobile web-app using sencha touch, HTML5 and phonegap as a wrapper.

I'm using PHP-Authentication (Cookie) and ajax-requests. Everything works fine on safari or chrome, but after the deployment with phonegap (webview) it does't work anymore...

Any help would be appreciated :)

Some more details:

All data for my app is loaded via ajax requests to my server component "mobile.php". I use basic PHP-Auth to autenticate the user:

1. AJAX-Request [username, password] -> mobile.php -> Session established (cookie)
2. All other requests if auth was successful

What's the difference between a normal safari website and the webview?

Answer 1

i figured it out:

you have to change the phonegap_delegate.m file and add the following to the init method:

- (id) init
{   
    /** If you need to do any extra app-specific initialization, you can do it here
     *  -jm
     **/
    //special setting to accept cookies via ajax-request
    NSHTTPCookieStorage *cookieStorage = [NSHTTPCookieStorage 
                                          sharedHTTPCookieStorage]; 
    [cookieStorage setCookieAcceptPolicy:NSHTTPCookieAcceptPolicyAlways]; 

    return [super init];
}

it enables webview to accept cookies from ajax requests

Answer 2

If your Phonegap AJAX requests are not firing callbacks like they're supposed to, this may be the reason.

If the response you're getting attempts to set cookies and you haven't done Michael's fix then your (jquery) AJAX request will fail quietly -- neither success: nor error: callbacks will fire despite the fact that the server actually received the request and sent a response. It appears you must do this even if you don't care about the cookies.

I hope this helps someone.

I didn't care about the cookies but just spent a few hours trying to figure out why the callbacks didn't fire!

Answer 3

There is a solution that works on android too:

Install plugin https://github.com/wymsee/cordova-HTTP to perform arbitrary HTTP(S) requests.

Replace XMLHttpRequest with the plugin alternative (cordovaHTTP.get or cordovaHTTP.post):

cordovaHTTP.post("https://example.com/login", {email: '[email protected]', passwd: "s3cr3t"}, {}, function(response) {
    console.log('success');
    console.log(response);
}, function(response) {
    console.log('failure');
    console.log(response);
});

The response will contain status, data and response.headers["Set-Cookie"], that can be parsed for name, value, domain, path and even HttpOnly flags ;-)

Said cookie can be saved in LocalStorage and sent in subsequent requests (see cordovaHTTP.setHeader() or header parameter of .get/.post methods) to simulate an authenticated user on a desktop browser.

Answer 4

Best ways to store get and delete cookie its working fine in my app which is on live

To store value in cookie

window.localStorage.setItem("key", "value");

To Get value in cookie

var value = window.localStorage.getItem("key");

To Delete cookie value

window.localStorage.removeItem("key");
window.localStorage.clear();