Windows 8: Leveraging the CredentialPicker

Credentials are important

In modern apps, collecting and storing user credentials has become very prevalent. Especially, if your app is leveraging a service or other type of secure resource that requires the user to provide a login. Providing a good, clean and consistent credential experience is very important, in that it gives the user the feeling that you are handling their credentials with the care and security that they deserve. So, in this topic, I will discuss how to implement credential collection using the CredentialPicker API in your Window 8 app.

Collecting user credentials

In the past, on desktop applications and web pages, collecting user credentials was a mixed bag of user experiences. Some developers used the APIs provided in Windows and some rolled their own dialogs for collecting this information. Since one of the core concepts of Windows 8 development is to provide users with a clean, consistent user experience across applications and devices, it would make sense to extend this principle to credentials.

This brings up the CredentialPicker class. This class provides a configurable async dialog that can be used to collect credentials from the user and return them via a CredentialPickerResults object. Once the user has entered the credentials, you can use this object to pass credentials on to your authentication process and then storage, provided the user has opted to save them.

Figure 1: The CredentialPicker UI dialog in action.

Here is the code I used for the above screenshot:

             CredentialPickerOptions options = new CredentialPickerOptions()
            {
                AuthenticationProtocol = AuthenticationProtocol.Basic,
                CredentialSaveOption = Windows.Security.Credentials.UI.CredentialSaveOption.Selected,
                CallerSavesCredential = true,
                Caption = "Basic Login",
                Message = "Please enter your credentials",
                TargetName = "."
            };

            CredentialPickerResults results = await CredentialPicker.PickAsync(options);

            string username = results.CredentialUserName;
            string password = results.CredentialPassword;

            // do something here to check that the credentials work
            bool loginResult = Login(username, password);

As you can see, the CredentialPicker API is a very simple way to collect user credentials using a consistent, asynchronous API.

Test the credentials

The next step is very important, but I won’t go in to any detail here. Once the CredentialPicker returns, be sure to validate the credentials before proceeding. If the validation fails, then alert the user gracefully with meaningful, inline errors. Don’t ruin the great login experience you’re creating by mishandling this very important step.

Store the credentials

If the user chose to have you save their credentials, then you’ll want to store the user name and password somewhere in order to leverage them. Luckily, the WinRT APIs contain a class that will help you with this task. Instead of storing this information in a text file or XML file, go ahead and leverage the PasswordVault class in order to store the credentials in the Windows Credential Manager.

Not only does it save you a little bit of coding, but it provides a safe, consistent way to store credentials and retrieve them later. It also has the bonus of being able to sync credentials across devices to the same Windows Live ID. This means that a user can login on one device and then, through the magic of syncing, there are automatically logged in on any other device running Windows 8.

Comments

• Anonymous
  September 13, 2012
  Hi Jason, I really want to make use of this class, however with the app I'm developing there are 3 pieces of information that a user must enter to be authenticated with the system.  Is there a method of adding a third text input to the CredentialPicker as I don't particularly want to make my own control just because of this. Thanks, Anthony

• Anonymous
  September 19, 2012
  Hi Anthony, I haven't seen any method to add additional input fields to the CredentialPicker UI. I think in this case, you may need to write your own custom control.

• Anonymous
  September 11, 2013
  I would like to validate the credentials entered against my domain.  Any hints on that?

• Anonymous
  September 27, 2013
  Hi Ramsey, Have a look at this session from Build: channel9.msdn.com/.../3-518