Moderne Apps

Authentifizierung und Identität in Windows Store-Apps

Rachel Appel

Eine riesige Anzahl von Apps und Websites erfordern inzwischen irgendeine Form von Anmeldung oder Anmeldeinformationen. Das liegt unter anderem daran, dass viele das Erlebnis anhand der gespeicherten Benutzereinstellungen anpassen. Da so viele Websites und Apps die Anmeldung durch den Benutzer verlangen, muss man das einfach gestalten. In diesem Artikel lernen Sie die Grundlagen der App-Authentifizierung auf der Windows-Plattform durch Aktivieren von Microsoft-Konto oder eine Drittanbieter-Anmeldung kennen sowie ergänzende Authentifizierungsmethoden wie etwa Chipkarte oder biometrische Authentifizierung.

Moderne App-Authentifizierung und Benutzeridentität

In den meisten Fällen ist das Anfordern der Anmeldeinformationen vom Benutzer für diesen eher lästig und kein angenehmes Erlebnis. Deshalb sollte man beim Speichern der Anmeldeinformationen darauf achten, dass der Vorgang sowohl sicher als auch einfach bedienbar ist.

Der Einsatz eines unabhängigen Anbieters für Anmeldeinformationen wie Microsoft-Konto (früher Windows Live ID), Facebook oder OAuth ist eine tolle Möglichkeit, sich auf eine vertrauenswürdige Institution zu stützen, was Verwaltung und Speicherung von Benutzerdaten angeht. Benutzer bekommen dabei eine gleichbleibende, individualisierte Benutzeroberfläche. Außerdem, seien wir ehrlich: Ein Benutzer erinnert einfach nicht alle seine Passwörter, besonders bei Websites und Apps, die er nicht regelmäßig nutzt. Ihn aufzufordern, weitere Anmeldeinformationen zu erstellen und zu erinnern macht das ganze nur schwerer. Das allein kann zu einem Absinken der App Store-Bewertungen führen, also das Gegenteil dessen, was Sie erreichen möchten.

Aus Entwicklerperspektive bedeutet das Speichern der Anmeldeinformationen von Benutzern, dass man mehr Code schreiben sowie Tests und Fehlerkorrekturen durchführen muss als wenn man etwas wie die Facebook-Anmeldung verwendet. Außerdem gibt es da auch das Problem von Sicherheitslücken beim Speichern der Anmeldedaten in einer lokalen Datenbank. Es bedeutet also sowohl für den Benutzer als auch den Entwickler weniger Stress, wenn man eine vertrauenswürdige Institution wie Microsoft, Facebook, Twitter, OAuth oder irgendeinen anderen zuverlässigen Drittanbieter nutzt. Der Service speichert die Anmeldeinformationen des Benutzers sowie private Daten mithilfe angemessener Algorithmen, sodass sie sicher bleiben. Alles, was man dazu unternehmen muss, sind ein paar Aufrufe der API, die dann den harten Teil der Arbeit erledigt.

Das Microsoft-Konto verwenden

Wenn Benutzer das Microsoft-Konto verwenden, erwarten Sie ein Login-Erlebnis, das der Windows-Anmeldung ähnelt und genauso funktioniert. Statt eine eigene Steuerung für die Benutzeroberfläche zum Erfassen der Daten zu erstellen, sollten Sie die verwenden, die zusammen mit den APIs des Microsoft-Kontos bereitgestellt werden. Das macht zum Glück auch das Coding einfacher. Code für Anmeldedaten zu schreiben ist eine langweilige Aufgabe. Sie können und sollten das mit APIs wie denen des Microsoft-Kontos abkürzen.

Wenn eine Anmeldung erforderlich ist, dann zeigen Sie die entsprechende Benutzeroberfläche beim Start der App an. Kann der Benutzer zwischen den Sitzungen angemeldet bleiben oder muss er sich nicht anmelden, dann fügen Sie das den Einstellungen hinzu. Vergessen Sie auch nicht dafür zu sorgen, dass sich der Benutzer abmelden kann. Man vergisst das so leicht, weil so viele Benutzer bei ihren Lieblingswebsites und Apps lieber angemeldet bleiben.

