using google oauth2 in cordova inAppBrowser

[johnwillyn]

I have been using Google to authorize users in Cordova with the InAppBrowser plugin.

With this plugin installing a local web server on localhost:12344, I can't seem to get the redirect uri to come back with the code I am requesting. It appears to redirect to the alternate uri from Google at urn:ietf:wg:oauth:2.0:oob. Responses on the uri are supposed to have the code in the content of the web page, but I can't seem to access that either.

More specifically, the return url in my code is:

"https://accounts.google.com/o/oauth2/approval?as=2067eaa925e9ab9&hl=en&pageId=none&xsrfsign=APsBz4gAAAAAVYxBeHewE_zs2Zbbq-x2phaTPvnu3zyK"

I am not sure if this has to do with the local web server on 12344 or not.

Otherwise, if I bypass the login validation, the wkWebView seems to address a lot of my performance problems.

TIA.

[zglozman]

we are fighting with the same issue did you ever get it resolved?

[johnwillyn]

I thought I posted my fix for this, but now I can't find it in the thread. Here it is again for those it might help.

Here is what I found that will work with Google auth and the inAppBrowser.

You need to change the request from a ‘response-type: code’ to a ‘response-type: token’ in order to skip the second step of the auth request.

Make sure your redirect_uri is localhost:12344. I also found that the callback will flash a directory listing of your www directory, so I created a blank directory and redirected to localhost:12344/blank to work around this. (I am sure there are more clever ways to work around this.)

var authUrl = 'https://accounts.google.com/o/oauth2/auth?' + $.param({ client_id: client_id, redirect_uri: redirect_uri, response_type: 'token', // go straight to 'token'; not 'code' scope: 'email profile', approval_prompt: 'auto', state: 'something_clever', // to be replaced by a generated code; it is round tripped by Google include_granted_scopes: 'true' });

The second thing is that you need to wait for the ‘loadstop’ event instead of the ‘loadstart’ to wait for the full response with the token to come across. You also need to then validate the token (with another call to Google as shown below):

  $(authWindow).on('loadstop', function(e) {

    var url = e.originalEvent.url;
    var hash = url.substring(url.indexOf('#'));
    var state = /#state=(.+)\&/.exec(hash);

    // TODO: this should parse for #error as well as #status.
    // so we can tell when the user rejects the request.

    if (state) {  
      // Wait for the final load which has a #state in the hash to close
      authWindow.close();

      // Generic code for parsing all of the params (which we will need at some point)
      var params = {}, 
          regex = /([^&=]+)=([^&]*)/g, 
          m;
      while (m = regex.exec(hash)) {
        params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
      }
      var token = params['access_token'];

      // OK, now we have the token; it must be validated
      var xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://www.googleapis.com/oauth2/v1/tokeninfo?access_token='+
                        token);

      xhr.onload = function () {
        var responseText = xhr.responseText;
        var response = JSON.parse(responseText);
        //console.log(responseText);
        // Test the audience === client_id mitigates 'confused deputy issue'
        if (response.audience && response.audience === client_id) {
           googleapi.getUserInfo(token);   // just use the token from above
        }

      }

      xhr.onerror = function () {
        console.log(xhr.responseText);
        alert('authorization token is invalid');
      }

      xhr.send();

    }
  });

I hope this helps others.

JohnL