So wird’s gemacht: Hinzufügen von Microsoft-Diensten zur App (HTML)

Artikel
12/12/2015

[ 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]

In diesem Thema wird beschrieben, wie Sie Ihrer Windows-Runtime-App Features von Microsoft-Diensten hinzufügen, damit sie auf die Profilinformationen von Benutzern, Dateien und Fotos auf Microsoft OneDrive sowie Outlook.com-Informationen zugreifen kann. Bei den ersten Schritten dieses Lernprogramms wird eine leere App verwendet, der dann die Features zum Anmelden am Microsoft-Konto eines Benutzers und zum Abrufen seiner Profilinformationen zur Anzeigen in der App hinzugefügt werden.

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. Da die Windows Phone-Benutzeroberfläche jedoch Flyouts nicht unterstützt, müssen Sie Seiten in einer Windows Phone Store-App verwenden, um die Features für die Flyouts in diesem Thema zu implementieren.

Wissenswertes

Technologien

Voraussetzungen

Windows 8
Microsoft Visual Studio
Live SDK
Windows Store-Entwicklerkonto
Zwei Bilddateien (PNG-Format) zur Verwendung in der App

Anweisungen

Schritt 1: Erstellen eines leeren App-Projekts und Einbinden des Live SDK

Erstellen Sie die neue App wie folgt mithilfe einer Visual Studio-Vorlage:

Klicken Sie in Visual Studio im Menü Datei auf Neues Projekt....
Navigieren Sie im Dialogfeld Neues Projekt... zu Installiert > Vorlagen > JavaScript > Windows Store.
Wählen Sie Leere App.
Geben Sie den Namen und Speicherort für die neue App ein, und klicken Sie auf OK.
Erstellen und testen Sie Ihre App. Nach dem Starten sollte eine leere Seite mit dem Text "Content goes here" (Inhalt hier einfügen) angezeigt werden. Wenn diese Seite angezeigt wird, können Sie die App schließen und fortfahren.

Schritt 2: Hinzufügen der App zum Windows Store-Entwicklerkonto

Damit die App die Clouddienste verwenden kann, auf die vom Live SDK zugegriffen wird, muss sie im Windows Store-Entwicklerkonto registriert sein. Sie müssen die App nicht zur Zertifizierung an den Windows Store übermitteln. Sie müssen lediglich einen Namen im Windows Store-Entwicklerkonto eingeben.

Schritt 3: Hinzufügen der App-Daten und Einstellungen-Flyouts

Mit einer Windows Store-App, die das Live SDK nutzt, müssen mindestens die beiden folgenden Funktionen möglich sein:

Benutzer müssen sich an ihrem Microsoft-Konto an- und abmelden können (falls zutreffend).
Es muss eine Datenschutzrichtlinie angezeigt werden, in der Sie erläutern, wie Sie für den Schutz der persönlichen Daten sorgen, auf die mit Ihrer App zugegriffen wird.

Weitere Infos zur Gestaltung der An- und Abmeldung und zur Datenschutzrichtlinie finden Sie unter Anforderungen für die Anmeldung mit Microsoft-Konten.

In einer Windows Store-App wird darauf über Einstellungen-Flyouts zugegriffen.

Gehen Sie wie folgt vor, um der App Flyouts hinzuzufügen:

Erstellen Sie die Flyout-Seite Konto.

Erstellen Sie einen neuen Ordner für die Dateien des Flyouts Konto. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen, und wählen Sie Hinzufügen und anschließend Neuer Ordner.
Benennen Sie den neuen Ordner in account um.
Klicken Sie mit der rechten Maustaste auf den Ordner account, und wählen Sie Hinzufügen und Neues Element....
Navigieren Sie im Dialogfeld Neues Element hinzufügen zu Installiert > JavaScript > Windows Store, und wählen Sie Seitensteuerelement.
Geben Sie im Feld Name den Text "account.html" ein, und klicken Sie auf Hinzufügen.

Passen Sie die neuen Dateien für Ihre App an.

Ersetzen Sie das <div>-Element in der Datei account.html durch diesen Code.

 <div id="account" data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{width: 'narrow'}">
    <div class="SettingsPane">
        <div class="win-label">
            <button onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton">
            </button>
            <span class="SettingsTitle">Account</span>
        </div>
        <article class="SettingsContent">
            <p id="accountPrompt"></p>
        </article>
        <div>
            <!-- define one button to sign in and another to sign out, but show only  -->
            <!-- one at a time, depending on whether the user is currently signed in or not. -->
            <button id="signInBtn" onclick="signInCmd()" style="display: none">Sign in</button>
            <button id="signOutBtn" onclick="signOutCmd()" style="display: none">Sign out</button>
        </div>
     </div>
</div>

Fügen Sie den folgenden Code am Ende der Datei account.css hinzu.

.account p {
    margin-left: 120px;
}

.SettingsPane {
    margin-top:36px;
    margin-left:48px;
}

.SettingsTitle {
    margin-left: 36px;
}

.SettingsContent {
     margin-top: 24px;
}

#account {
      background-color: gray ; 
}

Erstellen Sie die Flyout-Seite Datenschutz.
1. Erstellen Sie einen neuen Ordner für die Dateien des Flyouts Datenschutz. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen, und wählen Sie Hinzufügen und anschließend Neuer Ordner.
2. Benennen Sie den neuen Ordner in privacy um.
3. Klicken Sie mit der rechten Maustaste auf den Ordner privacy, und wählen Sie Hinzufügen und Neues Element....
4. Navigieren Sie im Dialogfeld Neues Element hinzufügen zu Installiert > JavaScript > Windows Store, und wählen Sie Seitensteuerelement.
5. Geben Sie im Feld Name den Text "privacy.html" ein, und klicken Sie auf Hinzufügen.
6. Passen Sie die neuen Dateien für Ihre App an.
  
  Ersetzen Sie das <div>-Element in der Datei privacy.html durch diesen Code.
```
<div id="privacy" data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{width: 'narrow'}">
    <div class="SettingsPane">
        <div class="win-label">
            <button onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton">
            </button>
            <span class="SettingsTitle">Privacy</span>
        </div>
        <article class="SettingsContent">
            
            <h2>How we protect your personal information</h2>
            <h4>Your privacy statement or a link to your privacy statement goes here.</h4>
        </article>
    </div>
</div>
```
  Fügen Sie den Text Ihrer Datenschutzbestimmungen in die Datei privacy.html ein.
  
  Fügen Sie den folgenden Code am Ende der Datei account.css hinzu.
```
.privacy p {
    margin-left: 120px;
}

.SettingsPane {
    margin-top:36px;
    margin-left:48px;
}

.SettingsTitle {
    margin-left: 36px;
}

.SettingsContent {
     margin-top: 24px;
}

#privacy {
      background-color: gray ; 
}
```

Fügen Sie die Befehle für die Einstellungen hinzu.

Fügen Sie diesen Code dem Ereignishandler app.onactivated in der Datei default.js hinzu.

// Define the Settings flyout commands.
// The commands appear in the Settings charm from top-to-bottom
//  in the order they are added.
app.onsettings = function (e) {
    e.detail.applicationcommands = {
        // Add the Account command
        "account": {
            // Location of page content
            href: "/account/account.html",
            // Command to show in settings menu
            title: "Account"
        },
        // Add the privacy command.
        "privacy": {
             // Location of page content
             href: "/privacy/privacy.html",
             // Command to show in settings menu
             title: "Privacy"
        }
    }

    // Command to update app's settings menu
    //  using the preceding definition.
    WinJS.UI.SettingsFlyout.populateSettings(e);
}

Erstellen Sie die App, und führen Sie sie aus.
Öffnen Sie den Charm "Einstellungen". Vergewissern Sie sich, dass die Befehle Konto und Datenschutz im Bereich mit den Einstellungen angezeigt werden.
Klicken Sie jeweils auf den Befehl, um sicherzustellen, dass sich ein Flyout öffnet.

