Vor einigen Monaten habe ich darüber berichtet, wie Sie mit dem Live SDK die einmalige Anmeldung und SkyDrive für Ihre Windows 8-Apps einrichten können. In der Zwischenzeit wurde die Windows 8 Release Preview veröffentlicht, und wir haben festgestellt, dass sich einige Inkonsistenzen bei den Entwurfsmustern bezüglich der Art entwickeln, wie Apps Einstiegspunkte verfügbar machen, an denen die Benutzer sich anmelden, auf Konten zugreifen oder wieder abmelden können.

Um Ihnen bei diesen Entwurfsmustern zu helfen, haben wir einige Richtlinien für Apps zusammengestellt, die das Microsoft-Konto eines Benutzers verwenden. In diesem Beitrag stelle ich Ihnen diese Richtlinien vor und zeige Ihnen an Codebeispielen, wie Sie am besten anfangen.

Es gibt drei grundlegende Szenarien für die Integration der Authentifizierung über Microsoft-Konten in Apps:

  1. Benutzer müssen Sie bei der App anmelden.
  2. Die App kann auch dann verwendet werden, wenn Benutzer nicht angemeldet sind, bietet angemeldeten Benutzern jedoch personalisierte Funktionen.
  3. Die App erfüllt spezifische Aufgaben, die die Anmeldung bei einem Microsoft-Konto erforderlich machen, etwa eine Integration in SkyDrive oder Hotmail.

Sehen wir uns diese drei Szenarien etwas genauer an.

Richtlinien für Apps, bei denen sich Benutzer anmelden müssen

Wenn Ihre App ein Microsoft-Konto als Identitätsanbieter verwendet und erst nach der Anmeldung des Benutzers funktioniert, sollte das Anmeldedialogfeld für das Microsoft-Konto unmittelbar nach dem Start der App angezeigt werden. Apps, die Informationen für einen bestimmten Benutzer erzeugen oder verwalten, wie zum Beispiel die Kontakte-App, gehören in diese Kategorie.

Wenn der Benutzer nicht bereits auf dem PC bei einem Microsoft-Konto angemeldet ist, zeigt die App ein Standardanmeldedialogfeld an.

AnmeldedialogfeldAnmeldedialogfeld.

Wenn der Benutzer bereits auf dem PC bei einem Microsoft-Konto angemeldet ist, wird dieses Dialogfeld nicht angezeigt, da Windows 8 die einmalige Anmeldung unterstützt.

In beiden Fällen muss der Benutzer der App zunächst eine Genehmigung zum Zugriff auf seine Daten erteilen, bevor die App auf die Identität des Benutzers zugreifen kann. Dies ist ein einmaliger Vorgang, den Windows für alle folgenden Verwendungen der App auf allen Geräten und selbst auf Ihrer Website speichert.

Berechtigungsdialogfeld
Berechtigungsdialogfeld.

