Einmalige Anmeldung und SkyDrive für Ihre Windows 8-Apps mit dem Live SDK

Entwicklerblog für Windows 8-Apps

Ein Einblick in die Entwicklung von Apps im Metro-Stil – präsentiert vom Windows 8-Entwicklerteam

Einmalige Anmeldung und SkyDrive für Ihre Windows 8-Apps mit dem Live SDK

  • Comments 0

Mithilfe der Cloud können Benutzer von Windows 8 geräteübergreifend arbeiten und spielen. Wenn Sie sich an einem PC oder anderem Gerät mit einem Microsoft-Konto anmelden und die Vorteile des kostenlosen persönlichen Speichers auf SkyDrive nutzen (weitere Informationen finden Sie unter Verbinden von Apps, Dateien, PCs und Geräten mit der Cloud über SkyDrive und Windows 8), stehen Ihnen Ihre Apps, Einstellungen und persönlichen Dateien jederzeit zur Verfügung. App-Entwickler können von diesen Funktionen der Cloud profitieren, indem das Live SDK in ihre Apps im Metro-Stil integrieren.

Das Live SDK bietet einige Steuerelemente und APIs, mit denen die einmalige Anmeldung (Single Sign-On, SSO) bei Microsoft-Konten sowie Zugriffsinformationen aus SkyDrive, Hotmail und Messenger in Apps für die Consumer Preview integriert werden können. Es gibt auch ein entsprechendes SDK für Windows Phone, das über die gleichen Funktionen verfügt.

Erste Schritte mit dem Live SDK

Wenn nicht bereits erfolgt, müssen Sie zunächst die Windows 8 Consumer Preview ,Visual Studio 11 Beta und die Live SDK Developer Preview auf dem PC installieren. Anschließend müssen Sie die Website zur App-Verwaltung für Live Connect aufrufen, um Ihre App im Metro-Stil für den Zugriff auf unsere Cloud-Dienste zu konfigurieren.

Nach dem Konfigurieren Ihrer App müssen Sie einen Verweis auf das Live SDK hinzufügen. Das Live SDK steht für die Entwicklung in C#, JavaScript und Visual Basic zur Verfügung. C++ wird derzeit vom Live SDK nicht unterstützt. Sie können jedoch das vollständige Codebeispiel SkypadCpp herunterladen, in dem der Zugriff auf SkyDrive über eine C++-App erläutert wird.

Klicken Sie zum Hinzufügen des Live SDKs zu einem Projekt mit der rechten Maustaste auf das Projekt, und wählen Sie „Verweis hinzufügen“, „SDK-Erweiterungs“ und anschließend den Eintrag für das Live SDK aus.

Bei einer JavaScript-App müssen Sie folgenden Skriptverweis zu „default.html“ hinzufügen:

<script type="text/javascript" src="ms-appx:///LiveSDKHTML//js/wl.js"></script>

Fügen Sie diesen Verweis in C# hinzu:

using Microsoft.Live;

In Visual Basic genügt die Importanweisung:

Imports Microsoft.Live

Die einmalige Anmeldung und das Paradox der einfachen Anmeldung

Einer der Hauptvorteile der Integration des Live SDKs in Apps ist die Möglichkeit, die einmalige Anmeldung (SSO) für Microsoft-Konten zu aktivieren. Eine besondere Herausforderung für Apps liegt darin, dass Benutzer nicht wiederholt zur Anmeldung bei neuen Konten oder bei Apps und Websites aufgefordert werden möchten. Die Benutzerfreundlichkeit wird jedoch gesteigert, wenn bei der Anmeldung eines Benutzers bei einer App oder Website die App den Benutzer erkennt und so entsprechende Personalisierungsmaßnahmen getroffen werden können. Dieser wesentliche Gegensatz wird als das Paradox der einfachen Anmeldung bezeichnet.

Unter Windows 8 wird dieses Paradox bei Apps im Metro-Stil und Websites von Microsoft durch die Tatsache vermieden, dass sich Benutzer von Windows 8 an ihren PCs mit dem Microsoft-Konto anmelden. Apps von Microsoft, wie Kontakte, E-Mail und Messaging, und Microsoft-Websites, z. B. Hotmail, nutzen das Microsoft-Konto, sodass für Benutzer, die bereits am PC angemeldet sind, die erneute Anmeldung entfällt. Dies ermöglicht die Sofortanmeldung.

Apps und Websites können mithilfe des Live SDKs ebenfalls Microsoft-Konten zur Sofortanmeldung verwenden. Beachten Sie jedoch, dass Benutzer der App einmalig die Genehmigung erteilen müssen, auf ihre Identität zuzugreifen.

