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:
- Create an app registration.
- Configure Azure App Service Authentication and Authorization.
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:
- Create an app registration in Azure AD for your App Service app.
- Enable Azure Active Directory in your App Service app.
- 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
- Sign in to the Azure portal.
- Select Azure Active Directory > App registrations > New registration.
- In the Register an application page, enter a Name for your app registration. You may want to enter
appservice-zumoqsto distinguish it from the client app registration you will complete later. - 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. - Select Register.
- Copy the Application (client) ID.
- Select Expose an API > Set.
- Press Accept.
- Select Add a scope. Press Save and continue to confirm the Application ID URI.
- In Scope name, enter
user_impersonation. - Leave the permission as Admins only.
- 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".
- Select Add scope.
Enable Azure Active Directory in your App Service
- In the Azure portal, select All Resources, then your App Service.
- Select Settings > Authentication.
- Press Add identity provider.
- Select Microsoft as the identity provider. This will provide a form to fill in.
- For App registration type, select Provide the details of an existing app registration.
- Paste the value you copied earlier into the Application (client) ID box.
- 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. - For Restrict access, select Require authentication.
- For Unauthenticated request, select HTTP 401 Unauthorized.
- 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).
- In the Azure portal, select Active Directory > App registrations > New registration.
- In the Register an application page, enter a Name for your app registration. You may want to use the name
native-zumoqsto distinguish this one from the one used by the App Service. - Select Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox).
- 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. - Select Register.
- Copy the value of the Application (client) ID. The Application ID is stored in your application code.
- Select API permissions > Add a permission > My APIs.
- 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.
- Under Select permissions, select user_impersonation, and then select Add permissions.
- Select Authentication > Add a platform > Mobile and desktop applications.
- Check the box next to
https://login.microsoftonline.com/common/oauth2/nativeclient. - Add
http://localhostin the field for extra URIs. - 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:
Open the project in Visual Studio.
Add the
Microsoft.Identity.ClientNuGet package to your app:- Right-click on the
ZumoQuickstartproject. - Select Manage NuGet Packages....
- Select the Browse tab.
- Enter
Microsoft.Identity.Clientin the search box, then press Enter. - Select the
Microsoft.Identity.Clientresult, then click Install. - Accept the license agreement to continue the installation.
- Right-click on the
Add the following variables to the
Constants.csfile: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 asSCOPE) when you registered the application in the App Registrations page.Add the following code to the
App.xaml.csfile: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); }Edit the
TodoService.csfile, and add the token acquisition code to theInitializeAsync()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:
- Server (Node.js
- Server (ASP.NET Framework)
- .NET Client
You can also do a Quick Start for another platform using the same backend server: