Phonegap + ChildBrowser + PHP CAS library on external site

Question

I'm making a Phonegap app for Android. The app should use CAS authentication. At the moment I have a page which is at this address: "www.mysite.com" and that page automatically redirects to the CAS server authentication page. When I login to that page, the CAS redirects me to the page that I came from, in this case "www.mysite.com".

After login, I can show the user's name that just logged in with the CAS PHP library and a function that's built-in there.

Question: when I open www.mysite.com in a Childbrowser instance in my Phonegap app, after this "loop" can I somehow transfer info from mysite.com to my app, in this case the username?

The ideal scenario would be: open app and push the login button, Childbrowser pops up and you log in, the Phonegap app receives the username and the Childbrowser closes.

Any tips are welcome, thanks in advance!

Answer 1

Might be easiest to use the query string. Have your login page update its url and capture the onLocationChange event on childBrowser. Check to see if username is there and if so, grab it.

In the login page, when complete call:

window.history.replaceState( '', '', window.location.pathname + '?username=' + username );

Then in your app:

window.plugins.childBrowser.onLocationChange = function ( url ) {
    if ( url.indexOf( 'username' ) > -1 ) {
        var username = window.location.queryString()['username'];
    };
};

Here's a helper function to get the query string.

window.location.queryString = function () {
    var result = {},
        queryString = location.search.substring( 1 ),
        re = /([^&=]+)=([^&]*)/g,
        m;
    while ( m = re.exec( queryString ) ) {
        if ( typeof result[decodeURIComponent( m[1] )] == 'undefined' ) {
            result[decodeURIComponent( m[1] )] = decodeURIComponent( m[2] );
        } else {
            if ( typeof result[decodeURIComponent( m[1] )] == 'string' ) {
                result[decodeURIComponent( m[1] )] = [result[decodeURIComponent( m[1] )]];
            };
            result[decodeURIComponent( m[1] )].push( decodeURIComponent( m[2] ) )
        };
    };
    return result;
};

Answer 2

I have used this approach to make it work in a sample application:

function onBodyLoad()
{
    document.addEventListener("deviceready", onDeviceReady,false);
}

function onDeviceReady(){
    showLogin();
}

function showLogin() {
    try{
        var cb = ChildBrowser.install();
        if(cb != null)
        {
            cb.onLocationChange = function(loc){ 
                console.log("browser location changed to " + loc);

                if(loc == "http://mydomain.com/app"){
                    cb.close();
                    doOtherStuff();
                }
            };

            window.plugins.childBrowser.showWebPage("http://mydomain.com/login");
        }
    }catch(e){
        console.log(e);
    }
}

function checkAuth(){
    if( $.cookie(".ASPXAUTH") == null){
        console.log("No auth cookie found");
    }else{
        console.log("Auth cookie found");
    }
}

Answer 3

I made a custom version of the Childbrowser (Android) for this kind of purpose (originally for Google oAuth2). It has a onPageLoaded event that sends back to the parent app (your Phonegap app) the whole HTML source of the page opened on the Childbrowser. So you can extract whatever data you need from the web page. The source code is here, with an example.