Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Login dialog for Windows Phone apps

From Wiki
Jump to: navigation, search

Certain applications may need access control because of the sensitive data they store. This article shows how to create a login dialog for protected access to this application/data.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone SDK 7.1
Compatibility
Platform(s): Windows Phone 7.5 and later
Windows Phone 8
Windows Phone 7.5
Article
Keywords: popup dialog, login dialog, password, authentication
Created: influencer (19 Oct 2012)
Last edited: hamishwillee (15 Jul 2013)

Introduction

Implementing a login dialog as a page in Windows Phone poses a problem: it's a bit difficult to get the navigation stack in order and fulfill the store requirements regarding navigation. This is partly because there is no method to exit an app in case of a wrong password. It's necessary to remove the login page from the page stack (using NavigationService.RemoveBackEntry, a method added in Mango) so that the app can be ended without going over the login page again when pressing the back button.

Solution

An easier way is to use a dynamically created popup on top of the main page.

Loginscreen.png

As illustrated below, the popup is created in the Loaded handler of the page:

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
if (!app.IsAuthenticated)
{
p = new Popup();
LayoutRoot.Children.Add(p);
ApplicationBar.IsVisible = false;
 
// Set where the popup will show up on the screen.
p.VerticalOffset = 60;
p.HorizontalOffset = 25;
 
Border border = new Border();
border.BorderBrush = new SolidColorBrush(Colors.White);
border.BorderThickness = new Thickness(5.0);
 
StackPanel panel1 = new StackPanel();
panel1.Background = new SolidColorBrush(Colors.Black);
panel1.Width = LayoutRoot.ActualWidth - 2 * p.HorizontalOffset;
 
Button button1 = new Button();
button1.Content = "OK";
button1.Margin = new Thickness(5.0);
button1.Click += new RoutedEventHandler(loginbutton_Click);
TextBlock textblock1 = new TextBlock();
textblock1.TextWrapping = TextWrapping.Wrap;
if (app.FirstRun)
textblock1.Text = "Please enter your choice of a password:";
else
textblock1.Text = "Please enter your password";
textblock1.Margin = new Thickness(5.0);
textblock1.FontSize = 30;
textblock1.Foreground = new SolidColorBrush(Colors.White);
pb = new PasswordBox();
pb.KeyDown += new KeyEventHandler(pb_KeyDown);
panel1.Children.Add(textblock1);
panel1.Children.Add(pb);
if (app.FirstRun)
{
TextBlock textblock2 = new TextBlock();
textblock2.TextWrapping = textblock1.TextWrapping;
textblock2.Margin = textblock1.Margin;
textblock2.FontSize = textblock1.FontSize;
textblock2.Foreground = textblock1.Foreground;
textblock2.Text = "Please repeat the password";
pb2 = new PasswordBox();
panel1.Children.Add(textblock2);
panel1.Children.Add(pb2);
}
panel1.Children.Add(button1);
border.Child = panel1;
 
// Set the Child property of Popup to the border
// which contains a stackpanel, textblock and button.
p.Child = border;
 
// Open the popup.
p.IsOpen = true;
pb.Focus();
}
else
// Set the data context of the listbox control to the sample data
DataContext = App.ViewModel;
}

The evaluation of the password happens in the login (OK) button handler, shown below. Please note that not matching password on the first run let the user reenter again.

private void loginbutton_Click(object sender, RoutedEventArgs e)
{
// Close the popup.
p.IsOpen = false;
if (app.FirstRun)
{
if (!pb.Password.Equals(pb2.Password))
{
MessageBox.Show("The passwords do not match. Please try again.");
p.IsOpen = true;
pb.Password = "";
pb2.Password = "";
pb.Focus();
return;
}
app.PwdHash = CryptoUtil.GetHashCode(pb.Password);
app.IsAuthenticated = true;
app.FirstRun = false;
App.ViewModel.LoadData();
}
else
app.IsAuthenticated = CryptoUtil.GetHashCode(pb.Password).CompareTo(app.PwdHash) == 0;
 
if (app.IsAuthenticated)
{
DataContext = App.ViewModel;
ApplicationBar.IsVisible = true;
}
else
{
tb = new TextBlock();
tb.Text = "Wrong password.";
tb.FontSize = 36;
tb.Foreground = new SolidColorBrush(Colors.Red);
tb.Margin = new Thickness(12);
tb.SetValue(Grid.RowProperty, 2);
LayoutRoot.Children.Add(tb);
ApplicationBar.IsVisible = true;
(ApplicationBar.MenuItems[0] as ApplicationBarMenuItem).IsEnabled = false;
 
DataContext = null;
}
}

Pressing the enter key on the password box imitates clicking the login button.

void pb_KeyDown(object sender, KeyEventArgs e)
{
if (e.Key == Key.Enter) // Enter equal OK button
loginbutton_Click(this, new RoutedEventArgs());
}

When the Back hardware key is pressed and the popup is open, the password check has to be executed.

private void PhoneApplicationPage_BackKeyPress(object sender, System.ComponentModel.CancelEventArgs e)
{
if (p.IsOpen)
{ // if the popup is still there... emulate OK button click
loginbutton_Click(this, new RoutedEventArgs());
e.Cancel = true;
}
}

During the first run of the app a password is queried from the user. The password itself is not stored in the application, rather it's hash code is stored. On successive occasions, the hash for the entered password is calculated and compared to the stored hash value. See How to encrypt your application data in Windows Phone.

Sample Code

The code for the login dialog has been added to the Media:EncryptionSample.zip sample from the How to encrypt your application data in Windows Phone article.

This page was last modified on 15 July 2013, at 11:27.
924 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×