Schließen Sie die App, nachdem beide Flyouts angezeigt wurden, und fahren Sie fort.

Schritt 4: Hinzufügen des UI-Inhalts und der Datenbindung

Die Benutzeroberfläche Ihrer App sollte den aktuellen Zustand ihrer Verbindung zum Microsoft-Konto des Benutzers widerspiegeln. Verwenden Sie in der UI der App anstelle von statischem Text die Datenbindung, damit sich auch der UI-Inhalt ändert, wenn sich der entsprechende Datenwert ändert.

In diesem Schritt fügen Sie den Code hinzu, mit dem die Daten der App mit der UI verbunden werden.

Aktualisieren Sie die Datei default.html, um die UI-Elemente mit den Bindungsattributen einzufügen, mit denen die UI mit den App-Daten verbunden wird.

Ersetzen Sie dazu den Inhalt des <body>-Tags in default.html durch diesen Code.

<div id="bindingDiv">
  <!-- The elements in this div get their data from the app's data
       object by using a binding object. -->
  <div class="heading">
    <h1>
      <!-- The app's title. This is configured by the program. -->
      <span id="titleText" data-win-bind="innerText: person.titleText">person.titleText</span>
    </h1>
  </div>
  <div class="content">
    <!-- The app's content. This is a photo for this example. 
         When the user is signed out, one photo is shown;
         when they are signed in, another is shown.           -->
    <img id="appImage" data-win-bind="src: image.url; title: image.caption" />
    <!-- Show the caption as text in the display as well as hover text in the image. -->
    <p id="appImageCaption" data-win-bind="innerText: image.caption">image.caption</p>
  </div>
</div>

In den Tags mit data-win-bind-Attributen wird das Datenfeld, das an ein Attribut gebunden ist, auch im Wert des Tags angezeigt. Dies ist lediglich eine zum Debuggen erforderliche Maßnahme. Wenn die Bindung erfolgreich ist, wird dieser Text durch die Datenwerte des Programms ersetzt. Wird die Bindung nicht hergestellt, erscheint der Name des Datenwerts, der nicht in der UI angezeigt wird. Dies erleichtert das Debuggen des Fehlers.

Erstellen Sie das Datenobjekt, das als Bindungsobjekt verwendet wird.

Erstellen Sie im Ordner js des Projekts eine neue Datei mit dem Namen data.js, und fügen Sie ihr Code hinzu. Gehen Sie wie folgt vor:

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner js, und wählen Sie Hinzufügen und dann Neues Element... aus.
Navigieren Sie zu Installiert > JavaScript > Code, und wählen Sie JavaScript-Datei.
Geben Sie im Feld Name den Text "data.js" ein, und klicken Sie auf Hinzufügen.

Ersetzen Sie den Inhalt von data.js durch den Code in diesem Beispiel.

(function () {

    "use strict";

    // The global data object used to reference the binding object
    WinJS.Namespace.define("binding",
        {
            Person: null
        }
    );

    // Static text
    WinJS.Namespace.define("display",
        {
            state: ["Some nice photo", "'s favorite photo"]
        }
    );

    // The app's data object that is used to map the
    //  sign-in state to the UI.
    WinJS.Namespace.define("appInfo",
        {
            index: 0,       // The sign-in state.
            image: {
                // The image to show
                url: "/images/SignedOutImage.png",
                caption: "Something not so special."
            },
            person: {
                // The info about the user
                userName: null,
                titleText: display.state[0]
            }
        }
   );

})();

Fügen Sie den Verweis auf diese neue Datei in default.html hinzu, indem Sie diesen Code vor dem <script>-Tag eingeben, mit dem auf default.js verwiesen wird.
```

<script src="/js/data.js"></script>
```

Fügen Sie den Code hinzu, mit dem das Datenobjekt an die UI gebunden wird.

Fügen Sie in der Datei default.js im Ereignishandler app.onactivated diesen Code hinzu, um das Bindungsobjekt zu erstellen und zu initialisieren.

// Create the binding object that connects the appInfo data
//  to the app's UI.
binding.Person = WinJS.Binding.as(appInfo);

