整合与AngularJS的MobileServiceClient [英] Integrating the MobileServiceClient with AngularJS

问题描述

我试图用WindowsAzure.MobileServiceClient内角上做和CRUD操作的单点登录。作为一个角小白，我试图找出做到这一点的最佳方式：

I'm trying to use the WindowsAzure.MobileServiceClient within Angular to do single sign on and CRUD operations. Being an Angular noob, I'm trying to figure out the best way to do this:

• 实例化在$ rootScope在.RUN并从那里调用的功能？


• 创建一个服务或工厂，使MobileServiceClient的实例和所有功能的调用？请问的currentUser等信息没有被使用的服务/出厂的时候迷路了？


• 只需阀芯了MobileServiceClient在需要它的控制器？在我看来，如果我那样做，的currentUser信息会迷路？

我已经使用了一些上面的方法试过，但我遇到了一些问题：

I've tried using some of the above methods but I'm running into some problems:

• 调用登录方法如图所示的天青文档有时有效，有时像它应该不显示弹出式窗口中的身份验证提供者。我登录了这么一个弹出窗口应显示身份验证提供的，但不是，


• 不管什么我尝试做的MobileServiceClient的currentUser是回来为空，即使是显示的弹出窗口，我输入了正确的凭据。

• Calling the login method as shown in the Azure docs sometimes works, other times it doesn't show a popup window to the authentication provider like it should. I am logged off of the authentication provider so a popup window should be shown but isn't,
• No matter what I try to do, the MobileServiceClient currentUser is coming back as null, even when the popup was shown and I correctly entered my credentials.

的我能做些什么，使这项工作顺利任何想法？任何的例子我可以跟随的地方？文档似乎粗略。

Any ideas of what I can do to make this work smoothly? Any examples I can follow somewhere? The documentation seems sketchy.

我使用的约曼和步兵沿角发生器做我的工作，如果它使任何区别。

I'm using Yeoman and the angular generator along with Grunt to do my work, if it makes any difference.

推荐答案

我能弄明白。我创建了一个新的服务来处理所有的移动业务code的。由于来自客户端的方法是异步的，我在使用方法回调。我还使用cookie存储来保存用户的凭据对象（的currentUser），并在需要时再次将其拉出。的currentUser似乎失去了调用之间的用户凭据对象，所以我把它存储在cookie并将其推入时，它已经失去了它的客户端。

I was able to figure it out. I created a new service to handle all of the mobile services code. Since the methods from the client are async, I'm using callbacks in the methods. I also use the cookie store to save the user's credential object (currentUser) and pull it out again when needed. currentUser seems to lose the user credential object between calls, so I store it in a cookie and push it into the client when it has lost it.

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

在，做的登录和注销控制器，我这样做：

In the controller that does the login and logout, I do this:

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

在登录/注销控制器的观点是这样的：

The view for the login/logout controller looks like this:

<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>

和最后一个控制器获取数据，我这样做：

And finally in a controller that gets data, I do this:

'use strict';

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

    AzureMobileClient.getStuff(function(items) {

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

    });
}]);

这篇关于整合与AngularJS的MobileServiceClient的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！