问题描述
我试图用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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！