// Update the binding object so that it reflects the state
//  of the app and updates the UI to reflect that state.
getInfoFromAccount(binding.Person);

Fügen Sie einen Ereignishandler hinzu, um die UI mit den Daten aus dem Bindungsobjekt zu aktualisieren, nachdem das Dokument der App geladen wurde.

Fügen Sie diesen Ereignishandler in default.js unmittelbar vor der app.oncheckpoint-Zuweisung hinzu.
```
app.onloaded = function (args) {
    // Initialize the UI to match the corresponding data object.
    var div = document.getElementById("bindingDiv");
    WinJS.Binding.processAll(div, appInfo);
}
```

Fügen Sie die Funktion hinzu, mit der die App-Daten mit den Daten des Benutzers synchronisiert werden.

In diesem Schritt werden mit dieser Funktion nur statische Daten für Testzwecke bereitgestellt. Die Funktionen zum Abrufen der Benutzerdaten aus dem Microsoft-Konto werden in einem späteren Schritt hinzugefügt.

Fügen Sie diese Funktion in default.js nach der anonymen Funktion hinzu, damit sie für andere Module der App sichtbar ist.

function getInfoFromAccount(p) {
    // Test for a parameter and assign the unbound data object
    //  if a parameter wasn't passed. This doesn't refresh the binding
    //  object, but it does keep the data object coherent with the
    //  sign-in state.
    if (undefined === p) { p = appInfo; }

    if (0 == p.index) {
        // The program executes this branch when the user is 
        // not signed in.

        // Set the data to the signed-out state values
        //   and update the app title.
        p.person.userName = null;
        p.person.titleText = display.state[p.index];

        // These elements are the default values to show
        //  when the user is not signed in.
        p.image.url = "/images/SignedOutImage.png";
        p.image.caption = "Something not so special.";
    }

    if (1 == p.index) {
        // The program executes this branch when the user is 
        //  signed in.

        // Set the data to the signed-in state,
        //  get the user's first name, and update the app title.
        p.person.userName = "Bob";
        p.person.titleText = p.person.userName + display.state[p.index];

        // These elements would normally be read from the user's data,
        //  but in this example, app resources are used.
        p.image.url = "/images/SignedInImage.png";
        p.image.caption = "Something special to me.";
    }
}

Fügen Sie die Bilddateien hinzu.
1. Kopieren Sie die beiden Bilddateien in den Ordner images des Projekts. Benennen Sie ein Bild in "SignedOutImage.png" und das andere Bild in "SignedInImage.png" um.
2. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner images, und wählen Sie anschließend Hinzufügen > Vorhandenes Element... aus.
3. Wählen Sie die beiden hinzugefügten Bilddateien aus, und klicken Sie auf Hinzufügen.
Erstellen und testen Sie Ihre App. Falls auf der Seite der richtige Text und das Bild SignedOutImage.png angezeigt werden, können Sie mit dem nächsten Schritt fortfahren.

Falls in der App anstelle des Texts der Name des Datenfelds angezeigt wird, liegt ein Problem mit der Datenbindung vor. Sie müssen das Problem beheben, bevor Sie fortfahren können.

Schritt 5: Aktualisieren des Flyouts "Konto" für die Verwendung des Bindungsobjekts

Ändern Sie die <button>-Tags in account.html wie hier angegeben, damit der Anmeldestatus genutzt wird, um im Flyout die richtige Schaltfläche anzuzeigen.


<button id="signInBtn" onclick="signInCmd(binding.Person)" style="display:none">Sign in</button>
<button id="signOutBtn" onclick="signOutCmd(binding.Person)" style="display:none">Sign out</button>

Fügen Sie diese Funktionen in der Datei "account.js" nach der anonymen Funktion hinzu.

