Add authentication to your Windows (UWP) 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.
- Add your app to the Allowed External Redirect URLs.
During this tutorial, we'll configure your app to use Microsoft authentication. An Azure Active Directory tenant has been configured automatically in your Azure subscription. You can use Azure Active Directory to configure Microsoft authentication.
You will need the URL of the Azure Mobile Apps service. The backend URL was provided when you created your project.
Create an app registration
- Sign in to the Azure portal.
- Select Azure Active Directory > App registrations > New registration.
- In the Register an application page, enter
zumoquickstartin the Name field. - Under Supported account types, select Accounts in any organizational directory (Any Azure AD directory - multitenant) and personal Microsoft accounts (e.g. Skype, Xbox).
- In Redirect URI, select Web and type
<backend-url>/.auth/login/aad/callback. For example, if your backend URL ishttps://zumo-abcd1234.azurewebsites.net, you would enterhttps://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback. - Press the Register button at the bottom of the form.
- Copy the Application (client) ID.
- From the left pane, select Certificates & secrets > New client secret.
- Enter a suitable description, select a validity duration, then select Add.
- Copy the secret on the Certificates & secrets page. The value won't be displayed again.
- Select Authentication.
- Under Implicit grant and hybrid flows, enable ID tokens.
- Press Save at the top of the page.
Important
The client secret value (password) is an important security credential. Don't share the password with anyone or distribute it within a client application.
Configure Azure App Service Authentication and Authorization
- 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 values you copied earlier into the Application (client) ID and Client secret boxes.
- 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.
- Once the authentication screen returns, press Edit next to Authentication settings.
- In the Allowed external redirect URLs box, enter
zumoquickstart://easyauth.callback. - Press Save.
Step 10 requires that all users are authenticated before accessing your backend. You can provide fine-grained controls by adding code to your backend. For more information, see the Server SDK How-to for Node.js or ASP.NET Framework.
DID YOU KNOW? You can also allow users with organizational accounts in Azure Active Directory, Facebook, Google, Twitter, or any OpenID Connect compatible provider. Follow the instructions in the 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 anonymous user, but the TodoItem table now requires authentication.
Add authentication to the app
To add authentication via the built-in provider, you must:
- Register the protocol in the package manifest.
- Complete the login process when the callback is called.
- Trigger the login process before data is requested.
Register the protocol in the package manifest
Protocols are registered in the app manifest:
- Open the
Package.appxmanifestfile. - Navigate to the Declarations tab.
- Select Protocol in the Available Declarations dropdown list, then select Add.
- Enter the following information:
- Display Name: ZumoQuickstart
- Name:
zumoquickstart
- Save the app manifest with Ctrl+S.
The Name field must match the protocol for the callback. We are using zumoquickstart://easyauth.callback, so the name is zumoquickstart.
Handle the callback
Edit App.xaml.cs. Add the following method to the class:
protected override void OnActivated(IActivatedEventArgs args)
{
if (args.Kind == ActivationKind.Protocol)
{
ProtocolActivatedEventArgs protocolArgs = args as ProtocolActivatedEventArgs;
Frame content = Window.Current.Content as Frame;
if (content.Content.GetType() == typeof(MainPage))
{
content.Navigate(typeof(MainPage), protocolArgs.Uri);
}
}
Window.Current.Activate();
base.OnActivated(args);
}
When the zumoquickstart protocol is detected, the app will launch the main page with a Uri. The OnNavigatedTo() method within MainPage.xaml.cs handles the launch.
Trigger the login process
Edit the MainPage.xaml.cs file. Edit the OnNavigatedTo() method to trigger the authentication on first entry:
protected override async void OnNavigatedTo(NavigationEventArgs e)
{
if (e.Parameter is Uri)
{
_service.ResumeWithUri(e.Parameter as Uri);
await RefreshItemsAsync(true);
_service.TodoListUpdated += OnServiceUpdated;
}
else
{
await _service.AuthenticateAsync();
}
}
Add the authentication code to DataModel/TodoService.cs:
public void ResumeWithUri(Uri uri) => mClient.ResumeWithURL(uri);
public Task AuthenticateAsync() => mClient.LoginAsync("aad", "zumoquickstart");
Test the app
From the Run menu, click Local Machine to start the app. You will be prompted for a Microsoft account in a browser. When you're 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: