Security Credential Picker In UWP With XAML And C#

Credential Picker creates an asynchronous object that displays a dialog box of credentials to the user and collects the user's response. After that, the responses retrieved from Credential Picker are passed to the required APIs.

 

Reading this article, we will learn how to use Credential Picker in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing the UWP app.

1. Windows 10 (Recommended)
2. Microsoft Visual Studio 2017

Step 1

Open Visual Studio 2017 and go to Start -> New Project-> select Windows Universal (under Visual C#) -> Blank App (Universal Windows). Give it a suitable name (such as - UWPCredentialPicker) and click OK.

 

Step 2 

After choosing the target and minimum platform version that your UWP application will support, the project creates App.xaml and MainPage.xaml files.

 

Step 3

Add TextBlock control and change the name and text property for Title.

 

Add the following controls for giving a custom message in Credential Picker.

 

Add a Stackpanel and inside that, add TextBlock, TextBox, Button Controls. Then, change the Name and Text property. 

Add an event for the Launch button for launching the Credential Picker Dialogue box.

 

Step 4

Add the following controls for retrieving the user responses from Credential Picker. 

Add a Stack panel. Inside that, add two TextBlock controls and change the Name and Text properties for Username and Password.

 

Step 5

Now, add the following namespace and code in MainPage.xaml.cs.

using Windows.Security.Credentials.UI;
private async void btnLaunch_Click(object sender, RoutedEventArgs e) {
    if ((Txtmsg.Text.Length != 0)) {
        CredentialPickerResults credPickerResults = await CredentialPicker.PickAsync("test.com", Txtmsg.Text);
        tblUN.Text = "User Name : " + credPickerResults.CredentialUserName;
        tblPWD.Text = "Password : " + credPickerResults.CredentialPassword;
    }
}

Note - Automatically, the following code will be generated in XAML code view while we are done in the design view.

<Page x:Class="UWPCredentialPicker.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPCredentialPicker" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="TblTitle" Margin="59,39,58,0" TextWrapping="Wrap" Text="Credential Picker in UWP " VerticalAlignment="Top" Height="29" FontWeight="Bold" FontSize="20" />
        <StackPanel x:Name="SPcp" HorizontalAlignment="Left" Height="87" Margin="59,73,0,0" VerticalAlignment="Top" Width="243">
            <TextBlock x:Name="TblMsg" TextWrapping="Wrap" Text="Message" Height="23" Margin="0,0,165,0" />
            <TextBox x:Name="Txtmsg" TextWrapping="Wrap" Text="Enter Your Credential Here" />
            <Button x:Name="btnLaunch" Content="Launch" Click="btnLaunch_Click" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="45" /> </StackPanel>
        <StackPanel HorizontalAlignment="Left" Height="228" Margin="10,191,0,0" VerticalAlignment="Top" Width="340">
            <TextBlock x:Name="TblRes" Text="Retrived Data from Credential Picker " TextWrapping="Wrap" FontWeight="Bold" HorizontalAlignment="Center" />
            <TextBlock x:Name="tblUN" TextWrapping="Wrap" Text="User Name " />
            <TextBlock x:Name="tblPWD" Text="Password " /> </StackPanel>
    </Grid>
</Page>

 Step 6

Deploy your app on local machine. The output of the UWPCredentialPicker App is shown below.

 

After clicking the Launch button -

 

After clicking the OK button in Credential Picker -

  

After changing the Message Information -

 

 

Summary

Now, you have successfully tested Credential Picker in Visual C# - UWP environment in Visual Studio 2017.