function updateDisplay(p) {
    // Update the display to show the caption text and button
    // that apply to the current sign-in state.

    // Test for a parameter and assign the unbound global data object
    //  if a parameter wasn't passed. This doesn't refresh the screen
    //  but it does keep the data object coherent.
    if (undefined === p) { p = appInfo; }

    // Get the elements in the display for this function to update.
    var prompt = document.getElementById("accountPrompt");
    var inBtn = document.getElementById("signInBtn");
    var outBtn = document.getElementById("signOutBtn");

    // Update the elements to show the correct text and button for the
    //  the sign-in state.
    if (0 == p.index)  {
        // The user is signed out, so prompt them to sign in.
        prompt.innerText = "Sign in to see your favorite photo."
        outBtn.style.display = "none";
        inBtn.style.display = "block";
    } else {
        // The user is signed in so welcome them and show the sign-out button.
        prompt.innerText = "Welcome, " + p.person.userName + "!"
        inBtn.style.display = "none";
        outBtn.style.display = "block";
    }
}

function signInCmd(p) {
    // Sign the new user in.
    //  This call closes the Flyout and Settings charm.
    SignInNewUser(p);

    // Update the display to the signed-in state but keep the Flyout open
    // in case they want to sign in again.
    updateDisplay(p);

    // Return to the Settings flyout.   
    WinJS.UI.SettingsFlyout.show();
}

function signOutCmd(p) {
    // Sign the current user out.
    SignOutUser(p);
    // Update the display to the signed-out state but keep the Flyout open
    // in case they want to sign in again.
    updateDisplay(p);

    // Return to the Settings flyout.   
    WinJS.UI.SettingsFlyout.show();
}

Ändern Sie anschließend die Funktion des ready-Falls für den Aufruf WinJS.UI.Pages.define so, dass darin wie in diesem Beispiel ein Aufruf von updateDisplay enthalten ist.

ready: function (element, options) {
  // TODO: Initialize the page here.

  // Update the Account Flyout to reflect 
  //  the user's current sign-in state.
  updateDisplay(binding.Person);
},

Fügen Sie default.js die Funktionen hinzu, mit denen Benutzer am Microsoft-Konto angemeldet bzw. davon abgemeldet werden.

Für diese Funktionen ist noch keine Interaktion mit den Features der Windows Live-Dienste möglich. Dies wird in einem späteren Schritt hinzugefügt. Mithilfe dieser Funktionen können Sie bisher nur das Bindungsobjekt testen, um sicherzustellen, dass es in beiden Anmeldezuständen funktioniert und dass die UI bei einem Wechsel des Anmeldezustands angepasst wird.

function SignInNewUser(p) {
    // Sign the user in.

    // Test for a parameter and assign the unbound global data object
    //  if a parameter wasn't passed. This doesn't refresh the screen
    //  but it does keep the data object coherent.
    if (undefined === p) { p = appInfo; }

    p.index = 1;

    getInfoFromAccount(p);
}

function SignOutUser(p) {
    // Sign the user out.

    // Test for a parameter and assign the unbound global data object
    //  if a parameter wasn't passed. This doesn't refresh the screen
    //  but it does keep the data object coherent.
    if (undefined === p) { p = appInfo; }

    p.index = 0;

    getInfoFromAccount(p);
}

Erstellen und testen Sie Ihre App.
1. Die App wird gestartet, und es wird SignedOutImage.png angezeigt.
2. Öffnen Sie den Charm "Einstellungen", und wählen Sie den Befehl Konto. Vergewissern Sie sich, dass die Schaltfläche Anmelden und die Aufforderung angezeigt werden.
3. Klicken Sie auf die Schaltfläche Anmelden, und stellen Sie sicher, dass sich der App-Zustand und der Inhalt des Flyouts "Konto" ändern, um den Anmeldezustand widerzuspiegeln.
4. Vergewissern Sie sich im Flyout Konto, dass die Schaltfläche Abmelden und die Aufforderung angezeigt werden.
5. Klicken Sie auf die Schaltfläche Abmelden, und stellen Sie sicher, dass sich der App-Zustand und der Inhalt des Flyouts "Konto" ändern, um den Abmeldezustand widerzuspiegeln.
Wenn diese Funktionen in der App korrekt ausgeführt werden, sind Sie bereit zum Hinzufügen der Features von Windows Live-Diensten.

Schritt 6: Hinzufügen der Live SDK-Funktionen

Fügen Sie der App den Verweis auf das Live SDK hinzu.
1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf Verweise, und klicken Sie auf Verweis hinzufügen....
2. Navigieren Sie zu Windows > Erweiterungen, aktivieren Sie die Option Live SDK, und klicken Sie auf OK.
3. Fügen Sie im <head>-Tag von default.html vor dem Link default.css diese Zeile hinzu.
```

<script src="///LiveSDKHTML/js/wl.js"></script>
```
Initialisieren Sie das Live SDK.

Geben Sie in default.js im Handler app.onactivated nach der binding.Person-Zuweisung diesen Code ein.
```
// Initialize the Live SDK.
WL.init();
```

Aktualisieren Sie die getInfoFromAccount-Funktion so, dass die App den Anmeldezustand des Benutzers aus dessen Microsoft-Konto abruft.

Ersetzen Sie in der Datei default.js unter getInfoFromAccount die beiden if-Anweisungen, mit denen p.index getestet wird, durch diesen Code.

// Call the user's Microsoft account to get the identity of the current 
//  user. If the user is signed in, the success branch runs.
//  If the user is not signed in, the failure branch runs.
WL.api({
    path: "me",
    method: "GET"
}).then(
    function (response) {
        // The program executes this branch when the user is 
        // signed in.

        // Save the app's sign-in state.
        p.index = 1;

        // Set the data to the signed-in state,
        //   get the user's first name, and update the app title.
        p.person.userName = response.first_name;
        p.person.titleText = p.person.userName + display.state[p.index];

        // These elements would normally be read from the user's data,
        // but in this example, app resources are used.
        p.image.url = "/images/SignedInImage.png";
        p.image.caption = "Something special to me.";
    },
    function (responseFailed) {
        // The program executes this branch when the user is 
        // not signed in.

        // Reset the app state.
        p.index = 0;

        // Set the data to the signed-out state values
        //   and update the app title.
        p.person.userName = null;
        p.person.titleText = display.state[p.index];

        // These elements are the default values to show
        //  when the user is not signed in.
        p.image.url = "/images/SignedOutImage.png";
        p.image.caption = "Something not so special.";
    }
);

Aktualisieren Sie die SignInNewUser-Funktion, damit Benutzer an ihrem Microsoft-Konto angemeldet werden.

Ersetzen Sie in der Datei default.js unter SignInNewUser den Code nach dem Parametertest durch diesen Code.
```
// Sign the user in with the minimum scope necessary for the app.
WL.login({
    scope: ["wl.signin"]
}).then(function (response) {
    getInfoFromAccount(p);
});
```
Aktualisieren Sie die SignOutUser-Funktion.

Ersetzen Sie in der Datei default.js unter SignOutUser den Code nach dem Parametertest durch diesen Code.
```
// Sign out and then refresh the app's data object.
WL.logout().then(function (response) {
    getInfoFromAccount(p);
});
```

Fügen Sie die ShowSignOutButton-Funktion hinzu.

Fügen Sie am Ende von default.js die hier gezeigte ShowSignOutButton-Funktion hinzu.

function ShowSignOutButton() {
    // Return true or false to indicate whether the user 
    // can sign out of the app.
    return (WL.canLogout());
}

Fügen Sie den Test hinzu, mit dem geprüft wird, ob Benutzer sich abmelden können. Wenn sich Benutzer an der App von einem Computerkonto aus anmelden, das einem Microsoft-Konto zugeordnet ist, können sie sich nicht von der App abmelden. Mit dieser Funktion wird dieser Zustand abgefragt, damit Benutzern die richtige Aufforderung angezeigt werden kann.

