Language: HTML | XAML

Schnellstart: Personalisieren der App (HTML)

Applies to Windows and Windows Phone

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

Gehen Sie wie folgt vor:

  • Beginnen Sie mit dem Registrieren der App zur Verwendung von Live Connect im Windows Store.
  • 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 Datenschutzbestimmungen sowie ein Anmeldefeature hinzufügen. Lesen Sie im Anschluss an diese Schnellstartanleitung das Thema Richtlinien für die Microsoft-Kontoanmeldung. Dort erfahren Sie, wie Sie diese Features hinzufügen.

Voraussetzungen

Vor dem Entwickeln einer Windows Store-App mit JavaScript, für die Live Connect-Features 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, für die die Registrierung zur Verwendung von Live Connect durchgeführt wurde.

    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 Live Connect-Features 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 Live Connect in Ihrer App auf Benutzerdaten in Microsoft-Clouddiensten wie Outlook.com und Microsoft OneDrive zugreifen können.

Weitere Informationen zur Verwendung von Live Connect finden Sie in den Themen Richtlinien für die Microsoft-Kontoanmeldung und So wird's gemacht: Verwenden von Microsoft-Diensten in der App. Darin wird erläutert, wie Funktionen zum An- und Abmelden und Datenschutzbestimmungen hinzugefügt werden.

Weitere Informationen dazu, wie die Profildaten des Benutzers von der App genutzt werden können, finden Sie unter Abrufen von Benutzerdaten in der Live Connect-Dokumentation.

 

 

Anzeigen:
© 2014 Microsoft