Authentication in jQuery Mobile and PhoneGap

Question

I have a web application built with jQuery Mobile and PHP (CodeIgniter framework). Now I\'m trying to make a PhoneGap version of it as well, to make it distributable as a standa

Answer 1

You can make requests to your web-service (Ion Auth) from your app. with jQuery. Your login would look something like this:

//add event handler to the `submit` event for your login form
$('#login_form').bind('submit', function () {

    //send a post request to your web-service
    $.post('http://my-domain.com/my-auth/auth.php', $(this).serialize(), function (response) {

        //parse the response string into an object
        response = $.parseJSON(response);

        //check if the authorization was successful or not
        if (response.status === 'success') {
            //do login here
        } else {
            //do error here
        }
    });
});

$(this).serialize() will add the login form's data to the post request. This example assumes your web-service will return JSON.

Answer 2

Have you looked at PhoneGap Plugin: ChildBrowser (iPhone, Android, other) and its locChanged method?

I have only coded apps that use OAuth (Twitter App) and OpenID (AppLaud App) for PhoneGap / Android, but the child browser plugin has what's needed for those. Sounds like Ion Auth may be similar: after auth driven by provider, return user to app seamlessly.

Answer 3

The reason your form is still submitting and it's trying to change pages is because you have a syntax error in your submit handler Javascript. On line two, event is not defined so trying to call event.preventDefault() errors. Although the handler fails, the browser still submits the form using it's default action and method.

Either change your function signature to function(event) { or simply return false from the function. Returning false is equivalent to preventing default.

$('#login_form').bind('submit', function () {

    //send a post request to your web-service
    $.post('http://localhost/app_xcode/account/login', $(this).serialize(), function (response) {
        //check if the authorization was successful or not
        if (response == true) {
            $.mobile.changePage('#toc', "slide");
        } else {
            alert('login failed');
            $.mobile.changePage('#toc', "slide");
        }
    }, 'JSON');

    return false;
});