CODEWITHSUNDEEP
cordovaionic-frameworkgoogle-drive-apigoogle-oauthinappbrowser
Tam Nguyen
Tam Nguyen

Reputation: 115

Inappbrowser ionic doesn't load Oauth

I am working on my project using inappbrowser ionic to make a view of my webapp. I follow the instruction (http://sourcefreeze.com/cordova-inappbrowser-plugin-example-using-ionic-framework/) and I have the app run on my device (iphone 6s, ios 10.1.1). My web app using google api and here is the service 

function GoogleDriveAuthentication($rootScope){

    this.authenticate = function(){
        gapi.load('client:auth2',authorize);
    }

    function authorize(){
        gapi.client.setApiKey($rootScope.API_KEY);
        gapi.auth2.init({
            client_id: $rootScope.CLIENT_ID,
            scope: $rootScope.SCOPES
        }).then(function(authResult){
            var auth2 = gapi.auth2.getAuthInstance();
            var user = auth2.currentUser.get();
            if (user.isSignedIn()) {
              afterSignInSuccess();
            } else {
              auth2.signIn().then(afterSignInSuccess,afterSignInFailed);
            }
        });
    }
    function afterSignInFailed(respond){
        console.log(respond);
    }

    function afterSignInSuccess(respond){
        console.log('authenticated successfully');
        var auth2 = gapi.auth2.getAuthInstance();
        var user = auth2.currentUser.get();
        var authResponse = user.getAuthResponse();
        $rootScope.accessToken = user.getAuthResponse().access_token;
        $rootScope.authenticated = true;
        gapi.client.load('drive', 'v3',function(){
            $rootScope.$broadcast('authenticated');
        });           
    }
}

And here is a part of my app.js

app.run(function($rootScope,$location,$route, GoogleDriveAuthentication,DTOptionsBuilder){

$rootScope.$on('$routeChangeSuccess', function(){
    document.title = "SuperProject - " + $route.current.title;
    $('#superSearch').typeahead('val', '');
    if ($location.path() != "/register" && $location.path() != "/forgot"){
        if (!$rootScope.loggedin){
            console.log($rootScope.loggedin);
            $location.path("/login");
        } 
        else if (!$rootScope.authenticated){
            console.log('authenticate');
            GooghleDriveAuthentication.authenticate();
        }            
    }
    if ($location.path != '/home') {
        $('#superSearch').blur();
    }
})

And when I run it in Inappbrowser, it's stuck like this

My cordova-plugins:

cordova-plugin-console 1.0.4 "Console"
cordova-plugin-device 1.1.3 "Device"
cordova-plugin-inappbrowser 1.5.0 "InAppBrowser"
cordova-plugin-splashscreen 4.0.0 "Splashscreen"
cordova-plugin-statusbar 2.2.0 "StatusBar"
cordova-plugin-whitelist 1.3.0 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"

I may experience in this case I used oauth2 v3 that would make some issues in Inappbrowser, im not sure. Any idea what's wrong with my app? Any help would be appreciated :)

Upvotes: 0

Views: 1253

Answers (1)

Zig Mandel
Zig Mandel

Reputation: 19835

Google warned recently about this: https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native-apps.html

For security reasons, Google no longer allows getting the token using inAppBrowser. Instead, use a cordova plugin for google sign-in, for example https://github.com/EddyVerbruggen/cordova-plugin-googleplus, which uses the android native way.

As a bonus, you will gain much better integration with the Android device: The user no longer needs to type their email and password on first use.

The reason some apps still work is that Google is blocking by stages. New auth credentials created in the console no longer work, but older ones do. At some point none will, see the first link above.

Upvotes: 3

Related Questions