Authentication using Azure App Service with a Universal Windows App

Now that I have my offline task list app written (you can check it out on my GitHub Repository), it’s time to hook it up to some backend logic. I want to share my tasks everywhere and I want them tagged as mine so that other people can use the same app yet have different data. To do that, I need an identity. Microsoft Azure App Service Mobile Apps has three facilities that I am going to use – Authentication, Data Access and Offline Sync – and I’m going to implement them in that order.

To start, I can add a login button. I want the login button to be on the right. I also want the login button to turn into a Sync button once I’ve implemented the whole application. I changed the XAML in MainPage.xaml to support this:

        <AppBar Grid.Row="3" Background="LightGray">
            <Grid>
                <StackPanel Orientation="Horizontal">
                    <AppBarButton Label="Filter">
                        <AppBarButton.Icon>
                            <SymbolIcon Symbol="Filter"/>
                        </AppBarButton.Icon>
                        <AppBarButton.Flyout>
                            <Flyout>
                                <StackPanel>
                                    <CheckBox x:Name="IncludeCompletedCheckbox" IsChecked="True" Click="FilterCompletedTasks_Clicked">Completed</CheckBox>
                                </StackPanel>
                            </Flyout>
                        </AppBarButton.Flyout>
                    </AppBarButton>
                    <AppBarButton Label="Sort">
                        <AppBarButton.Icon>
                            <SymbolIcon Symbol="Sort"/>
                        </AppBarButton.Icon>
                        <AppBarButton.Flyout>
                            <Flyout>
                                <StackPanel Orientation="Vertical">
                                    <RadioButton x:Name="SortMethod_Unsorted" GroupName="SortOptions" IsChecked="True" Click="SortTasks_Clicked">Unsorted</RadioButton>
                                    <RadioButton x:Name="SortMethod_ByTitle" GroupName="SortOptions" Click="SortTasks_Clicked">By Title</RadioButton>
                                </StackPanel>
                            </Flyout>
                        </AppBarButton.Flyout>
                    </AppBarButton>
                </StackPanel>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <AppBarButton x:Name="loginSyncButton" Label="Login" Click="LoginSync_Clicked">
                        <AppBarButton.Icon>
                            <SymbolIcon Symbol="Sync"/>
                        </AppBarButton.Icon>
                    </AppBarButton>
                </StackPanel>
            </Grid>
        </AppBar>

Note that I’ve changed the internals of my AppBar. It’s now a grid with two stackpanels – the second stack panel is right justified. I’ve wired up an event handler called LoginSync_Clicked() that is implemented in the code-behind file:

        private async void LoginSync_Clicked(object sender, RoutedEventArgs e)
        {
            if (user == null)
            {

                try
                {
                    user = await App.MobileService.LoginAsync(MobileServiceAuthenticationProvider.MicrosoftAccount);
                    loginSyncButton.Label = "Sync";
                }
                catch (MobileServiceInvalidOperationException ex)
                {
                    System.Diagnostics.Debug.WriteLine(String.Format("Mobile Services Error: {0}", ex.Message));
                    user = null;
                    var dialog = new MessageDialog(ex.Message);
                    dialog.Commands.Add(new UICommand("OK"));
                    await dialog.ShowAsync();
                }
            }
            else
            {
                // Sync Action
                System.Diagnostics.Debug.WriteLine("MobileServices Sync");
            }
        }

The code here is ripped directly from the QuickStart tutorial for Authentication in Azure App Service Mobile Apps. You will need to add WindowsAzure.MobileServices as a NuGet package and select 2.0.0-beta-2. To get that, ensure “Include prerelease” is checked:

11032015-1

The variable user is a private variable defined at the top of the class:

private MobileServiceUser user = null

Finally, There is a variable in that code – App.MobileService – that appears in App.xaml.cs like this:

        // Reference to the Mobile Service Client connection
        public static MobileServiceClient MobileService = new MobileServiceClient(
            "https://ahall-mobile-nodebackend.azurewebsites.net",
            "https://ahall-mobile-nodebackend-gateway.azurewebsite.net",
            ""
        );

There are two URIs here – the URI for your mobile backend and the URI for the Authentication Gateway. You get those from the Azure Portal.

Creating a Mobile Backend in Azure

I have a fairly simple mobile backend right now. You can find the code on my blog post or with the Azure blog announcement. It actually does not matter if you have the Mobile API implemented or not for authentication – you just need something. In my case, I’ve created a mobile backend called ahall-mobile-nodebackend – it gets a URI from the portal and I’ve put that into the first argument of the MobileServiceClient() constructor call.

To create the gateway, open up your web app in the Azure Portal, click on Settings and then Mobile Authentication:

11032015-2

This will pop up a request to create the gateway. Do that by clicking on Create. Note that the site will close and you will be sitting at the top level page again. Resist the urge to go do it again. THe process is in progress and you can monitor the creation using the notifications area. Only go back when you see it has finished. Mine took only 2 minutes, so it isn’t a long time (unless you are waiting for it). When you go back in, you will see the five valid authentication schemes – Microsoft Account, Google, Facebook, Twitter and Azure Active Directory. I’m using the Microsoft Account for my application.

You need to get a Client ID and Client Secret for each authentication mechanism you choose. When I was using Auth0, they had developer keys already implemented so I could bypass this step. I’m using the Microsoft Account since this is the quickest of the set. I’m already a developer, so I just need to create the keys. Each authentication provider within the Azure Portal has a “how to set this up” link.

First off, copy your Redirect URL – you will need it. The redirect URL is in the Identity provider:

11032015-3

There is a convenient copy button next to it. Now, go to the Microsoft Account Developer Portal to register an application. If this is your first app, you will be presented with the create an application screen directly. Otherwise you will have to click on “Create an application” to see it:

11032015-4

Enter a name (I called mine “Quickstarts.UWP” and click on I accept. On the next screen, click on API Settings. Set “Mobile or desktop client app” to Yes and fill in the Redirect URL (you copied it earlier, right?) then click on Save.

11032015-5

Now click on App Settings. You will see the Client ID and Client Secret. The Client Secret should be protected (don’t check it into code).

11032015-6

Cut and paste the Client ID and Client Secret into the Identity Settings page on the Azure Portal in the appropriate fields. Remember to click on Save to save those settings.

Wrap Up

This turned out to be a lot easier than I thought. I was primarily worried about how my application would present the login screen and registering an app for a client ID and secret – it turned into a non-event. The Azure App Service Mobile Apps code to authenticate is easy. Just make sure you are using the latest SDK (v2.0.0-beta-2 right now) and follow the QuickStart tutorial.

And as always, you can get the code on my GitHub Repository.