Zum Anzeigen dieser Dialogfelder rufen Sie beim Starten der App die WL.login-Methode (für JavaScript) oder die Microsoft.Live.LiveAuthClient.Login-Methode (für verwaltete Sprachen wie C#) auf.

JavaScript

WL.Event.subscribe("auth.login", onLoginComplete);

WL.init();

WL.login({

scope: ["wl.signin", "wl.skydrive"],

});

C#

public LiveConnectSession Session
{
get
{
return _session;
}
set
{
_session = value;
}
}

private async void InitAuth()
{
if (!Windows.ApplicationModel.DesignMode.DesignModeEnabled)
{
authClient = new LiveAuthClient();
LiveLoginResult authResult = await authClient.LoginAsync(new List<string>() { "wl.signin", "wl.basic", "wl.skydrive" });

if (authResult.Status == LiveConnectSessionStatus.Connected)
{
this.Session = authResult.Session;
}

}
}

Weitere Informationen zur Benutzeranmeldung mit dem Live SDK finden Sie unter Anmelden von Benutzern.

Richtlinien für Apps, die auch dann funktionieren, wenn Benutzer nicht angemeldet sind, angemeldeten Benutzern jedoch eine personalisierte Funktionen bieten

Einige Apps, zum Beispiel Nachrichten- oder Wetter-Apps, funktionieren auch ohne Benutzeranmeldung sehr gut, lassen sich nach der Anmeldung jedoch vom Benutzer individuell anpassen. Für dieses Szenario ist es empfehlenswert, dass die App dem in diesem Abschnitt beschriebenen Muster folgt. Die App muss den Charm „Einstellungen“ unterstützen und einen Kontenbereich mit einer Anmeldeoption enthalten. Dieser Screenshot zeigt, wie dieses Muster in der Kontakte-App eingesetzt wird.

Kontakte-App mit dem Kontenbereich unter „Einstellungen“
Kontakte-App mit Kontenbereich unter „Einstellungen“

Bei der von uns empfohlenen Benutzerinteraktion klickt der Benutzer erst auf den Charm „Einstellungen“ und anschließend auf „Konten“. Daraufhin wird das Anmeldedialogfeld für das Microsoft-Konto angezeigt.

Um dies zu erreichen, verwenden Sie die Label-Eigenschaft der SettingsCommand-Klasse, um die entsprechende Option anzuzeigen. Nachdem der Benutzer auf diese geklickt hat, verwenden Sie die Invoked-Eigenschaft, um ein SettingsFlyout-Steuerelement anzuzeigen, das die Option zur Anmeldung beim Microsoft-Konto enthält. Weitere Informationen zum SettingsFlyout-Steuerelement finden Sie im Abschnitt „Erstellen Sie Einstellungsflyouts“ in den Richtlinien für App-Einstellungen.

Apps, die nur die Anmeldung bei Microsoft-Konten unterstützen, können sich auf eine Anmeldeoption in den Einstellungen beschränken und benötigen keinen Kontenbereich, da nur ein Konto unterstützt wird. Dieser Screenshot der PhotoBucket-App zeigt eine Anmeldeoption direkt im Bereich „Einstellungen“.

photobucket

PhotoBucket-App mit Anmeldeoption unter „Einstellungen“

Richtlinien für Apps mit spezifischen Aufgaben, die die Anmeldung bei einem Microsoft-Konto erforderlich machen

Bestimmte Apps funktionieren auch ohne Microsoft-Konto, ermöglichen jedoch das Erledigen von Aufgaben, die in Microsoft-Dienste wie Hotmail, SkyDrive oder Messenger integriert sind. Ein Beispiel dafür ist eine benutzerdefinierte Fotobearbeitungs-App mit einer Funktion zum Speichern auf SkyDrive.

Für derartige Apps empfehlen wir, das Anmeldedialogfeld für das Microsoft-Konto dann anzuzeigen, wenn der Benutzer die Aufgabe aufruft, die Sie über die Canvas oder die App-Leiste verfügbar gemacht haben. Das Anmelden des Benutzers ist dann Teil des Klick-Ereignishandlers, und die Aufgabe wird nach der Benutzeranmeldung ausgeführt.

Die folgenden Beispiele zeigen, wie die Anmeldung bei einem Microsoft-Konto und das Anfordern einer Zugriffsgenehmigung für das SkyDrive-Konto eines Benutzers durch Klicken auf eine Schaltfläche in der App-Leiste integriert werden können.

JavaScript

function onAppBarSaveButtonClick()
{
WL.Event.subscribe("auth.login", onLoginComplete);
WL.init();

WL.login({
scope: ["wl.signin", "wl.skydrive_update"],
});
}

C#

private void AppBarSaveButton_Click(object sender, RoutedEventArgs e)
{
InitAuth();
}

private async void InitAuth()
{
if (!Windows.ApplicationModel.DesignMode.DesignModeEnabled)
{
authClient = new LiveAuthClient();
LiveLoginResult authResult = await authClient.LoginAsync(new List<string>() { "wl.signin", "wl.basic", "wl.skydrive_update" });

if (authResult.Status == LiveConnectSessionStatus.Connected)
{
// An APP level property for the session
App.Session = authResult.Session;
}

}
}

Sie können das Aussehen der Schaltfläche in der App-Leiste mithilfe eines Objekts aus den Brandingrichtlinien für Live Connect anpassen.

Richtlinien für die Benutzerabmeldung

Unter Windows 8 können sich Benutzer mithilfe ihres Microsoft-Kontos an einem PC anmelden oder ein Microsoft-Konto verwenden, das mit ihrem lokalen oder Domänenkonto verknüpft ist. In diesem Fall muss Ihre App keine Abmeldeoption zur Verfügung stellen. Es wird aber auch Benutzer geben, die weder mit ihrem Microsoft-Konto an ihrem PC angemeldet sind, noch eines mit ihrem lokalen oder Domänenkonto verknüpft haben. In diesem Fall müssen Sie eine Abmeldeoption bereitstellen, wenn der Benutzer mit einem Microsoft-Konto bei Ihrer App angemeldet ist. Überprüfen Sie hierzu die CanSignOut-Eigenschaft der OnlineIdAuthenticator-Klasse auf die Möglichkeit einer Abmeldung.

Wenn Ihre App mehrere Konten unterstützt, platzieren Sie die Abmeldung im Kontenbereichsflyout, nachdem der Benutzer den Charm „Einstellungen“ aufgerufen hat. Bei Apps, die nur die Anmeldung mit Microsoft-Konten unterstützen, wird die Abmeldung direkt unter „Einstellungen“ platziert.

photobucket2

Zeigen Sie den Namen des angemeldeten Benutzers an, wenn eine Abmeldung nicht zulässig ist. Weitere Informationen zum SettingsFlyout-Steuerelement finden Sie im Abschnitt „Erstellen Sie Einstellungsflyouts“ in den Richtlinien für App-Einstellungen.

Diese Codebeispiele zeigen, wie Benutzer unseren Richtlinien entsprechend abgemeldet werden.

JavaScript

function init()
{
var onlineId = Windows.Security.Authentication.OnlineId.OnlineIdAuthenticator();

If(onlineId.canSignOut)
{
// the sign out button is disabled by default
document.getElementById("btnSignOut").style.visibility = "visible";

}
}

function onLogoutButtonClick()
{
WL.logout();
}
 
C#
LiveAuthClient liveAuthClient;
public SimpleSettingsNarrow()
{
this.InitializeComponent();
liveAuthClient = new LiveAuthClient();

Windows.Security.Authentication.OnlineId.OnlineIdAuthenticator auth = new Windows.Security.Authentication.OnlineId.OnlineIdAuthenticator();

if(auth.CanSignOut)
{
this.btnSignOut.Visibility = Windows.UI.Xaml.Visibility.Visible;
}
}

private void LogoutButton_Click(object sender, RoutedEventArgs e)
{
liveAuthClient.Logout();
}

Rufen Sie die WL.logout- oder die Microsoft.Live.LiveAuthClient.Logout-Methode auf, um einen Benutzer abzumelden.

Einige praktische Tipps

In diesem Blogbeitrag habe ich Ihnen gezeigt, wie Apps die einmalige Anmeldung bei Microsoft-Konten so effektiv nutzen können, wie Windows 8-Benutzer es von Microsoft-Apps im Metro-Stil erwarten.

Außerdem habe ich die empfohlene Methode für die Bereitstellung einer Option zur Abmeldung von Ihrer App erläutert. Zusätzlich zu diesen Richtlinien möchte ich diesen Beitrag mit zwei einfachen praktischen Tipps abschließen, mit denen Sie sicherstellen können, dass Ihre Apps konsistent mit den Apps von Microsoft sind.

  • Zeigen Sie keine anderen Steuerelemente oder Dialogfelder zur An- oder Abmeldung von Benutzern an, als die hier beschriebenen. Indem Sie die Anmeldedialogfelder aus dem Live SDK verwenden, können Sie das Vertrauen Ihrer Kunden darauf stärken, dass Ihre App nicht direkt auf die Anmeldeinformationen ihrer Microsoft-Konten zugreifen kann.
  • Zeigen Sie die An- oder Abmeldeoptionen für das Microsoft-Konto ausschließlich im SettingsFlyout-Steuerelement oder als Teil einer Aufgabe an. Die Benutzer von Apps im Metro-Stil erwarten Kontoverwaltungsoptionen im Charm „Einstellungen“. Die Platzierung an einem anderen Ort kann Benutzer irritieren.

Weitere Informationen zum Live SDK finden Sie in unserer Dokumentation. Laden Sie das Live SDK herunter, und stellen Sie ggf. Fragen in unseren Foren.

– Dare Obasanjo 
   Senior Lead Program Manager, Live Connect Platform