Authenticate Facebook via Windows Azure Mobile Services

 

Let’s first understand what does the word authentication means before we go to the technical concept of Facebook authentication.

 

What is authentication?

 

It’s a method where the user tries to connect to a certain domain or application so the user needs access to this domain/application here comes the role of authentication. Simply it’s a way to authorize users through a certain domain or application.

Image

Identity Providers

Facebook is an Identity Provider which a user can login through it to be authorized to access an Application and there is a variety of Identity providers like (Microsoft Account, Yahoo ID, Google ID, Facebook and Twitter).

Authentication

To use authentication with windows azure mobile services first you need to have a working Windows Azure Account then go to the portal (http://manage.windowsazure.com) in order to register the application for authentication and to configure the mobile services.

Image

After Logging into the Portal go to the Mobile Services tab and then choose your own mobile service that you’ve created before then click on the Identity

Now a page that has all of the supported identities will appear so that when you pick an Identity Provider for user authentication you must fill in its required fields. 

Image

To add the Facebook settings you must first register your Facebook application from the Facebook Developers site

Go to https://developers.facebook.com/   and if you didn’t register before press on Register Now then the Policy will appear to you read it then accept it and click done.

Now go to apps and press on create new app in order to create the Facebook app that you’ll use to authenticate the users

Image

Write the name of the Application and then press Continue.

Then you’ll be provided the APP ID and the APP Secret Key Copy them and then go back to the mobile service identity page and paste them in the Facebook settings.

Now go to the Data Tab and press on the created Table (ToDoItem) and click on permissions then choose Only Authenticated Users in all the permissions and now your app allows only authenticated users. Now to test your mobile service go to the previously created windows 8 app and add the following authentication code

Go to the MainPage.xaml.cs

Add this to the using statements 

using Windows.UI.Popups;

 

then add the following code to the MainPage Class

private MobileServiceUser user;
private async System.Threading.Tasks.Task Authenticate()
{
    while (user == null)
    {
        string message;
        try
        {
            user = await App.MobileService
                .LoginAsync(MobileServiceAuthenticationProvider.Facebook);
            message = 
                string.Format("You are now logged in - {0}", user.UserId);
        }
        catch (InvalidOperationException)
        {
            message = "You must log in. Login Required";
        }
 
 
    var dialog = new MessageDialog(message);
    dialog.Commands.Add(new UICommand("OK"));
    await dialog.ShowAsync();
}
 
 
}

 

And at the end replace the OnNavigatedTo method that implements the new Authenticate Method 

protected override async void OnNavigatedTo(NavigationEventArgs e)
{
    await Authenticate();
    RefreshTodoItems();
}

Now when running the Application it will first ask the user to sign in using Facebook then the user will be authorized to use the application. You can as well use the same mobile service with any other app for example Windows Phone or Android.