Auch wenn Sie bereits über ein Benutzerkontensystem verfügen, können Sie das Identitätssystem mit den Microsoft-Konten verbinden, um den Benutzern eine nahtlose Anmeldung zu ermöglichen. Am besten funktioniert dies mit einer App im Metro-Stil und einer Website, da sich Benutzer nach dem Herstellen einer Verbindung mit der App oder Website nicht erneut anmelden müssen, solange Sie am PC mit einem Microsoft-Konto angemeldet sind.

Ein Prinzip des Live SDKs ist es, dass der Code immer der gleiche bleibt, egal, ob Sie eine Web-App oder eine Windows 8-App erstellen. D. h., der JavaScript-Code für die Benutzeranmeldung und den Zugriff auf das jeweilige Profil ist bei mit JavaScript erstellten Apps im Metro-Stil der gleiche wie bei Websites, bei denen das Live SDK für Websites eingesetzt wurde. Der folgende Codeausschnitt funktioniert mit minimalen Änderungen sowohl im Web als auch in einer App im Metro-Stil. Der Unterschied beim Code einer Web-App und einer App im Metro-Stil besteht darin, dass der Aufruf von WL.init eine Client-ID erfordert, die im Web angegeben werden muss, wohingegen dieser Wert unter Windows 8 automatisch aus der ID der aktuellen App abgerufen wird, die das Betriebssystem bereitstellt.

WL.init();
WL.getLoginStatus().then(function (response) {
onSessionChange(response);
});

function onSessionChange(response) {
var session = WL.getSession();
if (!session) {
WL.Event.subscribe("auth.login", onLoginComplete);
WL.ui({
name: "signin",
element: "signinbutton",
scope: ["wl.signin", "wl.skydrive"],
});
}
else {
greetUser();
}
}

function onLoginComplete() {
var session = WL.getSession();
if (!session.error) {
greetUser();
}
};

function greetUser() {
WL.api({
path: "/me",
method: "get"
}
).then(
function (result) {
document.getElementById("meName").innerText = "Welcome, " + result.name;
getUserPicture ();
});;
};

function getUserPicture() {
var session = WL.getSession();
var LiveConnectAPIUrl = "https://apis.live.net/v5.0";
document.getElementById("meImg").src = LiveConnectAPIUrl +
"/me/picture?return_ssl_resources=true&access_token=" + session.access_token;
document.getElementById("meImg").style.visibility = "visible";
};
;

In diesem Codebeispiel wird überprüft, ob der Benutzer derzeit mit dem Microsoft-Konto angemeldet ist. Falls ja, wird der Benutzer begrüßt. Unter Windows 8 wird mit diesem Code überprüft, ob der Benutzer bei einem PC angemeldet sind, während im Web geprüft wird, ob er bei einer Website angemeldet ist, die Microsoft-Konten unterstützt, z. B. Hotmail oder SkyDrive. Wenn der Benutzer nicht angemeldet ist, wird im Beispiel eine Anmeldeschaltfläche erstellt, durch die der Benutzer dazu aufgefordert wird, der App die Berechtigung zum Anmelden (WL.signin) und den Lesezugriff für SkyDrive (WL.skydrive) zu erteilen. Wenn der Benutzer auf die Schaltfläche klickt, wird er dazu aufgefordert, sich mit einem Microsoft-Konto am PC anzumelden, falls dies noch nicht geschehen ist. Anschließend muss der App der Zugriff auf die persönlichen Informationen gewährt werden. Nach Bestätigung der Informationen wird der Zugriff der App auf den Namen und das Anzeigebild des Benutzers durch die greetUser()-Methode und die getUserPicture()-Methode aktiviert.

Sie sehen also, dass es durch die Integration des Live SDKs ganz einfach ist, Apps ohne Benutzerkontensystem nahtlos in Microsoft-Konten zu integrieren. Apps, die über ein eigenes Identitätssystem verfügen, können außerdem mithilfe der Benutzerinformationen des Microsoft-Kontos das Anmeldeverfahren per Bootstrap ausführen.

Verwenden der persönlichen Cloud für Apps mit SkyDrive und Hotmail

Unter Windows 8 können Benutzer mithilfe der SkyDrive- und Kontakte-Apps im Metro-Stil auf Dateien in SkyDrive oder Kontakte in Hotmail zugreifen. Beide Apps können problemlos als Datenanbieter in andere Apps im Metro-Stil integriert werden.

Die SkyDrive-App im Metro-Stil fungiert als Anbieter für die Dateiauswahl, d. h. jede beliebige App, die die Dateiauswahl verwendet, kann auch SkyDrive als Speicherort zum Speichern bzw. Öffnen von Dateien nutzen, solange die SkyDrive-App im Metro-Stil installiert ist. In gleicher Weise ist die Kontakte-App ein Anbieter für das Kontaktauswahlfenster und kann als Quelle für Apps fungieren, die Kontakte des Benutzer auswählen müssen.

Auf diese Weise lassen sich Benutzerdaten aus der Cloud abrufen, ohne dass eine tiefgreifende Integration der Cloud-Daten in der App erforderlich ist. In anderen Fällen muss das Live SDK integriert werden, z. B. wenn die App benutzerdefinierten Zugriff auf alle Dateien eines bestimmten Typs im SkyDrive des Benutzers bietet.

Ähnlich, wie derselbe Live SDK-JavaScript-Code auf einer Website und in einer mit JavaScript geschriebenen App im Windows-Metro-Stil funktioniert, gilt dies auch für in XAML erstellte Apps, sowohl für Windows Phone als auch für Windows 8. Der folgende Codeausschnitt funktioniert in der Regel ohne Änderungen auf beiden Plattformen, abgesehen von zwei Hauptunterschieden. Zum einen muss, wie bei dem JavaScript-Beispiel, die Client-ID in der Windows Phone-Version des Codes angegeben werden, wohingegen die Ermittlung in Windows 8 automatisch erfolgt. Zum anderen muss zum Erstellen von asynchronen Methoden für Windows Phone Visual Studio Async CTP verwendet werden.

Anmeldeschaltfläche in XAML

<Controls:SignInButton x:Name="btnSignIn" Content="SignInButton" HorizontalAlignment="Right"
Height="46" Margin="-1,0,6,0" Width="157" Scopes="wl.signin wl.skydrive"
SessionChanged="btnSignIn_SessionChanged" Visibility="Collapsed" />

C#-Hintergrundcode

private void btnSignIn_SessionChanged(object sender, 
Microsoft.Live.Controls.LiveConnectSessionChangedEventArgs e)
{
if (e.Status == LiveConnectSessionStatus.Connected)
{
App.Session = e.Session;
LoadPhotos();
}else
{
btnSignIn.Visibility = Windows.UI.Xaml.Visibility.Visible;
}

}

internal async void LoadPhotos ()
{
LiveConnectClient client = new LiveConnectClient(App.Session);
LiveOperationResult albumOperationResult = await client.Get("me/albums");
dynamic albumResult = albumOperationResult.Result;
foreach (dynamic album in albumResult.data)
{
var group = new SkyDriveAlbum(album.id, album.name, album.name, @"ms-
appx:///Assets/DarkGray.png"
, album.description);
LiveOperationResult pictureOperationResult = await client.Get(album.id + "/files");
dynamic pictureResult = pictureOperationResult.Result;
foreach (dynamic picture in pictureResult.data)
{
var pictureItem = new SkyDriveFileItem(picture.id, picture.name,
picture.name, picture.source, picture.description, picture.description, group);
group.Items.Add(pictureItem);
}
this.ItemGroups.Add(group);
}

}

Durch diesen Codeausschnitt wird die Anmeldeschaltfläche erstellt. Wenn der Benutzer der App die Zugriffsberechtigung auf Daten erteilt, werden Metadaten zum Fotoalbum des Benutzers von SkyDrive abgerufen. Für den Zugriff auf Kontakte und Kalender von Benutzern in Hotmail kann ähnlicher Code verwendet werden.

Codebeispiele

Den vollständigen Code für diesen Blogbeitrag können Sie im Live SDK-Beispielrepository auf GitHub herunterladen. Dieses Repository enthält auch Codebeispiele zum Nutzen des Live SDKs auf einer Vielzahl anderer Plattformen.

Die nächsten Schritte

Jetzt wissen Sie, wie mithilfe des Live SDKs eine nahtlose Integration von Apps in der Cloud erzielt werden kann, wobei dieselben Technologien wie für Apps im Microsoft-Metro-Stil zum Einsatz kommen. Die Integration des Live SDKs in Ihre App bietet zahlreiche Möglichkeiten. Neben der Verbesserung von Registrierung und Anmeldung bei der App können Sie folgende Vorteile nutzen:

  • Erstellen Sie Apps, die vom freien Speicherplatz auf SkyDrive profitieren, indem die Inhalte der Benutzer Ihrer App dort gespeichert und abgerufen werden.
  • Halten Sie das Interesse der Benutzer an Ihrer App wach, indem Sie Ereignisse zu deren Kalender hinzufügen, die für Ihre App oder Website relevant sind.
  • Suchen Sie nach Hotmail-Kontakten von Benutzern, die Ihre App ebenfalls verwenden.
  • Ermöglichen Sie mithilfe des Windows Live Messenger-Netzwerks Datenfreigabe in Echtzeit.

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

  • Loading...
Leave a Comment
  • Please add 8 and 2 and type the answer here:
  • Post