Logo letter

Web Account Shelp


This post describes how to use the AccountsSettingsPane to connect your Universal Windows Platform (UWP) app to external identity providers, like Microsoft or Facebook, using the Windows 10 Web Account Manager APIs. You'll learn how to request a user's permission to use their Microsoft account, obtain an access token, and use it to perform primary operations (like get profile information or upload files to their OneDrive account). The step's are similar for getting user permission and access with any identity provider that supports the Web Account Manager.

Get set up
First, create a new, blank app in Visual Studio.

Second, in order to connect to identity providers, you'll need to associate your app with the Store. To do this, right-click your project, choose Store > Associate app with the store, and follow the wizard's instructions.

Third, create a very basic UI consisting of an easy XAML button and two text boxes. And an event handler attached to your button in the code-behind:
Lastly, add the following namespaces, so you don't have to worry about any reference problems later:

Build the account settings pane
The BuildPaneAsync method is called whenever the AccountsSettingsPane is shown. This is where we'll put the code to customize the commands shown in the pane.

Start by obtaining a deferral. This tells the system to delay showing the AccountsSettingsPane until we're finished building it.
Next, get a provider using the WebAuthenticationCoreManager.FindAccountProviderAsync method. The URL for the provider varies based on the provider and can be found in the provider's documentation. For Microsoft Accounts and Azure Active Directory, it's "https://login.microsoft.com".

Notice that we also pass the string "consumers" to the optional authority parameter. This is because Microsoft gives two different types of authentication - Microsoft Accounts (MSA) for "consumers", and Azure Active Directory (AAD) for "organizations". The "consumers" authority indicates we want the MSA option. If you're developing an enterprise app, use the string "organizations" instead.

Finally, add the provider to the AccountsSettingsPane by creating a new WebAccountProviderCommand like this:
The GetMsaToken method we passed to our new Web Account Help Provider Command doesn't exist, but (we'll build that in the next step), so feel free to add it as an empty method for now.

Run the above code and your pane should look something like this: