Freigeben über

Schnellstart: Personalisieren der App (HTML)

  • Artikel

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Ihre Windows-Runtime-App mit JavaScript kann das Live SDK verwenden, um auf Informationen aus dem Microsoft-Konto des Benutzers zuzugreifen.

In der App muss sich der Benutzer mit seinem Microsoft-Konto anmelden und zustimmen, dass Ihre App auf seine Daten zugreift. Nachdem der Benutzer sich angemeldet und seine Zustimmung gegeben hat, kann Ihre App auf die Profildaten des Benutzers zugreifen, um die Oberfläche zu personalisieren.

Wichtig  Diese Schnellstartanleitung dient nur zu Demonstrations- und Veranschaulichungszwecken. Wenn Sie dieses Feature in einer App verwenden möchten, die in den Windows Store hochgeladen und an Kunden verteilt werden soll, müssen Sie der App ein Abmeldefeature und ein Anmeldefeature sowie eine Datenschutzrichtlinie hinzufügen. Lesen Sie im Anschluss an diese Schnellstartanleitung das Thema Anforderungen für die Anmeldung mit Microsoft-Konten. Dort erhalten Sie Infos zum Hinzufügen dieser Features.

 

Wichtig  Im Lernprogramm dieses Themas wird eine Windows Store-App veranschaulicht. Sie können auch Microsoft-Dienste zu einer Windows Phone Store-App hinzufügen.

 

Voraussetzungen

Vor dem Entwickeln einer Windows-Runtime-App mit JavaScript, für die Features der Windows Live-Dienste verwendet werden, muss auf dem Entwicklungscomputer die erforderliche Software installiert werden.

  • Die Tools und das SDK für die Entwicklung von Windows Store-Apps (sofern noch nicht installiert). Zu diesen Tools gehören Microsoft Visual Studio und weitere Tools.

  • Live SDK

  • Eine Windows Store-App mit JavaScript

    Hinweis  Der in dieser Schnellstartanleitung enthaltene Code wird der Vorlage Leere App für JavaScript-Projekte in Visual Studio hinzugefügt.

     

Registrieren des Benutzers und Einholen der Erlaubnis für den Zugriff auf dessen Daten

Fügen Sie den Code hinzu, mit dem auf die Features der Windows Live-Dienste zugegriffen wird.

Wenn Ihre App ausgeführt wird, kann sie das Windows-Anmelde-Steuerelement für die Benutzeranmeldung mit dem Microsoft-Konto anzeigen. Nach dem Anmelden werden Benutzer, die ihre Zustimmung für die App noch nicht erteilt haben, aufgefordert, für die App die Erlaubnis zum Zugreifen auf ihre Profilinformationen zu erteilen.

Gehen Sie in Ihrem Projekt wie folgt vor, um Benutzer beim Ausführen der App anzumelden:

  1. Legen Sie einen Verweis auf das Live SDK fest:

    1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf Verweise, und klicken Sie anschließend auf Verweis hinzufügen....
    2. Gehen Sie zu Windows > Erweiterungen, und aktivieren Sie das Kontrollkästchen neben Live SDK. Falls Live SDK nicht in der Liste aufgeführt ist, installieren Sie das Live SDK neu, und wiederholen Sie diese Schritte.
    3. Klicken Sie zum Beenden des Dialogfelds auf OK.

  2. Fügen Sie den Verweis auf die Datei "wl.js" der Live SDK-Datei für die App hinzu. In der Vorlage Leere App für JavaScript-Projekte wird dies Default.html hinzugefügt.

    Fügen Sie im <head>-Tag der App-Hauptcodedatei und oberhalb des Links zur Datei default.js wie folgt ein <script>-Tag hinzu.

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

  3. Fügen Sie im <body>-Tag von default.html den Code hinzu, mit dem Benutzer bei ihrem Microsoft-Konto angemeldet werden und mit dem die Informationen des Benutzers auf dem Bildschirm aktualisiert werden.

    Hinweis  Mit diesem Code wird das Anmelde-Steuerelement des Microsoft-Kontos nicht angezeigt, wenn das Computerkonto des Benutzers seinem Microsoft-Konto zugeordnet ist. In diesem Fall wird die App automatisch angemeldet.

     

    Fügen Sie im <body>-Tag den folgenden Code hinzu.

    <!--This is where the user's info will be written
 after the user has signed in.-->
<label id="info"></label>

<!--This is the script code that will sign the user in
 and display their name.-->
<script>
    // Initialize the Live Connect features.
    //  This should be called from each file that 
    //  uses Live Connect features.
    WL.init();

    // Sign the user into their Microsoft account or connect 
    //  the app to the Microsoft account the user has associated 
    //  with their computer account.
    WL.login({
            scope: ["wl.signin"]
        }).then(
            function (response) {
                onLoginComplete();
            },
            function (loginError) {
                document.getElementById("info").innerText =
                   "Login Error: " + loginError.error + " - " + loginError.error_description;
            }
        );

    // If the user is signed in, then get their profile info
    function onLoginComplete() {
        WL.api({
            path: "me",
            method: "get"
        }).then(
            function (response) {
                // update the display to show the user's name
                document.getElementById("info").innerText =
                    "Hello " + response.name + "!";
            },
            function (infoError) {
                document.getElementById("info").innerText =
                    "Data Request Error: " + infoError.error.message;
            }
        );
    }
</script>

Zusammenfassung und nächste Schritte

In diesem Thema haben Sie erfahren, wie Sie mithilfe von Windows Live-Diensten in Ihrer App auf Benutzerdaten in Microsoft-Clouddiensten wie Outlook.com und Microsoft OneDrive zugreifen können.

Weitere Infos zur Verwendung von Windows Live-Diensten finden Sie in den Themen Anforderungen für die Anmeldung mit Microsoft-Konten und So wird's gemacht: Hinzufügen von Microsoft-Diensten zur App. Darin wird erläutert, wie Funktionen zum An- und Abmelden sowie eine Datenschutzrichtlinie hinzugefügt werden.