Authenticate users using Microsoft Account, Facebook, Twitter, Google and Windows Azure Active Directory with Mobile Services

 

Introduction

 

This sample demonstrates how you can easily wire up your Windows Store application to require your users to authenticate against well know social identity provides such as Microsoft Account, Facebook, Twitter and Google using Windows Azure Mobile Services. It also shows you how to configure your mobile service to authenticate against your Windows Azure AD enterprise directory

Prerequisites

Building the Sample

Follow these steps to set up the sample.

Setting up the Cloud Environment

  1. Create a new Mobile Service from the Windows Azure Management Portal.

    To do this, log on to the Windows Azure Management Portal, navigate to Mobile Services and click New.

     

    Expand Compute | Mobile Service, and click Create.

     

    This displays the New Mobile Service dialog.

    In the Create a mobile service page, type a subdomain name for the new mobile service in the URL textbox and wait for name verification. Once name verification completes, select Create a new SQL Database in the Database dropdown list and click the right arrow button to go to the next page.

     

    This displays the Specify database settings page.

    Note: If you already have a database in the same region as the new mobile service, you can instead choose Use existing Database and then select that database. The use of a database in a different region is not recommended because of additional bandwidth costs and higher latencies.

    In Name, type the name of the new database, then type Login Name, which is the administrator login name for the new SQL Database server. Type and confirm the password, and select the check box to complete the process.

     

    Note: If there is a mismatch or the password you supply does not meet the minimum requirements, a warning is displayed.

    You have now created a new mobile service that can be used by your mobile apps.

  2. Register the sample application for authentication and configure Mobile Services. To do this, follow the instructions in https://www.windowsazure.com/en-us/develop/mobile/tutorials/get-started-with-users-dotnet/#register.

    Note: The link above provides details on how to register the sample application with Microsoft Account, Facebook, Twitter and Google identity providers, and explains how to register the provider-generated client secret with Mobile Services.

  3. Register the sample application for authentication with Windows Azure Active Directory and configure Mobile Services.

In the Management Portal, select your mobile service and then click the Identity tab. Under Azure Active Directory, copy the App URL.Navigate to Active Directory, and then click your directory.

Click the Applications tab. Then click Add. Follow the wizard and create a Web Application And/Or Web API, enabling Single Sign On. When prompted, enter the App URL copied from your mobile service.

On the application information page, copy the Client ID from under Enable your app to read or write directory data.

Return to your mobile service’s Identity tab and paste the Client ID you just obtained. Then click Save.

 

Setting up the Local Environment

  1. Configure the Mobile Service URL and access key.

    Get the Mobile Service URL and Mobile Service Key values. Browse to your Mobile Service dashboard, copy the service URL and click Manage Keys on the bottom bar.

     

    Mobile Service URL

    Now copy the Application Key value.

     

  2. In Visual Studio 2012 Express for Windows 8, open the MobileServicesAuthenticationCS.sln solution (for the C# sample) or the MobileServicesAuthenticationJS.sln solution (for the JavaScript sample).

  3. Open the App.xaml.cs file (for the C# sample) or the default.js file (for the JavaScript sample) and supply the URL and application key from the mobile service in the MobileServiceClient constructor.

    C#
    Edit|Remove
    private static MobileServiceClient mobileService = new MobileServiceClient( 
                "https://{YOUR-MOBILE-SERVICE-NAME}.azure-mobile.net/", 
                "{YOUR-APPLICATION-KEY}"); 
    
     
    JavaScript
    Edit|Remove
    var mobileService = new Microsoft.WindowsAzure.MobileServices.MobileServiceClient( 
                "https://{YOUR-MOBILE-SERVICE-NAME}.azure-mobile.net/", 
                "{YOUR-APPLICATION-KEY}"); 
    
  4. Inspect the code required to authenticate the user.

    For the C# Sample:

    Open the ScenarioInput1.xaml.cs file and locate the Launch_Click method. The user authenticates with Facebook by calling the MobileServiceClient.LoginAsync() method (the other scenarios use a different value of MobileServiceAuthenticationProvider to specify a different identity provider).

    For the JavaScript Sample:

    Open the js\oAuthFacebook.js file and locate the login function. The user authenticates with Facebook by calling the MobileServiceClient.login() function (check the other scenarios for the required string parameter to specify a different identity provider).

Running the Sample

 

1. In Visual Studio, press the F5 key to run the application.

Note: If this is the first time you run the app, you may get an error message saying that the build restored the NuGet packages. If that is the case, run the app one more time to include those packages in the build (for more information, see http://go.microsoft.com/fwlink/?LinkID=317568).

2. In the start page, select the authentication scenario, and press the Launch button.

3. An authentication dialog box will be displayed prompting you to enter the credentials of the selected identity provider.

 

4. A consent message requesting access to the application is shown the first time you log in to your account. 

5. After the user is authenticated, the user id is shown in the output area.

6. Select the Windows Azure AD authentication scenario, and press the Launch button.

 7. An authentication dialog box will be displayed prompting you to enter the credentials of your organizational account.

Note: You can add a user to your directory tenant from the Management Portal. To do this, select your directory, click the Users tab and then click Add User at the bottom of the screen. Then, follow the steps from the wizard to create the user.

8. After the user is authenticated, the user id is shown in the output area.

 

 

Want to see More Windows Store app samples using Windows Azure Mobile Services - check out the full listing. If you cant find a specific Windows Azure Mobile Services scenaro in the full listing please feel free to reach out on Twitter via @cloudnick