Hello everyone!

 

Introduction

Today, I was searching for an Azure Mobile Apps topic to write about in my blog, which I love, and I could barely find a blog post on the internet about how to get the user information like his name, his profile picture or even his friends (for more complex scenarios). So, I am gonna show you how you can easily fetch the personal info of an authenticated user of your UWP (and not only) application from Facebook, Google, Microsoft Account or Twitter.
Are you ready to create a great user experience for your users?

 

The result of this tutorial will be like:

Capture
I am gonna focus on the backend so I ‘ll keep the UI of the UWP App pretty simple & ugly.

 

You can find the complete project here. (GitHub)

 

Create a new Azure Mobile App backend

Follow these steps to create a new Mobile App backend.

  1. Log into the Azure Portal.
  2. In the top left of the window, click the +NEW button > Web + Mobile > Mobile App, then provide a name for your Mobile App backend.
  3. In the Resource Group box, select an existing resource group. If you have no resource groups, enter the same name as your app.At this point, the default App Service plan is selected, which is in the Standard tier. The App Service plan settings determine the location, features, cost and compute resources associated with your app. You can either select another App Service plan or create a new one. For more about App Services plans and how to create a new plan in a different pricing tier and in your desired location, see Azure App Service plans in-depth overview
  4. Use the default App Service plan, select a different plan or create a new plan, then click Create.This creates the Mobile App backend. Later you will deploy your server project to this backend. Provisioning a Mobile App backend can take several minutes; the Settings blade for the Mobile App backend is displayed when complete. Before you can use the Mobile App backend, you must also define a connection a data store.
(For this tutorial we are not going to use the database but you must define a connection to one in order to create the .NET Backend successfully.)

Configure the server project

  1. Back in the Mobile App backend settings, click Quick start > your client platform.
  2. Under Create a table API, select C#:

Click Download, extract the compressed project files to your local computer, open the solution in Visual Studio, build the project to restore the NuGet packages, then deploy the project to Azure. To learn how to deploy a .NET backend server project to Azure, see How to: Publish the server project in the .NET backend SDK topic.

You Mobile App backend is now ready to use with your client app.

(Taken from here)

Configure your Backend for Authentication

Now we have to configure our backend for authentication. There are some great guides for this on Azure Documentation.

Facebook

Please click here for Facebook Authentication configuration

Google

Please click here for Google Authentication configuration

Microsoft Account

Please click here for Microsoft Account Authentication configuration

Twitter

Please click here for Twitter Authentication configuration

 

Code code code!

Backend

We are ready to write some code for our backend!

 

Capture
That’s how a plain and clean Azure Mobile App project, downloaded from the Quick Start, is like.

 

Let’s create a new Controller.

  1. Right click on the Controllers folder
  2. Go to Add ->  Controller…
  3. Select Azure Mobile Apps Custom Controller
  4. Click the Add button
  5. Name it whatever you like ( I named mine UserInfoController.cs )
  6. Click Add

 

Azure Mobile Apps Custom Controller are Web API 2 REST-ful Controllers which are specialized in returning data to the client-consumer. They take care of transparently serializing the data into the format requested by the client. In our example, we will use it to get the user data, like his name and his profile picture, from the provider, like Microsoft, and return it to the client.

 

Now, as we created our Controller lets create our model class which will be returned to the user when our Controller is being invoked.

  1. So, right click on the DataObjects folder
  2. Add a new class.
  3. And name it whatever you like ( I named mine UserInfo.cs )

 

Place the following 2 properties inside our new class.

 

Open your Controller class and add the following code

 

Don’t forget to change the 2 const fields (line 5, 6) to your Twitter Consumer Key and Secret! (These are the two values you used when you set up your Mobile App with Twitter)

 

The above code reads the user’s access token which comes with every request he makes, invoking the correct endpoint for each provider using GET method and the right parameters, reads the user’s name and image URL and returns them to the user!

In this example,  we are just using these two values, but it’s more or less the same process for pretty much everything like the user’s friends or posts.

You just have to check the HTTP-based API for every provider (e.g. Facebook’s Graph API) to read about how and which endpoint to invoke and how the data is returned.

 

Application

 

Okay, we are ready to create our super simple UWP application to connect to our backend, get authenticated and use our custom Web API Controller!

 

 

Remember. The process for the other platforms is exactly the same! Just see the proper documentation on how to do the 3 things I mentioned above and you are done! No changes to the backend.

 

  1. Create a new UWP Project and name it whatever you like.
  2. Create a new folder and name it Models
  3. Create a new class and name it UserInfo.cs.
  4. Copy the following code inside it. It’s exactly the same model class as before.

  1. Right click on your UWP project and click Manage NuGet Packages.Select the Browse tab if it’s not already selected and search for Microsoft.Azure.Mobile.Client and install it.
  2. Open the MainPage.xaml
  3. Delete the root Grid
  4. Add the following code inside your Page element

 

 

That’s our View.

 

5. Now, open MainPage.xaml.cs
6. Add the following code

 

Don’t forget to change the Mobile App URL of your MobileServiceClient (Line 12) (https is required!)

The above code uses the MobileServiceClient class to connect to our backend.

When you press any of the four buttons which are placed in our View (Facebook, Google, Microsoft Account, Twitter), client.LoginAsync is used and a new window opens and the selected provider will ask you for your credentials.

1

 

2

 

When you successfully log in, client.InvokeApiAsync<UserInfo> is used, our Controller is invoked and when the user’s name and image URI are available, they are returned back inside a UserInfo object.

Finally, we just present them on our view using a TextBlock and an Image!

 

3

 

That’s it! You can find the complete project here. (GitHub)

Thanks for reading and happy coding!

George

 

Did you find it useful? Write below!

 

Advertisements