Das kann ein Problem werden wenn jemand sich ein Handy oder ein anderes Gerät ausleiht. Wenn man sich an-, aber nicht abmelden kann, dann kann ein anderer potenziell die App verwenden und sich als die erste Person ausgeben. Andererseits kann die erste Person vielleicht deshalb niemals ihr Gerät verleihen, weil sie sich nicht abmelden kann.

Achten Sie also darauf, den Anmeldestatus dort zu platzieren, wo ihn der Benutzer auf allen Fenstern der App sehen kann. Das muss keine langweilige Textinformation sein. Sie können den Avatar des Benutzers anzeigen oder vielleicht Fotos aus seinem OneDrive-Fotospeicher (wenn Microsoft-Konto eingesetzt wird). Ihrer Kreativität sind keine Grenzen gesetzt, solange der Benutzer seinen Status einfach erkennen und ändern kann. Eine häufig angewandte Technik besteht darin, eine Miniaturansicht oben rechts in der Ecke der App anzuzeigen.

Authentifizierung am Microsoft-Konto

Mit der Authentifizierung am Microsoft-Konto haben Sie ein flüssiges Anmeldeerlebnis für alle Microsoft Live-Dienste bei der Hand wie beispielsweise OneDrive, Outlook.com, ein MSDN-Abonnement, Xbox und sogar Windows 8-Geräte und -Apps.

Damit Sie Dienste verwenden können, die sensible Benutzerdaten enthalten, müssen Sie die App online im Microsoft Dev Center registrieren (bit.ly/1egpvHx). Damit können Sie die Microsoft-Kontodienst in Ihrer App verwenden und Benutzer mit den unterschiedlichen Ressourcen verbinden.

Weil Sie mit Diensten arbeiten, die auf personenbezogene Daten zugreifen, müssen Sie Datenschutzbestimmungen mit der App bereithalten. Falls Sie Hilfe beim Verfassen einer solchen Bestimmung brauchen, können Sie myapppolicy.com oder w8privacy.azurewebsites.net als Hilfe verwenden. Nachdem Sie eine Datenschutzbestimmung erstellt haben, können Sie sie mit einem Einstellungen-Flyout anzeigen.

Und schließlich müssen Sie den Code liefern, mit dem sich die Leute an- und abmelden können. Das erreichen Sie mit einem Flyout-Steuerelement, das eine Anmeldeschaltfläche enthält (die sich nach der Anmeldung in eine Abmeldeschaltfläche verwandelt). Die Schaltflächen rufen Dialogfelder auf, mit denen die jeweiligen Vorgänge für die An- und Abmeldung ausgeführt werden. Abbildung 1 zeigt das XAML, dass ein Konto-Einstellungen-Flyout erzeugt.

Abbildung 1: Dieser Code erstellt das Konto-Einstellungen-Flyout

<SettingsFlyout x:Class="App.Account" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App" xmlns:d="https://schemas.microsoft.com/expression/blend/2008" xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" IconSource="Assets/SmallLogo.png" Title="Konto" d:DesignWidth="346"> <StackPanel x:Name="accountSettings"> <Button x:Name="SignInButton" Click="SignInClick" Content="Sign in" /> </StackPanel> </SettingsFlyout>

Wie Sie sehen können, ist das eine Steuerung mit einer Schaltfläche. Der Benutzer verwendet sie für das Aufrufen der Anmeldeoberfläche. Die übliche Praxis besteht darin, eine Schaltfläche „Anmeldung” in ein Flyout zu verpacken. Mehr über das Erstellen von Einstellungen-Flyouts erfahren Sie in „Verwenden von Steuerelementen und Einstellungen in Windows Store-Apps” (bit.ly/1hy7Fk2). Der Code, mit dem Benutzer vom Click-Ereignis der Schaltfläche „Anmeldung” an der App angemeldet werden, sollte in etwa so aussehen:

