OAuth callback page can't be found on device

cordova
1

I’m trying to have an OAuth2 implemented for Ionic application
This is my login for:

<ion-view view-title="Login" align-title="left">
<ion-nav-bar class="bar-positive">
	<ion-nav-back-button class="button-clear icon ion-ios7-arrow-back">	
	</ion-nav-back-button>
</ion-nav-bar>
<ion-content class="padding">
	<img src="img/Exact_Logo.jpg" border="0"></a><br/>
	<a class="button icon-right ion-chevron-right" ng-click="loginToFoo()">Sign in with Foo Account</a>
  </div>
</ion-content>

and this is my login controller:

'use strict';

angular.module('fooapp')
.controller('loginCtrl', function($scope, $state, $http) {

$scope.signIn = function(user) {
 console.log('Sign-In', user);
 $state.go('tab.home');
}

$scope.loginToFoo = function() {

var URL_AUTH = 'https://foo.com/api/oauth2/auth';
var RESPONSE_TYPE_CODE = 'code';
var CLIENT_ID = '{xxxxxx-xxxxx-xxxxx-xxxxx}';
var REDIRECT_URL = 'http://localhost/callback';


var loginUrl = URL_AUTH + '?client_id=' + CLIENT_ID + 
              '&redirect_uri=' + REDIRECT_URL + 
              '&force_login=1&response_type=' + RESPONSE_TYPE_CODE ;

window.open(loginUrl, "_system", "location=yes"); 
};
})

I have also added these lines to config.xml:

<feature name="InAppBrowser">
  <param name="android-package" value="org.apache.cordova.InAppBrowser"/>
</feature>
<feature name="InAppBrowser">
  <param name="ios-package" value="CDVInAppBrowser" />
</feature>

Although I have already added cordova-plugin-inappbrowser, as I use ‘ionic serve’, I can see the correct result in a browser but as I use ‘ionic emulate android’ or run it on device, after login I receive following error:
[![enter image description here][1]][1]

I understand that “http://localhost” is not the device root for application but I don’t know I should change it to what exactly.
[1]: http://i.stack.imgur.com/7Xh5e.png

2

Hi @elhamsarikhani

I’ve implemented oauth2 in my Ionic app. Relevant snippet:

function openLogin() {

    var ref = window.open(
        AUTHURL + '/oauth2/authorize' +
        '?client_id=' + AUTHCLIENTID +
        '&redirect_uri=http://localhost/oauth-callback' +
        '&scope=read&response_type=token' +
        '&state=' + uuid4.generate(),
        '_blank',
        'location=no'
    );

    ref.addEventListener('loadstart', function(event) {

        if (typeof String.prototype.startsWith != 'function') {
            String.prototype.startsWith = function (str){
                return this.indexOf(str) === 0;
            };
        }

        console.log('listen event oauth callback');

        if((event.url).startsWith("http://localhost/oauth-callback")) {
            console.log('oauth callback url');

            var query = event.url.substr(event.url.indexOf('#') + 1);

            var data = {};

            var parts = query.split('&');

            // read names and values
            for (var i = 0; i < parts.length; i++) {
                var name = parts[i].substr(0, parts[i].indexOf('='));
                var val = parts[i].substr(parts[i].indexOf('=') + 1);
                val = decodeURIComponent(val);
                data[name] = val;
            }

            console.log('saving auth data ' + JSON.stringify(data));

            data = JSON.stringify(data);
            window.localStorage.auth = data;

            ref.close();
        }

    });
}

Note listening for ‘loadstart’ event, and window.open with '_blank', not '_system'.

2 Likes
3

Thanks for the help tomkuipers
but as I try your code still get the same result as I try to test the app on a device or on emulator or on ionic view.

image
image289×514 28.5 KB

4

It will only work on your device or simulator. It will not work in the web browser.

Details: http://blog.ionic.io/oauth-ionic-ngcordova/

tutorials : https://blog.nraboy.com/2014/07/using-oauth-2-0-service-ionicframework/

5

As I mentioned, I was testing it on emulator.

6

@elhamsarikhani Are you sure you added the InAppBrowser plugin correctly? What is the output of cordova plugins ?
I’m asking because only adding the snippet to config.xml is not enough.

cordova plugin add cordova-plugin-inappbrowser

Will install the plugin correctly, good luck.

7

Hi Tom
I removed and reinstalled the inAppBrowser and now I works. Thanks!

8

If I want to set the callback url to a page on my server, does that page need to do anything?? React to something it receives?

9

Hi @tombrokeoff,
I have the same question, Did you find an answer to the question. i.e. will the callback url needs to do anything.

10

@elhamsarikhani Can you please share your code for oAuth 2.0 implementation in Ionic? Am also trying to implement the same thing, but have a lot of grey areas. For eg, what is the role of config.xml?
In my case, for some reason, its not getting redirected back to redirect_uri after logging to get the authorization code. Please do share… would be a lot of help!

11

that worked for me at my android device, thank you very much!

12

I know this is solved. But hope this might help someone else.
Here you are using “_system” as the target. That opens a window from the system browser. In order to open a WebView or InAppBrowser you need to use “_self” or “_blank”.

Source - https://cordova.apache.org/docs/en/3.1.0/cordova/inappbrowser/window.open.html