Add authentication to your Windows (WPF) app

In this tutorial, you add Microsoft authentication to the quickstart project using Azure Active Directory. Before completing this tutorial, ensure you have created the project and enabled offline sync.

Configure your backend for authentication

To configure your backend for authentication, you must:

During this tutorial, we'll configure your app to use Microsoft authentication, which uses configuration within Azure Active Directory. An Azure Active Directory tenant has been configured automatically in your Azure subscription.

You will need the URL of the Azure Mobile Apps service. The backend URL was provided when you created your project.

Configuring Azure Mobile Apps with native client authentication requires three steps:

  1. Create an app registration in Azure AD for your App Service app.
  2. Enable Azure Active Directory in your App Service app.
  3. Configure a native client application.

This process will create an Application (client) ID to identify your desktop app, and a Scope to identify the cloud backend. These settings are stored in your app code.

Create an app registration for your App Service

  1. Sign in to the Azure portal.
  2. Select Azure Active Directory > App registrations > New registration.
  3. In the Register an application page, enter a Name for your app registration. You may want to enter appservice-zumoqs to distinguish it from the client app registration you will complete later.
  4. In Redirect URI, select Web and type <backend-url>/.auth/login/aad/callback. Replace <backend-url> with the URL for your Azure Mobile Apps service. For example, https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback.
  5. Select Register.
  6. Copy the Application (client) ID.
  7. Select Expose an API > Set.
  8. Press Accept.
  9. Select Add a scope. Press Save and continue to confirm the Application ID URI.
  10. In Scope name, enter user_impersonation.
  11. Leave the permission as Admins only.
  12. In the text boxes, enter the consent scope name and description you want users to see on the consent page. For example, "Access the Todo Items".
  13. Select Add scope.

Enable Azure Active Directory in your App Service

  1. In the Azure portal, select All Resources, then your App Service.
  2. Select Settings > Authentication.
  3. Press Add identity provider.
  4. Select Microsoft as the identity provider. This will provide a form to fill in.
  5. For App registration type, select Provide the details of an existing app registration.
  6. Paste the value you copied earlier into the Application (client) ID box.
  7. For Issuer URL, enter https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0. This URL is the "magic tenant url" for Microsoft logins.
  8. For Restrict access, select Require authentication.
  9. For Unauthenticated request, select HTTP 401 Unauthorized.
  10. Press Add.

You are now ready to use Azure Active Directory for authentication in your app.

Configure a native client application

You can register native clients to allow authentication to Web APIs hosted in your app using a client library such as the Microsoft Identity Library (MSAL).

  1. In the Azure portal, select Active Directory > App registrations > New registration.
  2. In the Register an application page, enter a Name for your app registration. You may want to use the name native-zumoqs to distinguish this one from the one used by the App Service.
  3. Select Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox).
  4. In Redirect URI, select Public client (mobile & desktop) and type the URL <backend-url>/.auth/login/aad/callback. Replace <backend-url> with the URL for your Azure Mobile Apps service. For example, https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback.
  5. Select Register.
  6. Copy the value of the Application (client) ID. The Application ID is stored in your application code.
  7. Select API permissions > Add a permission > My APIs.
  8. Select the app registration you created earlier for your App Service app. If you don't see the app registration, make sure that you added the user_impersonation scope.
  9. Under Select permissions, select user_impersonation, and then select Add permissions.
  10. Select Authentication > Add a platform > Mobile and desktop applications.
  11. Check the box next to https://login.microsoftonline.com/common/oauth2/nativeclient.
  12. Add http://localhost in the field for extra URIs.
  13. Select Configure.

At this point, you have two pieces of information you need to transfer to the client app:

  • The Application (client) ID of the native client application registration.
  • The Scope (found under API permissions in the native client application registration - click on the user_impersonation permission tp see the full form). A scope will look similar to api://<client-id>/user_impersonation. The client ID will not be the same as the client ID of the native client application.

DID YOU KNOW? You can also authenticate users with organizational accounts in Azure Active Directory, Facebook, Google, Twitter, or any OpenID Connect compatible provider. For more details, seethe Azure App Service documentation.

Test that authentication is being requested

  • Open your project in Visual Studio.
  • From the Run menu, click Run app.
  • Verify that an unhandled exception with a status code of 401 (Unauthorized) is raised after the app starts.

This exception happens because the app attempts to access the back end as an unauthenticated user, but the TodoItem table now requires authentication.

Add authentication to the app

There's no built-in authentication provider for WPF applications, so you must integrate the "provider" SDK for your authentication technique. The provider SDK will authenticate the user through their normal mechanism, providing your app with an access token. Your app then submits the access token or authorization code to the Azure App Service backend to get an appropriate access token for accessing the data in the backend.

The provider SDK is the Microsoft Authentication Library (MSAL) for Azure Active Directory and Microsoft accounts. Request an access_token from Azure Active Directory:

  1. Open the project in Visual Studio.

  2. Add the Microsoft.Identity.Client NuGet package to your app:

    • Right-click on the ZumoQuickstart project.
    • Select Manage NuGet Packages....
    • Select the Browse tab.
    • Enter Microsoft.Identity.Client in the search box, then press Enter.
    • Select the Microsoft.Identity.Client result, then click Install.
    • Accept the license agreement to continue the installation.
  3. Add the following variables to the Constants.cs file:

    public static class Constants
    {
        /// <summary>
        /// The base URL of the backend service within Azure.
        /// </summary>
        public static string BackendUrl { get; } = "https://ZUMOAPPNAME.azurewebsites.net";
    
        /// <summary>
        /// The Application (Client) Id for the AAD App Registration
        /// </summary>
        public static string ApplicationId { get; } = "CLIENTID";
    
        /// <summary>
        /// The list of scopes to ask for when authenticatign with MSAL
        /// </summary>
        public static string[] Scopes { get; } = new string[]
        {
            "SCOPE"
        };
    }
    

    You obtained the Application (Client) ID (referenced here as CLIENTID) and the Scope (referenced here as SCOPE) when you registered the application in the App Registrations page.

  4. Add the following code to the App.xaml.cs file:

    public partial class App : Application
    {
        public static IPublicClientApplication PublicClientApp { get; private set; }
    
        static App()
        {
            PublicClientApp = PublicClientApplicationBuilder.Create(Constants.ApplicationId)
                .WithAuthority(AzureCloudInstance.AzurePublic, "common")
                .WithRedirectUri("http://localhost")
                .Build();
        }
    
        internal static void RunOnUiThread(Action p)
            => App.Current.Dispatcher.Invoke(p);
    }
    
  5. Edit the TodoService.cs file, and add the token acquisition code to the InitializeAsync() method:

    private async Task InitializeAsync()
    {
        using (await initializationLock.LockAsync())
        {
            if (!isInitialized)
            {
                // Create the client
                mClient = new MobileServiceClient(Constants.BackendUrl, new LoggingHandler());
    
                // Define the offline store
                mStore = new MobileServiceSQLiteStore("todoitems.db");
                mStore.DefineTable<TodoItem>();
                await mClient.SyncContext.InitializeAsync(mStore).ConfigureAwait(false);
    
                // Obtain an MSAL authorization_code
                PublicClientApplication msalApp = App.PublicClientApp as PublicClientApplication;
                var authResult = await msalApp.AcquireTokenInteractive(Constants.Scopes)
                    .ExecuteAsync();
    
                // Call LoginAsync to authenticate user to Azure Mobile Apps Server
                // using the access_token from MSAL authentication result.  For details
                // on what you need to send for each provider, see:
                // https://docs.microsoft.com/azure/app-service/app-service-authentication-how-to#validate-tokens-from-providers
                await mClient.LoginAsync("aad", new JObject(
                    new JProperty("access_token", authResult.AccessToken)
                ));
    
                // Get a reference to the table
                mTable = mClient.GetSyncTable<TodoItem>();
    
                isInitialized = true;
            }
        }
    }
    

Lines 64-66 will use the MSAL library to authenticate the user. A web browser opens to complete the authentication process. Once complete, lines 72-74 submit the access token received from AAD to the App Service. An Azure Mobile Apps access token is received. This token is then submitted on each request to the service to identify the user.

Test the app

From the Run menu, click Run app to start the app. You'll be prompted for a Microsoft account. When you are successfully signed in, the app should run as before without errors.

Deleting the resources

Now you've completed the quickstart tutorial, you can delete the resources with az group delete -n zumo-quickstart. You can also delete the global app registration used for authentication through the portal.

Next steps

Take a look at the HOW TO sections:

You can also do a Quick Start for another platform using the same backend server: