Get started with authentication in Mobile Services

This topic shows you how to authenticate users in Windows Azure Mobile Services from your HTML app. In this tutorial, you add authentication to the quickstart project using an identity provider that is supported by Mobile Services. After being successfully authenticated and authorized by Mobile Services, the user ID value is displayed.

This tutorial walks you through these basic steps to enable authentication in your app:

1. Register your app for authentication and configure Mobile Services
2. Restrict table permissions to authenticated users
3. Add authentication to the app

This tutorial is based on the Mobile Services quickstart. You must also first complete the tutorial Get started with Mobile Services.

Register your appRegister your app for authentication and configure Mobile Services

To be able to authenticate users, you must register your app with an identity provider. You must then register the provider-generated client secret with Mobile Services.

1. Log on to the Windows Azure Management Portal, click Mobile Services, and then click your mobile service.

   

2. Click the Dashboard tab and make a note of the Site URL value.

   

   You may need to provide this value to the identity provider when you register your app.

3. Choose a supported identity provider from the list below and follow the steps to register your app with that provider:

   • Microsoft Account
   • Facebook login
   • Twitter login
   • Google login

   Remember to make a note of the client identity and secret values generated by the provider.

   Security Note

   The provider-generated secret is an important security credential. Do not share this secret with anyone or distribute it with your app.

4. Back in the Management Portal, click the Identity tab, enter the app identifier and shared secret values obtained from your identity provider, and click Save.

   

Both your mobile service and your app are now configured to work with your chosen authentication provider.

Restrict permissionsRestrict permissions to authenticated users

1. In the Management Portal, click the Data tab, and then click the TodoItem table.

   

2. Click the Permissions tab, set all permissions to Only authenticated users, and then click Save. This will ensure that all operations against the TodoItem table require an authenticated user. This also simplifies the scripts in the next tutorial because they will not have to allow for the possibility of anonymous users.

   

3. In the app directory, launch one of the following command files from the server subfolder.

   • launch-windows (Windows computers)
   • launch-mac.command (Mac OS X computers)
   • launch-linux.sh (Linux computers)
   Note

   On a Windows computer, type `R` when PowerShell asks you to confirm that you want to run the script. Your web browser might warn you to not run the script because it was downloaded from the internet. When this happens, you must request that the browser proceed to load the script.

   This starts a web server on your local computer to host the new app.

4. Open the URL http://localhost:8000/ in a web browser to start the app.

   The data fails to load. This happens because the app attempts to access Mobile Services as an unauthenticated user, but the TodoItem table now requires authentication.

5. (Optional) Open the script debugger for your web browser and reload the page. Verify that an access denied error occurs.

Next, you will update the app to allow authentication before requesting resources from the mobile service.

Add authenticationAdd authentication to the app

1. Open the project file index.html, locate the H1 element and under it add the following code snippet:

   <div id="logged-in">
       You are logged in as <span id="login-name"></span>.
       <button id="log-out">Log out</button>
   </div>
   <div id="logged-out">
       You are not logged in.
       <button>Log in</button>
   </div>

   This enables you to login to Mobile Services from the page.

2. In the app.js file, locate the line of code at the very bottom of the file that calls to the refreshTodoItems function, and replace it with the following code:

   function refreshAuthDisplay() {
       var isLoggedIn = client.currentUser !== null;
       $("#logged-in").toggle(isLoggedIn);
       $("#logged-out").toggle(!isLoggedIn);
   
   
   if (isLoggedIn) {
       $("#login-name").text(client.currentUser.userId);
       refreshTodoItems();
   }
   
   
   }
   
   
   function logIn() {
       client.login("facebook").then(refreshAuthDisplay, function(error){
           alert(error);
       });
   }
   
   
   function logOut() {
       client.logout();
       refreshAuthDisplay();
       $('#summary').html('<strong>You must login to access data.</strong>');
   }
   
   
   // On page init, fetch the data and set up event handlers
   $(function () {
       refreshAuthDisplay();
       $('#summary').html('<strong>You must login to access data.</strong>');          
       $("#logged-out button").click(logIn);
       $("#logged-in button").click(logOut);
   });

   This creates a set of functions to handle the authentication process. The user is authenticated by using a Facebook login.

   Note

   If you are using an identity provider other than Facebook, change the value passed to the login method above to one of the following:microsoftaccount,facebook,twitter, orgoogle.

3. Go back to the browser where your app is running, and refresh the page.

   When you are successfully logged-in, the app should run without errors, and you should be able to query Mobile Services and make updates to data.

   Note

   When you use Internet Explorer, you may receive the error after login: Cannot reach window opener. It may be on a different Internet Explorer zone. This occurs because the pop-up runs in a different security zone (internet) from localhost (intranet). This only affects apps during development using localhost. As a workaround, open the Security tab of Internet Options, click Local Intranet, click Sites, and disable Automatically detect intranet network. Remember to change this setting back when you are done testing.

Next steps

In the next tutorial, Authorize users with scripts, you will take the user ID value provided by Mobile Services based on an authenticated user and use it to filter the data returned by Mobile Services.