将MobileServiceClient与AngularJS集成

发布时间：2020-12-17 17:52:45 所属栏目：安全来源：网络整理

导读：我正在尝试使用Angular中的 WindowsAzure.MobileServiceClient进行单点登录和CRUD操作.作为一个Angular noob,我正试图找出最好的方法：在.run的$rootScope中实例化它并从那里调用函数？创建一个服务或工厂,并在其中实现MobileServiceClient和所有函数调用

我正在尝试使用Angular中的 WindowsAzure.MobileServiceClient进行单点登录和CRUD操作.作为一个Angular noob,我正试图找出最好的方法：

>在.run的$rootScope中实例化它并从那里调用函数？
>创建一个服务或工厂,并在其中实现MobileServiceClient和所有函数调用的实例化？当服务/工厂没有被使用时,currentUser和其他信息是否会丢失？
>只需在需要它的控制器中清空MobileServiceClient？对我来说,如果我这样做,currentUser信息会丢失吗？

我尝试过使用上面的一些方法,但是我遇到了一些问题：

>调用Azure docs中显示的登录方法有时会起作用,有时它不会向身份验证提供程序显示弹出窗口.我从身份验证提供程序注销,因此应显示一个弹出窗口,但不是,
>无论我尝试做什么,MobileServiceClient currentUser都会返回null,即使显示弹出窗口并且我正确输入了我的凭据.

我能做些什么来让这项工作顺利进行？我可以在某个地方跟随的任何例子？文档似乎很粗略.

如果它有任何区别,我正在使用Yeoman和角度发生器以及Grunt来完成我的工作.

解决方法

我弄清楚了.我创建了一个新服务来处理所有的移动服务代码.由于来自客户端的方法是异步的,我在方法中使用回调.我还使用cookie存储来保存用户的凭证对象(currentUser),并在需要时再将其拉出. currentUser似乎在调用之间丢失了用户凭证对象,因此我将其存储在cookie中并在丢失时将其推送到客户端.

'use strict';

angular.module('{appName}')
.factory('AzureMobileClient',['$cookieStore',function ($cookieStore) {

  var azureMobileClient = {};
  azureMobileClient.isLoggedIn = false;
  azureMobileClient.azureError = "";
  azureMobileClient.azureMSC = new WindowsAzure.MobileServiceClient('{app URL from Azure}','{app key from Azure}');

  azureMobileClient.login = function(callback,socialMediaService) {

    azureMobileClient.azureMSC.login(socialMediaService).then(function(user) {
      azureMobileClient.isLoggedIn = user != null;
      $cookieStore.put("azureUser",user);
      callback(azureMobileClient.isLoggedIn);
    },function(error){
      alert(error);

      azureMobileClient.azureError = error;
    });
  };

  azureMobileClient.logout = function() {
    azureMobileClient.getUser();
    azureMobileClient.azureMSC.logout();
    $cookieStore.remove("azureUser");
  };

  azureMobileClient.getStuff = function(callback) {
    azureMobileClient.getUser();

    var stuffTable = azureMobileClient.azureMSC.getTable("stuff");

    stuffTable.read().then(function(items) {
      callback(items);
    });
  };

  azureMobileClient.addStuff = function(scope) {
    azureMobileClient.getUser();
    var stuffTable = azureMobileClient.azureMSC.getTable("stuff");
    stuffTable.insert({ stuffname: scope.stuffname });
  };

  azureMobileClient.getUser = function() {
    if (azureMobileClient.azureMSC.currentUser === null)
    {
      azureMobileClient.azureMSC.currentUser = $cookieStore.get("azureUser");
    }
  };

  return azureMobileClient;
}]);

在执行登录和注销的控制器中,我这样做：

'use strict';

angular.module('{appName}')
.controller('MainCtrl',function ($scope,$window,AzureMobileClient) {

    $scope.authenticate = function (socialService) {

        AzureMobileClient.login(function(isLoggedIn) {
            if (isLoggedIn)
            {
                $window.location.href = "/#/play";
            }
        },socialService);
    };

    $scope.signOut = function() {       
        AzureMobileClient.logout();
    }
});

<button ng-click="signOut()">Sign Out</button> 
<div class="span4">
        <img src="images/facebooklogin.png" ng-click="authenticate('Facebook')" />
        <img src="images/twitterlogin.png" ng-click="authenticate('Twitter')" />
        <img src="images/googlelogin.png" ng-click="authenticate('Google')" />
    </div>

最后在一个获取数据的控制器中,我这样做：

'use strict';

angular.module('{appName}')
.controller('StuffCtrl',['$scope','$window','AzureMobileClient',AzureMobileClient) {

    AzureMobileClient.getStuff(function(items) {

        if (items.length == 0)
        {
            $window.location.href = "/#/stuff/new";
        }
        else
        {
            $scope.$apply($scope.items = items);
        }   

    });
}]);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!