Azure 移动服务身份验证适用于网页而不是 Cordova 应用程序？答案

【问题标题】：Azure mobile service authentication works in web page not in Cordova app?Azure 移动服务身份验证适用于网页而不是 Cordova 应用程序？
【发布时间】：2017-05-03 14:05:48
【问题描述】：

我已经设置了 Azure 并创建了 Angular 工厂。

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

在登录控制器中，

.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');
        });
    };
}])

以下代码可在桌面网络浏览器中运行（使用 Ripple 测试）。我可以登录并重定向到menu.events。

但是，它总是在构建后登录并创建手机应用程序后调用错误回调。错误回调的参数error的值是一个空对象{}。下图闪得很快（我录了视频，截屏了）。

当error 为空对象时，我尝试更改错误回调以重定向页面，如下所示。但是，我发现如果在提示输入用户名/密码时单击返回键，它仍然会重定向。

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

以下是ionic run android -lc的完整输出

警告：ionic.project 已重命名为 ionic.config.json，请重命名。 (node:20576) fs: 不支持重新评估本机模块源。如果您使用的是 graceful-fs 模块，请将其更新到更新的版本。您的 gulpfile 中有错误：错误：在 D:\......\myapp\node_modules\gulp-sass\node_modules\node-sass\vendor\win32-x64-48\binding.node 中找不到 `libsass` 绑定这通常是因为您的节点版本已更改。运行 `npm rebuild node-sass` 为您当前的节点版本构建绑定。在 Object.sass.getBinaryPath (D:\......\myapp\node_modules\gulp-sass\node_modules\node-sass\lib\extensions.js:158:11) 在对象。 (D:\......\myapp\node_modules\gulp-sass\node_modules\node-sass\lib\index.js:16:36) 在 Module._compile (module.js:570:32) 在 Object.Module._extensions..js (module.js:579:10) 在 Module.load (module.js:487:32) 在 tryModuleLoad (module.js:446:12) 在 Function.Module._load (module.js:438:3) 在 Module.require (module.js:497:17) 在需要（内部/module.js:20:19）在对象。 (D:\......\myapp\node_modules\gulp-sass\index.js:186:21)

【问题讨论】：

标签： angularjs cordova azure ionic-framework azure-mobile-services

【解决方案1】：

我已关注documentation 并使用我的 Facebook 帐户尝试了您的代码，但无法重现错误。你可以参考我下面的关键码sn-p。

在www下的index.html中，

<!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()函数：

.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');
  });
})

我的登录控制器如下所示：

.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!');
        });
    }
})

我安装的插件：

最后，它对我有用。

【讨论】：

您的解决方案和我的解决方案有两个不同之处。 1) 我下载并包含了 javascript 文件 azure-mobile-apps-client.min.js，而不是使用插件页面添加它。我关注了一些在网上找到的网页。 2）你使用client.login('fackbook').而不是client.login('facebook').，它仍然有效？
对不起#2，有错字问题。应该是client.login('facebook')。我更新了。
我没有看到您在 index.html 文件中包含任何与 azure 相关的 js 文件？我曾经有<meta http-equiv="Content-Security-Policy" content="default-src data: gap: *; style-src 'self' 'unsafe-inline'; script-src: 'self' 'unsafe-inline' 'unsafe-eval'">，我正在尝试转换你写的方式。我应该保留这些unsafe-*吗？
我在app的根目录cordova plugin add cordova-plugin-ms-azure-mobile-apps用这个common添加了azure相关的js。
我使用 Visual Studio GUI 添加了azure-mobile-apps 插件，它应该做同样的事情。我以为它会自动将javascript文件包含在html文件中。

【解决方案2】：

你试过用吗

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

而不是.then?

【讨论】：