Ersetzen Sie in der Datei account.js in der updateDisplay-Funktion die if-Anweisung durch diesen Code. Beachten Sie den hinzugefügten Test, mit dem ermittelt wird, ob die Schaltfläche Abmelden angezeigt werden soll.

    if (0 == p.index) {
        // The user is signed out, so prompt them to sign in.
        prompt.innerText = "Sign in to see your favorite photo."
        outBtn.style.display = "none";
        inBtn.style.display = "block";
    } else {
        // The user is signed in, so welcome them.
        //  If the user can sign out, show them the sign-out button.

        var promptText = "Welcome, " + p.person.userName + "!";
        var signOutBtnStyle = "block";
        if (ShowSignOutButton()) {
            // The user is signed in and can sign out later,
            //  so welcome them and show the sign-out button.
            signOutBtnStyle = "block";
        } else {
            // The user is signed in and can't sign out later,
            //  so welcome them and hide the sign-out button.
            promptText = promptText + " The app is signed in through your Windows 8 account."
            signOutBtnStyle = "none";
        }

        prompt.innerText = promptText;
        outBtn.style.display = signOutBtnStyle;
        inBtn.style.display = "none"
    }

Entfernen Sie den bisher zum Testen verwendeten Dummy-Code.

Entfernen Sie in der Datei account.js unter signInCmd die Aufrufe von updateDisplay und WinJS.UI.SettingsFlyout.show, damit diese Funktion nur noch diese eine Codezeile enthält.
```
// Sign the new user in.
//  This call closes the Flyout and Settings charm.
SignInNewUser(p);
```
Entfernen Sie in der Datei account.js unter signOutCmd den Aufruf von updateDisplay, damit diese Funktion nur noch diese Codezeilen enthält.
```
// Sign the current user out.
SignOutUser(p);

// Return to the Settings flyout.   
WinJS.UI.SettingsFlyout.show();
```

Die App ist jetzt zum Testen in Verbindung mit einem Microsoft-Konto bereit.

Schritt 7: Testen der App

Erstellen Sie die App, und führen Sie sie aus, um diese Aktionen zu testen.

Testen Sie das Anmelden am Microsoft-Konto.

Beginnen Sie mit dem Zustand, in dem die App vom Microsoft-Konto des Benutzers abgemeldet ist, und probieren Sie die folgenden Schritte aus:
1. Öffnen Sie das Flyout "Einstellungen", wählen Sie den Befehl Konto, und klicken Sie auf Anmelden.
2. Melden Sie sich mit einem Microsoft-Konto an. Klicken Sie auf Ja, wenn Sie von der App aufgefordert werden, Ihre Zustimmung zum Fortfahren zu geben.
3. Vergewissern Sie sich, dass sich der Text und das Bild in der App in den Text und das Bild für den Zustand "Angemeldet" ändern.
Testen Sie das Abmelden von der App.

Hinweis Wenn Sie die App über ein Computerkonto testen, das einem Microsoft-Konto zugeordnet ist, ist die Schaltfläche Abmelden deaktiviert. Dies entspricht dem erwarteten Verhalten. Für diesen Test müssen Sie die App über ein Computerkonto ausführen, das keinem Microsoft-Konto zugeordnet ist.

Beginnen Sie mit dem Zustand, in dem die App am Microsoft-Konto des Benutzers angemeldet ist, und probieren Sie die folgenden Schritte aus:
1. Öffnen Sie das Flyout "Einstellungen", wählen Sie den Befehl Konto, und klicken Sie auf Abmelden.
2. Vergewissern Sie sich, dass sich der Text und das Bild in der App in den Text und das Bild für den Zustand "Abgemeldet" ändern.
Testen Sie das einmalige Anmelden.

Das einmalige Anmelden ist die Funktion von Windows, mit der Sie Ihr Computerkonto Ihrem Microsoft-Konto zuordnen können. Wenn Sie die App über ein Computerkonto dieser Art ausführen, verhält sich die App anders als oben beschrieben.

Beispiel:
- Die App wird automatisch im angemeldeten Zustand gestartet.
- Die Schaltfläche Abmelden wird im Flyout "Konto" nicht angezeigt, weil Sie sich in der App nicht von Ihrem Konto abmelden können.
- Im Flyout "Konto" wird eine zusätzliche Meldung mit der Information angezeigt, dass Sie sich nicht von der App abmelden können.