Azure Mobile Services – Facebook Authentication

In this blog post, we will demonstrate how to use Azure Mobile Services Authentication and will choose Facebook Authentication as an Example and apply this on Windows Phone 8.1 Runtime App.

First of all you will need:

  • Azure Account.
  • Facebook account, and sign up as a developer.
  • Visual Studio (2013 Update 2 or above).

Let’s Get Started:

  1. Sign into your Azure Portal.
  2. Navigate to MOBILE SERVICES and click NEW as shown:
    1
  3. Follow the steps shown in this photo:
    2
  4. This Dialog will appear, set the URL name, and choose if you will create new Database or Existed one(in my case; i used existing DB), then select the nearest Region to you and The Backend Language which is Javascript in my case and then Click Next.3
  5. If you chose an Existing DB, this will appear to you and will require the LOGIN PASS to access this DB.
    4
  6. Now, you can see your Mobile Service already Created as shown.
    5

Now, we will create a Facebook App. Follow the steps below:

  1. First, Navigate to Facebook Developer Portal.
    https://developers.facebook.com/apps/
  2. This page will appear, if you are already registered as a developer before, Now, press Add New App Button as shown:
    1
  3. This dialog will appear, choose Website.
    2
  4. Enter a name for the App and Click the button as shown:
    3
  5. This dialog will appear, Choose a category and then press the blue button.
    4
  6. Then, press Skip Quick Start as shown:
    5
  7. Navigate to Settings, you will find AppID and App Secret in Yellow Color(we will use them later in Azure portal). in the App Domain you will provide your MOBILE SERVICE URL(you can get it from the Dashboard in yout Mobile Service in Azure Portal as shown) then, add a contact e-mail and press Add Platform.
    6
  8. A dialog will appear, choose website, the add your MOBILE SERVICE URL in Site URL as shown:
    7
    You can get this url from your Mobile Service in Azure Portal Dashboard tab as shown:
    10
  9. At the top, you will find an Advanced Tap, press it and scroll down, then do the steps shown here:
    8
  10. Navigate to Status & Review on the left hand side, and press yes button as shown:
    9

Now, you have created the Facebook App, but you have to connect the Facebook App to your Mobile Service.

  1. Go back to your Mobile Service in your Azure Portal, and select IDENTITY as shown:
    8
  2. Here, add the Facebook App ID and App Secret we mentioned before in step No.7
    9

Now, you have created the Mobile Service and Facebook App and Connected them together, one more step is to Create a Windows Phone App and Connect it to the Mobile Service.

  1. Open Visual Studio, Create new App(Windows Phone 8.1 Runtimt, Blank Template)
  2. In the Solution Explorer, Right Click on the project and press Manage NuGet Packages..
  3. Write WindowsAzure.MobileServices in the search bar and hit Enter. Install the Package.
  4. Now, in App.xaml.cs add the code of your Mobile Service where you can get it as shown:
    6
    7
  5. Now, your app is connected to your Mobile Service, Navigate to Mainpage.xaml and add a Button and creat a Click event Handler.
  6. Go to Mainpage.xaml.cs add this namespace and this snippet of code:
    
     private MobileServiceUser user;
    
     private async System.Threading.Tasks.Task AuthenticateAsync()
     {
       while(user == null)
       {
         string message;
         try
         {
           user = await App.MobileService.LoginAsync(MobileServiceAuthenticationProvider.Facebook);
           message =
           string.Format("You are signed in - {0}", user.UserId);
         }
         catch(InvalidOperationException)
         {
            message = "Login Required";
         }
            var dialog = new MessageDialog(message);
            dialog.Commands.Add(new UICommand("OK"));
            await dialog.ShowAsync();
         }
     }
    
  7. Then add this line of code in Button Click event handler:
        await AuthenticateAsync();
    
  8. Go to App.xaml.cs and add this namespace and this snippet of code:
     protected override void OnActivated(IActivatedEventArgs args)
     {
        if(args.Kind == ActivationKind.WebAuthenticationBrokerContinuation)
        {
         App.MobileService.LoginComplete(args as WebAuthenticationBrokerContinuationEventArgs);
        }
       base.OnActivated(args);
     }
    
  9. Now, Run your app and try to login, you will get a result like this:
    wp_ss_20150227_0004   wp_ss_20150227_0002    wp_ss_20150227_0003

Now, you have created a Mobile Service and Facebook App and connected them together, Then created a Windows Phone App and connected it to the Mobile Service, and used Mobile Service Authentication.

To download the code sample click HERE.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s