private async void SignInButton_Click(object sender, RoutedEventArgs e) { LiveAuthClient authClient = new LiveAuthClient(); LiveLoginResult authResult = await authClient.LoginAsync(new List<string>() { "wl.signin", "wl.basic"  }); if (authResult.Status == LiveConnectSessionStatus.Connected) { // Aufgaben nach der Authentifizierung durchführen } }

Damit wird der Bildschirm „Anmeldung mit Microsoft-Konto” angezeigt (oft auch „login consent page” genannt), wenn sich der Benutzer noch nicht angemeldet hat (siehe Abbildung 2). Wie Sie sehen, ist nicht viel Code für die Umsetzung des Anmeldeprozesses nötig. Sie können Sie Sitzungseigenschaft des LiveAuthClient für die Abfrage des Sitzungsstatus' durch die App verwenden.

Abbildung 2: Der Bildschirm Anmeldung mit Microsoft-Konto

Sie erreichen dieselben Aktivitäten mit HTML und JavaScript, allerdings mit etwas anderen Schritten. Referenzieren Sie zuerst das Windows Live SDK mit dem Befehl Add Reference. Referenzieren Sie dann, wie in der HTLM-Entwicklung üblich, die Skripte mit dem <script> Tag so im HTML-Dokument:

    <script src="///LiveSDKHTML/js/wl.js"></script>

Für die Entwicklung empfiehlt sich allerdings die Debug-Version. In diesem Fall verwenden Sie folgende Referenz:

    <script src="//js.live.net/v5.0/wl.debug.js"></script>

Abbildung 3 enthält den WinJS-Code, mit dem der Benutzer angemeldet wird. Sie müssen WL.init und WL.Event.subscribe zur Initialisierung des Microsoft-Kontos aufrufen sowie ein Ereignis abonnieren, das bei der Anmeldung auftritt. XAML-Apps erfordern keine solche Initialisierung. Im Anmeldeereignis können Sie den Verbindungsstatus anzeigen oder was immer direkt nach der Anmeldung erforderlich ist.

Abbildung 3: Der WinJS-Code, mit dem sich der Benutzer anmeldet

(function () { "use strict"; WL.init(); WL.Event.subscribe("auth.login", loginComplete); document.querySelector("#SignInButton").addEventListener("click", function () { login(); }); function loginComplete() { WinJS.log("Der Benutzer hat sich angemeldet!") } function login() { var session = WL.getSession(); if (session) { WinJS.log("Sie sind bereits angemeldet!") } else { WL.login({ scope: "wl.basic" }).then( function () { // Aufgaben nach der Authentifizierung durchführen }, function (response) { WinJS.log("Could not connect, status = " + response.status); }); } } })();

Der Code in Abbildung 3 macht dasselbe wie sein XAML-Gegenstück – ein Benutzer wird angemeldet. Egal welche Sprache Sie verwenden, die Methode wl.login macht die Weitergabe eines Bereichs erforderlich. Ein Bereich ist eine Berechtigungsebene oder ein Bereich in dem festgelegt ist, wo oder was eine App für den Benutzer tun kann. Wie Sie sich vorstellen können, sind Bereiche vom Benutzer gesteuert. Sie können alles Mögliche tun, solange Sie sich als Benutzer ausgeben, doch die Windows-Runtime zwingt Sie, vor dem Fortfahren die Zustimmung des Benutzers einzuholen.

Web Authentication Broker (OAuth)

Einen zentralisierten und objektiven Drittanbieterdienst für Anmeldeinformationen wie Microsoft Account, Facebook, Twitter, LinkedIn, OAuth und so weiter zu nutzen ist eine gute Authentifizierungsstrategie. Benutzer erinnern sich eher an das Kennwort für eine Website, die sie häufiger besuchen oder lieber nutzen. Einen renommierten Authentifikator bedeutet auch weniger Infrastrukturcode, auf den Sie sich konzentrieren müssen, und mehr Zeit für Geschäftslogik oder die Arbeit an der Benutzeroberfläche.

Web Authentication Broker ist eine Möglichkeit für die einfache Authentifizierung. Mit Web Authentication Broker müssen Sie nicht den Aufwand für die sichere Speicherung der Benutzerdaten betreiben. Stattdessen verschlüsseln Sie alle personenbezogenen Daten ordentlich. Web Authentication Broker ist eine Mischung aus einer App und einem Authentifizierungsanbieter. Der Dienst erlaubt auch Einmaliges Anmelden für mehrere Apps.

Rufen Sie im Code Web Authentication Broker auf und zeigen Sie ein Dialogfeld oder eine Website von einem spezifischen Authentifizierungdienst wie etwa Facebook an (siehe Abbildung 4). Das Dialogfeld ist derselbe Anmeldebildschirm, den der Benutzer normalerweise bei der Anmeldung an der Website oder App des Anbieters sieht. In den meisten Fällen ist eine Anpassung möglich, sodass er sich als natürliches Element Ihrer App anfühlt.

Abbildung 4: Anmeldung mit Web Authentication Broker

async public Task<string> WebAuthenticate(){ string startURL = "https://<providerendpoint>?client_ id=<clientid>&scope=<scopes>&response_type=token"; string endURL = "http://<appendpoint>"; System.Uri startURI = new System.Uri( "https://<providerendpoint>?client_ id=<clientid>&scope=<scopes>&response_type=token"); System.Uri endURI = new System.Uri( "http://<appendpoint>"); string result; try { var webAuthenticationResult = await WebAuthenticationBroker.AuthenticateAsync( WebAuthenticationOptions.None, startURI, endURI); switch (webAuthenticationResult.ResponseStatus) { case WebAuthenticationStatus.Success: result = webAuthenticationResult.ResponseData.ToString(); break; case WebAuthenticationStatus.ErrorHttp: result = webAuthenticationResult.ResponseErrorDetail.ToString(); break; default: result = webAuthenticationResult.ResponseData.ToString(); break; } } catch (Exception ex) { result = ex.Message; } return result; }

Chipkartenauthentifizierung

Microsoft verwendet seit Langem Chipkarten für die Authentifizierung von VPN-Verbindungen in Firmennetzwerke. Sie sorgen auch für sicheren Zugang zu Gebäuden und Unternehmensressourcen. Jetzt können Sie Chipkarten auch einfach in Ihre Software einbeziehen. Der Namespace Windows.Devices.SmartCards enthält Klassen wie SmartCard und SmartCardConnection, mit denen Sie Code für Authentifizierung und Verwaltung von Chipkarten schreiben können. Chipkarten scheinen vielleicht kompliziert, sind es aber nicht. Wenn Sie überprüfen möchten, welche Karten derzeit im Lesegerät sind, können Sie beispielsweise Code wie den folgenden schreiben:

string selector = SmartCardReader.GetDeviceSelector(); DeviceInformationCollection devices = await DeviceInformation.FindAllAsync(selector); foreach (DeviceInformation device in devices) { SmartCardReader reader = await SmartCardReader.FromIdAsync(device.Id); IReadOnlyList<SmartCard> cards = await reader.FindAllCardsAsync(); }

Beachten Sie, dass Windows.Devices.DeviceInformation die Informationen über jedes Gerät abruft. In Windows ist das eine Standardmethode für die Hardwareabfrage. Die Windows-Runtime zeigt viele der Objekte, die mit Hardware kommunizieren und die bisher für .NET-Entwickler nicht zur Verfügung standen.

Biometrische Authentifizierung

Auch wenn eine andere Form der Authentifizierung neben der standardmäßigen Technik von Benutzername und Kennwort unwahrscheinlich ist, weil viele Geräte und Maschinen die Hardware nicht unterstützen, können Sie einen gespeicherten und registrierten Fingerabdruck für das Lesen von Software verwenden. Das ist eine tolle Funktionen und sehr hilfreich für jeden, der barrierefrei arbeiten muss.

Denken Sie etwa an den Laptop Lenovo Carbon Touch X1. Dieses Modell hat einen Fingerabdruckleser, der im Bereich der Tastatur eingebaut ist. Mit der biometrischen Authentifizierung von Windows 8 können Sie diese Methode verwenden. Abbildung 5 zeigt den Code, den man dafür verwendet.

Abbildung 5: Authentifizierung mit Fingerabdruck

var availability = await UserConsentVerifier.CheckAvailabilityAsync(); if (UserConsentVerifierAvailability.Available) { var consentResult = await UserConsentVerifier.RequestVerificationAsync(userMessage); } var consentResult = await UserConsentVerifier.RequestVerificationAsync(userMessage); switch (consentResult) { case UserConsentVerificationResult.Verified: returnMessage = "Fingerabdruck bestätigt."; break; case UserConsentVerificationResult.DeviceBusy: returnMessage = "Biometrisches Gerät ist beschäftigt."; break; case UserConsentVerificationResult.DeviceNotPresent: returnMessage = "Es wurde kein biometrisches Gerät gefunden."; break; case UserConsentVerificationResult.NotConfiguredForUser: returnMessage = "Der Benutzer hat keine registrierten Fingerabdrücke."; break; case UserConsentVerificationResult.RetriesExhausted: returnMessage = "Zu viele Fehlversuche."; break; case UserConsentVerificationResult.Canceled: returnMessage = "Authentifizierung mit Fingerabdruck abgebrochen."; break; default: returnMessage = "Authentifizierung mit Fingerabdruck ist derzeit nicht verfügbar."; break; }

Der Code in Abbildung 5 zeigt ein Modales Dialogfeld, ganz ähnlich wie das in Abbildung 2, außer dass dieses den Benutzer dazu auffordert, den Finger auf dem biometrischen Gerät zu scannen, während CheckAvailabilityAsync aufgerufen wird. Wenn der Benutzer seinen Finger scannt, können Sie das Zustimmungsergebnis abfragen und sehen, ob der Scan verifizierbar war.

Abmelden

Mithilfe von Microsoft-Konto können Sie ein funktionsreiches und gleichbleibendes Erlebnis schaffen, das nahtlos in Windows 8 integriert ist. Sie haben jetzt eine Vielzahl von Authentifizierungsanbietern, die Sie anstelle von Eigenentwicklungen verwenden sollten. Ob Sie nun Twitter, Facebook oder Microsoft verwenden: Die Herausforderungen und Probleme mit der sicheren Verwaltung persönlicher Benutzerdaten sind bereits gelöst. Diese Anbieter halten ihre Sicherheit auf dem neuesten Stand. Damit wird die Validierung durch renommierte Drittanbieter zur besten Wahl für die moderne Authentifizierung an Apps.

Soweit es kein absolutes Muss ist sollten Sie also keine eigenen Algorithmen für die Speicherung privater Benutzerdaten schreiben. Verwenden Sie einen Dienst wie Credential Locker, wenn Sie diese Informationen speichern müssen. Mit Credential Locker haben Sie die Anmeldeinformationen der Benutzer sicher im Griff. So erhält die App eine sichere Möglichkeit für die automatische Anmeldung eines Benutzers in anwendungsübergreifenden Sitzungen, denn die Anmeldeinformationen befinden sich Tresor, mit dem Roaming möglich ist.

Roaming ist eine Must-have-Funktion, wenn Ihre App auf mehreren Geräten läuft (wie etwa Tablet und Handy). Mit Credential Locker können Sie Anmeldeinformationen sicher wegschließen und sie dennoch zwischen den Versionen Ihrer App weitergeben sowie auch an soziale Netzwerke und andere externe Websites. Außerdem müssen Sie nicht die Infrastruktur zu Speichern der Benutzerdaten vorhalten. Weitere Details zu Credential Locker finden Sie auf bit.ly/1qFxfmG.

Mit ergänzender Authentifizierung wie Biometrik haben Sie mit Sicherheit die am besten bewerteten Apps im Store. Die Benutzeroberfläche ist modern, einfach zu bedienen und ist mit allen Schikanen ausgestattet. Nicht alle Geräte haben genau dieselbe Authentifizierungsperipherie. Verlassen Sie sich also nicht auf Dinge wie Biometrie als alleiniges Mittel für die Authentifizierung.

Rachel Appel ist Beraterin, Autorin, Mentorin und frühere Microsoft-Mitarbeiterin mit über zwanzigjähriger Erfahrung in der IT-Branche. Sie nimmt an wichtigen Branchenkonferenzen wie Visual Studio Live!, DevConnections und MIX als Rednerin teil. Ihr Fachbereich ist die Entwicklung von Lösungen, bei denen geschäftliche und technologische Aspekte in Einklang gebracht werden und in denen führende Microsoft- und offene Webtechnologien zum Einsatz kommen. Besuchen Sie Rachel Appel auf ihrer Website unter rachelappel.com.

Unser Dank gilt dem folgenden technischen Experten von Microsoft für die Durchsicht dieses Artikels: Frank La Vigne