CODEWITHSUNDEEP
angularjscordovaazureionic-frameworkazure-mobile-services
ca9163d9
ca9163d9

Reputation: 29159

Azure mobile service authentication works in web page not in Cordova app?

I've set up Azure and created Angular factory.

.factory('client', [function () {
    var client = new WindowsAzure.MobileServiceClient("https://xxx.azurewebsites.net/");
    return client;
}])

In login controller,

.controller('LoginCtrl', ['$scope', '$state', 'client', function ($scope, $state, client) {
    $scope.loginFacebook = function () {
        console.log('loginFacebook...')
        client.login("facebook").then(function (data){
            console.log('logged in succesfully..')
            $state.go('menu.events');
        }, function(error){
            console.log('login failed.');
            $scope.err = JSON.stringify(error); // error is {}
            //login failed.
            $state.go('menu.test');
        });
    };
}])

The following code works in the desktop web browser (Tested using Ripple). I can log in and it redirects to menu.events.

However, it always called the error callback after logging in after build and created a phone app. The value of parameter error of the error callback is an empty object {}. The following image was flashing very quickly (I recorded the video and captured the screen).

enter image description here

I tried to change the error callback to redirect the page when the error is an empty object as the following. However, I found it will still redirect if I click the back key when prompting to enter username/password. 

    function (error) {
        if (Object.keys(error).length === 0 /*&& error.constructor === Object*/) { 
            $state.go('menu.events'); 
        };
        $scope.err = JSON.stringify(error);
        console.log('login failed.');
    }

The following is the full output of ionic run android -lc

WARN: ionic.project has been renamed to ionic.config.json, please rename it.
(node:20576) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.

There is an error in your gulpfile:
Error: The `libsass` binding was not found in D:\......\myapp\node_modules\gulp-sass\node_modules\node-sass\vendor\win32-x64-48\binding.node
This usually happens because your node version has changed.
Run `npm rebuild node-sass` to build the binding for your current node version.
    at Object.sass.getBinaryPath (D:\......\myapp\node_modules\gulp-sass\node_modules\node-sass\lib\extensions.js:158:11)
    at Object. (D:\......\myapp\node_modules\gulp-sass\node_modules\node-sass\lib\index.js:16:36)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object. (D:\......\myapp\node_modules\gulp-sass\index.js:186:21)

Upvotes: 0

Views: 412

Answers (2)

Fernando Oliveira
Fernando Oliveira

Reputation: 31

Have you tried to use 

client.login("facebook").done(function (data){

instead of .then?

Upvotes: 0

Aaron Chen
Aaron Chen

Reputation: 9940

I have followed the documentation and tried your code with my Facebook account but unable to reproduce the error. You could take my following key code snippet as reference.

In index.html under www, 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'
        data: gap: https://www.facebook.com https://yourappname.azurewebsites.net; style-src 'self'">
    <title></title>

    <link rel="manifest" href="manifest.json">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>

  </head>
  <body ng-app="starter">
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>
  </body>
</html>

app.run() function:

.run(function ($ionicPlatform, $rootScope) {
  $ionicPlatform.ready(function () {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }

    $rootScope.client = new WindowsAzure.MobileServiceClient('https://xxx.azurewebsites.net');
  });
})

My login controller look like this:

.controller('LoginCtrl', function ($scope, $rootScope) {
    $scope.signWithFackBook = function () {
        $rootScope.client.login('facebook').then(function () {

            alert('Login successfully!');
        }, function (error) {
            console.error(error);
            alert('Failed to login!');
        });
    }
})

The plugins I installed:

enter image description here

At last, it works for me.

enter image description here

Upvotes: 1

Related Questions