Log-In Dialog mit WinRT

Die neue Windows 8 Oberfläche bietet eine klare Übersicht über Ihre Apps und den darin verwalteten Daten. Heute kommen grösstenteils End-User Applikation in den Genuss dieser Features, welche als „Active Tiles“ bekannt sind. Allerdings ist die übersichtliche Ansichten nicht nur für Home-Kunden interessant, sondern auch fürs Business bietet die Windows 8 Style UI Oberfläche, beispielsweise als Ergänzung zum Intranet, reichen Mehrwert.

Besonders solche Intranet-Portale sind häufig mit einem Zugang gesichert. Für solche Applikationen ist ein Log-In Dialog zwingend, falls nicht direkt mit den Windows Credentials (siehe http://msdn.microsoft.com/en-us/library/windows/apps/windows.system.userprofile.userinformation.aspx) gearbeitet werden kann.

Benutzerinformationen für die App

Um Log-In Informationen einzugeben, hat Microsoft im WinRT Framework den CredentialsPicker-Dialog (http://msdn.microsoft.com/en-us/library/windows/apps/Hh701247) entworfen. Über diesen standardisierten Dialog kann der Benutzer seine Credentials eingeben. Der Dialog sieht wie folgt aus:

Der folgende Code zeigt den Dialog an:

private async Task<bool> OpenLoginDialogAsync()
{
CredentialPickerOptions credPickerOptions = new CredentialPickerOptions();
credPickerOptions.Message = „Bitte geben Sie Ihren Namics LDAP login ein.„;
credPickerOptions.Caption = „Namics Login„;
credPickerOptions.TargetName = „https://know.namics.com„;
credPickerOptions.CredentialSaveOption = CredentialSaveOption.Unselected;
credPickerOptions.AuthenticationProtocol = AuthenticationProtocol.Basic;

var credPickerResults = await CredentialPicker.PickAsync(credPickerOptions);

if (credPickerResults.Credential != null)
{
// TODO: Store retrieved data into variables / business layer / …
return true;
}
return false;
}

Die Überschrift sowie die Log-In-Mitteilung an den Client lassen sich anpassen. Gegenwärtig besteht keine Möglichkeit, weitere Texte wie Labels oder Buttons zu konfigurieren.
Der Dialog wird vom Framework modal dargestellt. Falls ein anderes modales Fenster geöffnet wird (beispielsweise der Konfiguration-Dialog), schliesst sich der CredentialPicker automatisch. Es können ungewollte Side-Effects auftreten, welche auf die modale Darstellung zurück zu führen sind – dagegen hilft meist nur eine Nach-Implementation des Dialoges.

CredentialPicker einbinden

Der CredentialPicker soll beim Start der App eingebunden werden. Damit dies realisiert werden kann, bietet WinRT die Möglichkeit eines Splash-Screens (im Beispiel LogInPage genannt). Diese Page wird direkt im App.xaml.cs registriert:

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
if (args.PreviousExecutionState != ApplicationExecutionState.Running)
{
LogInPage extendedSplash = new LogInPage(
args.SplashScreen,
(args.PreviousExecutionState == ApplicationExecutionState.Terminated));
Window.Current.Content = extendedSplash;
}
// Ensure the current window is active
Window.Current.Activate();
}

Zu beachten ist, dass der SuspensionManager mit dem Frame-Management bewusst weggelassen wurde. Andernfalls wäre es möglich, mit dem Back-Button zurück zur LogInPage zu navigieren. Ebenfalls ist so beim Öffnen der App eine unautorisierte Navigation zur letzten geöffneten Ansicht unterbunden.
Die LogInPage selbst ist von LayoutAwarePage abgeleitet. Die Implementation könnte wie folgt aussehen:

/// <summary>
/// The Splash Screen page that is displayed as first page of the app.
/// </summary>
public sealed partial class LogInPage : LayoutAwarePage
{
private bool _appWasTerminated;
public LogInPage(SplashScreen splash, bool appWasTerminated)
{
InitializeComponent();
Loaded  += OnLogInPageLoaded;
}
private async void OnLogInPageLoaded(object sender, RoutedEventArgs e)
{
if (await OpenLoginDialogAsync() /*  see code above */)
{
// TODO: perform validation of provided login data  here;
//       otherwise force user to re-enter  credentials.
}
else
{
Application.Current.Exit();
}
// TODO: load data here… (e.g.  call await DataContext::LoadDataAsync())
await NavigateToInitialPageAsync();
}
private async Task NavigateToInitialPageAsync()
{
// Create a Frame to act as the  navigation ctx and navigate to the first page
Frame rootFrame = new Frame();
Window.Current.Content = rootFrame;
// Associate the frame with a  SuspensionManager key
SuspensionManager.RegisterFrame(rootFrame, „AppFrame„);
if (_appWasTerminated)
{
// Restore the saved session state  only when appropriate
try
{
await SuspensionManager.RestoreAsync();
}
catch (SuspensionManagerException sme)
{
// Something went wrong restoring  state.
// Assume there is no state and  continue
// TODO: Log error here…
}
}
if (rootFrame.Content == null)
{
   // When the navigation stack isn’t  restored navigate to the first page,
            // configuring the new page by  passing required information as a
            // navigation parameter
if (!rootFrame.Navigate(typeof(ItemsPage), „AllGroups„))
{
throw new NavigationException(typeof(ItemsPage), „AllGroups„);
}
}
    // Ensure the current window is  active
Window.Current.Activate();
}
}
Sobald die LogInPage initialisiert und geladen wurde, stellt WinRT den CredentialsPicker dar. Anschliessend navigiert die Prozedur NavigateToInitialPageAsync zur ItemsPage, welche dann mit den Inhalten aus dem Intranet arbeitet.

Fazit

Das richtige Einbinden des CredentialsPickers gestaltete sich als Herausforderung. Es muss darauf geachtet werden, dass während des Log-Ins keine weiteren modalen Dialoge geöffnet werden, da ansonsten mit ungeahnten Side-Effects zu rechnen ist. Ebenfalls muss der CredentialsPicker auf einer Splash-Screen Page aufgerufen werden, um den Log-In zu erzwingen.
WinRT stellt mit dem CredentialsPicker ein einfaches Werkzeug für die Benutzerdaten-Eingabe zur Verfügung. Aufgrund dessen Einfachheit lässt sich der Dialog nicht allen Wünschen gerecht konfigurieren – vor allem sämtliche Texte sollten sich anpassen lassen.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>