Join David Isbitski for an in-depth discussion in this video Storing our app data in the cloud, part of Up and Running with Azure Mobile Services.
Now that we have our user interface working so that we can log in and out of facebook we need to combine all of those user interface elements so that we actually make calls upto our service. So the first thing we'll do is this get user data function that we wrote when we detect we've already been logged in and there is an existing user ID in local settings. We need to write that so, let's come down here and say, this function will get all the latest Facebook info for the user and updates for our UI.
So, I'm going to say function, getUserData. going to take any arguments. And we're going to sign the user ID to what's ever in local settings so that value is going to be user ID and the key will be in local settings as well. (NOISE) be userKey. Now we need to set up that mobile service client, just like we did before for tables.
So the current user, is equal to, I'm going to say userID. Equals the user ID and then the mobile service authentication token. So this is what we'll get returned by Azure mobile services if we've been authorized through an OF provider. So I'm going to say, user key. I also want to point out that this authentication token will expire eventually In this course we're just going to assume that it's correct, because it's not going to be longer than a month or so; but in your own application, you may just want to be aware that your users will have to log in within a certain amount of time.
Depending on which o off provider that you use, before that token expires. And then we'll say client, I want you to go ahead and get the table profiles we created previously. But now we can start doing queries, so I'll say, I want you to go ahead and hit the profiles table, but where the name Is that user ID and the mobile service authentication token is the user key.
This works a lot like sequel server queries or link, if you're used to doing any of those type of functions. And so, when we get that, let's go ahead and read And when our read is done, we're going to fire off a new function with those results. And this is where we will set our player name. We're going to set the inner HTML to be whatever those results are, so we're only going to get one result back. We'll take the first one. And we'll say, displayname.
And then we're going to set the source to our player image equal to results0.avatar. OK, this was our function. This one, results, open, this guy we have to. Like that. So now we will have the ability, and take our user ID, and our user key, call up using the Azure Mobile Services client, to our Profiles table, and then pull down what that person's current display name.
An Avatar looks like on Facebook. Next, if we want to log out of Facebook, we need to implement our logout off function here. So let's create a new variable called rowID. And we're going to call into the client, we're going to get a table, that table will be profiles. where, and this is going to be the same thing that we've done up here, so I'm just going to go ahead and paste this one.
So we're saying where that user ID and mobile service. Let's go ahead and fix that, mobile service. Authentication token equal to our current. User id and user key, going to read, and when that is done add a new function, take the results of that function and I am going to take the row id. That is the new variable which just set and it's results.
Will be equal to whatever ID we get back. So this is what's really cool, is you can nest all of the calling functions to the profiles. So at the client we don't actually know what that ID would be with inside our service stored up structured storage. So I'm getting the proper ID, that's current and from the Cloud. And then with that ID, I'm going to go ahead and tell it to delete all the information we know about this currently logged in Facebook user. So we need to do another call.
So I'll say client.getTable. I'm call into profiles. And we're going to say delete and we want to delete where the ID is that row ID we just got back. And then when this is done, (SOUND) The text player name, for example, its inner HTML should just go right back to player, that's what we had as the default.
And, our image player, its source should go back to the default balloon image we had. The, local settings, we need to remove them, because we want them to be completely logged out, with not trace in our client. So we'll say, user ID, and then our local settings, let's go ahead and remove the user key. We need to also take our local variables that we've set for those.
Values, and set it to the defaults. So the ID goes to default ID, and user key we'll just set to null. And now, we want to provide some feedback to the user to let them know that we've done all this cleanup and they've been successfully logged out of Facebook so we'll say our message equals. Successfully logged out of Facebook and we have a dialogue here, we'll say new windows Ui.
We're just going to use standard pop-ups message dialogue here. With that message. I'm going to show this dialogue. And so now we're showing that they're logged out of Facebook. The last thing we need to do is that button. We have to set its visibility down to be visible, because we set it to be hidden, since they were already logged in, and then the log out button on our app bar, we have to.
Tell that to go away. And then we'll go ahead and show our menu. And if we have any kind of errors, let's just go ahead and log that out to the console for now. And that should be our log out off. And now we also have to log in to Facebook. So lets save everything. Now we need to go ahead and call into the Azure mobile services client login functionality. This will go out to out to Facebook and get an O-off token.
Remember, login off is going to be called when we hit the Facebook button on the start menu. So let's go down here and I'm going to return a new promise. We'll be using winJS promises here. And that will have a function in it called complete. And we're going to call client, log in And then the name of our service, so this happens to be Facebook, and when that is done, I have another function with the results.
And so this is where we're going to set the profileID to the FacebookID, so our current variable for userID equals the results that we're getting back here from the Client log in function will have an actual property of a user id on it. And our user key will be the same results. But, this one will have a mobile service authentication token. Now what we need to is we need to update, mobile services with our new profile so this is the table.
And we wrote this function previously when we setup our tables. But we did not pass in any parameters, so we are going to pass in the user ID, the user key, and the off service. (NOISE) So now that we've done that, we need to go ahead and save the, the profile ID to our local storage, and then hide the log in button. So we'll say local settings, values of user ID.
Equals the user ID and then local settings, values of user key and then we need to go ahead and hide our Facebook login button now. And our log out command to be visible. So, since we've logged in and we've set all of the UI perameters, it might be nice to actually let our user know that happened successfully. So, we're going to do a user logon success message here.
So, just like our log out message we're going to call into Windows UI popups so our message here will be successfully logged into Facebook and so we will create a new windows URI popups message dialog that message and we'll show this and done We'll call complete. Actually, let's check for some errors, too. So we'll say, just like we did on our logout, we want to make sure, we're just going to do a little logout error message ehre.
So I'll say dialog equals a new Windows UI popups. And I am going to use message dialogue with an error occurred during the log in. Say something like log in required, so if Facebook goes down or the API becomes unavailable. We're letting the user know. And that is our login function.
Next, we're going to have to go back into our portal. Make sure we are on our balloons service, and under data, hold on we'll go back up and make sure we're getting all of our And there's our SQL database, that looks good. Mobile Services, Balloons, Data, we're going to make sure that that's deleted, because we're not using that. Come back in, Data, okay, everything's looking good. Now, if you recall, that To-Do item we actually deleted from the SQL server side.
So the dashboard was still looking for that. We no longer need that table. So now that we've deleted our to do item, let's go ahead and just make sure we have our profiles item. And since we're going to be doing authorization through facebook a lot, I want to make sure that all of my permissions are set to only authenticate it. Looks good. Let's go ahead and create our scores tables. And the same exact thing. We only want authenticated users to be able to access this.
Check. And you'll see currently there's no records. When we go ahead and log in in a second we're going to start adding the, both the profiles records, as well as scores, each time we go ahead and play a level. Let's switch back over to coed, and now we need to talk a little bit about global versus local scope. So, up until this point, we've done everything with connections through out Initialize function. But what I want to do now is, I actually want to call out to the client function from the rest of our default.js encapsulating function all the way up here.
So, this is where you need to be especially careful. If you're adding Azure mobile services to an existing game or an app you're not going to know what those variables are actually called. Now since I wrote this game I know that client is Okay and you can see we've actually declared that at the top level functional scope for default.js, but I want to make sure I point that out, be absolutely careful When you're going to go ahead and reference the client through the rest of your app. Now, since we're going to log in, let's scroll down, and we've got log out, and we've got log in.
We're going to go ahead and set a break point here, right at the client log in for Facebook. I'm going to run this. And now we'll click on Connect with Facebook. You'll notice were in the Asher mobile services client login, somebody to say continue, and you can see a new page show up. Nwo, what's happening here is the Asher mobile services client is creating a web view for us and it's pulling up an authentication page from Facebook, so this page may change from time to time, so when you're viewing this course, don't worry if this page looks a little bit different This page is completely owned by Facebook and they have the right to change however they want people to log in.
currently I need to enter my name and password. And I'll say log in. And now, the first time I log in with a new app, I also have to hit a new button that says play game. You'll notice any time they change this kind of authorization scheme they have How apps work now. So, we need to go ahead and hit play game. This will actually now supply us a token and we successfully logged into Facebook. Congratulations we're now logging in. So we also need to go ahead and update our log out functionality.
We've written the function but we haven't wired up any of that code yet. You'll notice we just have it listed as a menu And it's not really doing anything if we just go ahead and click on it. So let's stop our application. We'll hit stop here. Let's move over to default html real quick. And let's rename this from menu to log out. And we'll come over here, and we need to add the event to actually log out. That's a, I'm going to check that break point.
We'll do that up here. So we're going to say document, get element by ID, and we call this command logout And on the click event, we want to call that log out of function that we've just written. Let's save and run. And now you'll notice when we run, because we've already been logged into Facebook, we're not seeing the button. If I Right-click, I actually see the log out button. I'm going to go ahead and add a break point into the log out Let's hit logout.
It's going to go up to profiles and get the table, so we'll go ahead and step over, and you'll see we've successfully logged out of Facebook. Notice immedately the connect with Facebook button comes right back. So if we take off our break points, and we come back, we should have the ability now to immediately log in. And now you will see currently, Facebook only requires that second prompt, the first time we've logged in.
(INAUDIBLE) login. Oops. I'm immediately logged into Facebook. I can go ahead and play the game, (MUSIC) and then I can log out, and we've been successfully logged out of Facebook. Now you'll notice at the top, we had an undefined and a blank image for our source. What we need to do now is we need to edit mobile services, server side insert operation. So we're going to do a little bit of mo j s, and we're going to call out to Facebook's social graph apply /g, and update the railway back to insert, so that the proper image, and name comes down.
- Setting up Visual Studio, Node.js, and the Azure Mobile Services SDK
- Creating a new Azure Mobile Service instance
- Connecting an app to a new service
- Creating and managing storage tables
- Setting up Facebook authorization
- Storing app data in the cloud
- Sending out push notifications
- Setting up an API service
- Adding custom logging