Partager via

Comment ajouter des services Microsoft à votre application (HTML)

  • Article

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Vous trouverez ici les instructions nécessaires pour ajouter des fonctionnalités de services Microsoft à votre application Windows Runtime, afin de lui permettre d’accéder aux informations de profil d’un utilisateur, à ses fichiers et photos stockés sur son compte Microsoft OneDrive, ainsi qu’à ses informations Outlook.com. Les étapes de ce didacticiel commencent à partir d’une application vide. Vous devez ajouter les fonctionnalités nécessaires pour se connecter au compte Microsoft d’un utilisateur et obtenir les informations de profil de ce dernier afin de les afficher dans l’application.

Important  Le didacticiel de cette rubrique porte sur une application du Windows Store. Vous pouvez également ajouter des services Microsoft à une application du Windows Phone Store. Toutefois, l’interface utilisateur de l’appareil Windows Phone ne prenant pas en charge les menus volants, vous devez utiliser des pages dans une application du Windows Phone Store pour implémenter les fonctionnalités pour lesquelles les menus volants sont utilisés dans cette rubrique.

 

Ce que vous devez savoir

Technologies

Prérequis

  • Windows 8
  • Microsoft Visual Studio
  • Le Kit de développement logiciel (SDK) Live
  • Un compte de développeur du Windows Store
  • Deux fichiers image (format PNG) à utiliser dans votre application

Instructions

Étape 1: Créer un projet Application vide et inclure le Kit de développement logiciel (SDK) Live

Créez votre application à partir d’un modèle Visual Studio en procédant comme suit :

  1. Dans Visual Studio, dans le menu Fichier, cliquez sur Nouveau projet.
  2. Dans la boîte de dialogue Nouveau projet, accédez à Installé > Modèles > JavaScript > Windows Store.
  3. Sélectionnez Application vide.
  4. Entrez le nom et l’emplacement de votre nouvelle application, puis cliquez sur OK.
  5. Générez et testez votre application. Elle doit démarrer et afficher une page vierge qui indique uniquement « Emplacement du contenu ». Si vous voyez cette page, fermez votre application et continuez.

Étape 2: Ajouter l’application à votre compte de développeur du Windows Store

Pour permettre à votre application d’utiliser les services de cloud computing accessibles au Kit de développement logiciel (SDK) Live, vous devez l’inscrire dans votre compte de développeur du Windows Store. Vous n’avez pas besoin de soumettre votre application au Windows Store pour une certification. Il vous suffit d’indiquer un nom pour cette dernière dans votre compte de développeur du Windows Store.

Étape 3: Ajouter les données d’application et les menus volants Paramètres

Une application du Windows Store qui utilise le Kit de développement logiciel (SDK) Live doit faire au moins les deux choses suivantes :

  • autoriser l’utilisateur à se connecter à son compte Microsoft et à se déconnecter de ce dernier, si cela est possible ;
  • afficher une déclaration de confidentialité qui décrit la façon dont vous protégez les données personnelles auxquelles votre application va accéder.

Pour en savoir plus sur l’expérience de connexion et de déconnexion, ainsi que sur la déclaration de confidentialité, consultez la section Exigences en matière de connexion à un compte Microsoft.

Dans une application du Windows Store, elles sont accessibles via les menus volants Paramètres.

Pour ajouter des menus volants de paramètres à votre application, procédez comme suit :

  1. Créez la page de menu volant Account.

    1. Créez un dossier pour les fichiers du menu volant Account. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nom du projet, choisissez Ajouter, puis Nouveau dossier.

    2. Renommez le nouveau dossier en l’appelant account.

    3. Cliquez avec le bouton droit sur le dossier account, choisissez Ajouter, puis Nouvel élément.

    4. Dans la boîte de dialogue Ajouter un nouvel élément, accédez à Installé > JavaScript > Windows Store, puis choisissez Contrôle de page.

    5. Dans le champ Nom, tapez "account.html", puis cliquez sur Ajouter.

    6. Modifiez les nouveaux fichiers de votre application.

      Dans le fichier account.html, remplacez l’élément <div> par ce 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>

      Ajoutez le code suivant à la fin du fichier account.css.

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

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

.SettingsTitle {
    margin-left: 36px;
}

.SettingsContent {
     margin-top: 24px;
}

#account {
      background-color: gray ; 
}

  2. Créez la page de menu volant Privacy.

    1. Créez un dossier pour les fichiers du menu volant Privacy. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nom du projet, choisissez Ajouter, puis Nouveau dossier.

    2. Renommez le nouveau dossier en l’appelant privacy.

    3. Cliquez avec le bouton droit sur le dossier privacy, choisissez Ajouter, puis Nouvel élément.

    4. Dans la boîte de dialogue Ajouter un nouvel élément, accédez à Installé > JavaScript > Windows Store, puis choisissez Contrôle de page.

    5. Dans le champ Nom, tapez "privacy.html", puis cliquez sur Ajouter.

    6. Modifiez les nouveaux fichiers de votre application.

      Dans le fichier privacy.html, remplacez l’élément <div> par ce 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">
            <!-- Customize this text to fit your application.  -->
            <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>

      Veillez à modifier le contenu de privacy.html afin qu’il fasse référence à votre déclaration de confidentialité.

      Ajoutez le code suivant à la fin du fichier account.css.

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

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

.SettingsTitle {
    margin-left: 36px;
}

.SettingsContent {
     margin-top: 24px;
}

#privacy {
      background-color: gray ; 
}

  3. Ajoutez les commandes des paramètres.

    Dans le fichier default.js, ajoutez ce code au gestionnaire d’événements app.onactivated.

    // 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);
}

  4. Générez et exécutez votre application.

  5. Ouvrez l’icône Paramètres. Vérifiez que les commandes Account et Privacy apparaissent dans le volet Paramètres.

  6. Cliquez sur chaque commande pour vous assurer qu’elle ouvre un menu volant.

    Après avoir vu les deux menus volants, fermez votre application et continuez votre travail.

Étape 4: Ajouter le contenu de l’interface utilisateur et la liaison de données

Vous souhaitez que l’interface utilisateur de votre application reflète l’état actuel de sa connexion au compte Microsoft de l’utilisateur. Au lieu de placer du texte statique dans l’interface utilisateur de votre application, utilisez la liaison de données afin que le contenu de l’interface utilisateur change quand la valeur de donnée correspondante est modifiée.

Au cours de cette étape, vous ajoutez le code qui met en relation les données de votre application à l’interface utilisateur.

  1. Mettez à jour default.html pour inclure les éléments de l’interface utilisateur dont les attributs de liaison mettent en relation l’interface utilisateur aux données de l’application.

    Pour ce faire, remplacez le contenu de la balise <body> dans default.html par ce 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>

    Dans les balises comportant les attributs data-win-bind, le champ de données lié à un attribut apparaît également dans la valeur de la balise. Cela sert juste au débogage. Si la liaison réussit, les valeurs de données du programme remplacent ce texte. Si la liaison échoue, vous voyez s’afficher le nom de la valeur de donnée qui n’est pas montrée dans l’interface utilisateur, ce qui vous aide à déboguer l’erreur.

  2. Créez l’objet de données à utiliser comme objet de liaison.

    Créez un fichier appelé data.js dans le dossier js de votre projet, puis ajoutez-y du code. Pour ce faire :

    1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le dossier js, sélectionnez Ajouter, puis Nouvel élément.

    2. Accédez à Installé > JavaScript > Code, puis choisissez Fichier JavaScript.

    3. Dans le champ Nom, tapez "data.js", puis cliquez sur Ajouter.

    4. Remplacez le contenu du fichier data.js par le code de cet exemple.

      (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]
            }
        }
   );

})();

  3. Ajoutez la référence à ce nouveau fichier dans default.html en entrant le code suivant avant la balise <script> qui fait référence à default.js.

    
<!-- The app's data definition -->
<script src="/js/data.js"></script>

  4. Ajoutez le code permettant de lier l’objet de données à l’interface utilisateur.

    Dans default.js, dans le gestionnaire d’événements app.onactivated, ajoutez le code suivant pour créer l’objet de liaison et l’initialiser.

    // 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);

  5. Ajoutez un gestionnaire d’événements pour mettre à jour l’interface utilisateur à l’aide des données de l’objet de liaison une fois que le document de l’application a été chargé.

    Dans default.js, ajoutez ce gestionnaire d’événements juste avant l’affectation de app.oncheckpoint.

    app.onloaded = function (args) {
    // Initialize the UI to match the corresponding data object.
    var div = document.getElementById("bindingDiv");
    WinJS.Binding.processAll(div, appInfo);
}

  6. Ajoutez la fonction qui va synchroniser les données de l’application avec les données de l’utilisateur.

    Pour cette étape, la fonction en question fournit seulement des données statiques à des fins de test. Les fonctions permettant d’obtenir les données de l’utilisateur à partir de son compte Microsoft seront ajoutées plus tard.

    Dans default.js, ajoutez cette fonction après la fonction anonyme afin qu’elle soit visible par les autres modules de l’application.

    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.";
    }
}

  7. Ajoutez vos fichiers image.

    1. Copiez les deux fichiers image dans le dossier images de votre projet. Renommez l’une des images en l’appelant "SignedOutImage.png" et l’autre image en l’appelant "SignedInImage.png".

    2. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le dossier images, puis sélectionnez Ajouter > Élément existant.

    3. Sélectionnez les deux fichiers image que vous venez d’ajouter, puis cliquez sur Ajouter.

  8. Générez et testez votre application. Si vous voyez s’afficher l’image SignedOutImage.png et le texte approprié dans la page, passez à l’étape suivante.

    Si votre application affiche le nom du champ de données au lieu du texte, cela signifie qu’il y a un problème de liaison de données que vous devez corriger avant de continuer.

Étape 5: Mettre à jour le menu volant Account pour pouvoir utiliser l’objet de liaison

  1. Dans account.html, modifiez les balises <button> pour obtenir un code similaire à ce qui suit. Ainsi, l’état de connexion permet d’afficher le bouton approprié dans le menu volant.

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

  2. Dans account.js, ajoutez ces fonctions après la fonction anonyme.

    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();
}

    Modifiez ensuite la fonction du cas ready de l’appel de WinJS.UI.Pages.define de façon à inclure un appel à updateDisplay comme dans cet exemple.

    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);
},

  3. Ajoutez les fonctions à default.js pour permettre la connexion et la déconnexion de l’utilisateur de son compte Microsoft.

    Ces fonctions n’interagissent pas encore avec les fonctionnalités des services Windows Live, pour l’instant. Cette interaction sera ajoutée plus tard. Ces fonctions vous permettent simplement de tester l’objet de liaison pour vous assurer qu’il fonctionne correctement dans les deux états de connexion et qu’il met à jour l’interface utilisateur quand l’état de connexion change.

    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);
}

  4. Générez et testez votre application.

    1. Votre application démarre et affiche SignedOutImage.png.

    2. Ouvrez l’icône Paramètres et sélectionnez la commande Account. Assurez-vous que l’invite et le bouton Sign in apparaissent.

    3. Cliquez sur le bouton Sign in, puis assurez-vous que l’état de l’application et le contenu du menu volant Account changent afin de refléter l’état connecté.

    4. Dans le menu volant Account, assurez-vous que le bouton Sign out et l’invite correspondante apparaissent.

    5. Cliquez sur le bouton Sign out, puis assurez-vous que l’état de l’application et le contenu du menu volant Account changent afin de refléter l’état déconnecté.

    Lorsque votre application fonctionne ainsi, vous êtes prêt à ajouter les fonctionnalités des services Windows Live.

Étape 6: Ajouter le Kit de développement logiciel (SDK) Live

  1. Ajoutez la référence au Kit de développement logiciel (SDK) Live à votre application.

    1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur Références, puis choisissez Ajouter une référence.

    2. Accédez à Windows > Extensions, activez Kit de développement logiciel (SDK) Live, puis cliquez sur OK.

    3. Dans la balise <head> de default.html, ajoutez la ligne suivante avant le lien default.css.

      <!-- The Live SDK -->
<script src="///LiveSDKHTML/js/wl.js"></script>

  2. Initialisez le Kit de développement logiciel (SDK) Live.

    Dans default.js, entrez le code suivant après l’affectation de binding.Person dans le gestionnaire app.onactivated.

    // Initialize the Live SDK.
WL.init();

  3. Mettez à jour la fonction getInfoFromAccount afin que votre application reçoive l’état de connexion de l’utilisateur à partir de son compte Microsoft.

    Dans default.js, dans getInfoFromAccount, remplacez les deux instructions if qui testent p.index par ce 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.";
    }
);

  4. Mettez à jour la fonction SignInNewUser pour connecter l’utilisateur à son compte Microsoft.

    Dans default.js, dans SignInNewUser, remplacez le code situé après le test des paramètres par ce code.

    // Sign the user in with the minimum scope necessary for the app.
WL.login({
    scope: ["wl.signin"]
}).then(function (response) {
    getInfoFromAccount(p);
});

  5. Mettez à jour la fonction SignOutUser.

    Dans default.js, dans SignOutUser, remplacez le code situé après le test des paramètres par ce code.

    // Sign out and then refresh the app's data object.
WL.logout().then(function (response) {
    getInfoFromAccount(p);
});

  6. Ajoutez la fonction ShowSignOutButton.

    À la fin de default.js, ajoutez la fonction ShowSignOutButton indiquée ici.

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

  7. Ajoutez le test indiquant si l’utilisateur peut se déconnecter. Si l’utilisateur se connecte à son application à partir d’un compte d’ordinateur associé à un compte Microsoft, il ne peut pas se déconnecter de son application. Cette fonction vérifie cette condition afin d’afficher l’invite appropriée pour l’utilisateur.

    Dans account.js, dans la fonction updateDisplay, remplacez l’instruction if par ce code. Notez l’ajout du test qui permet de savoir si le bouton Sign out doit être affiché.

        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"
    }

  8. Supprimez le code factice utilisé pour les tests antérieurs.

    Dans account.js, dans signInCmd, supprimez les appels à updateDisplay et WinJS.UI.SettingsFlyout.show afin de conserver uniquement la ligne de code suivante dans cette fonction.

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

    Dans account.js, dans signOutCmd, supprimez l’appel à updateDisplay afin de conserver uniquement les lignes de code suivantes dans cette fonction.

    // Sign the current user out.
SignOutUser(p);

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

Votre application est maintenant prête à être testée avec un compte Microsoft.

Étape 7: Tester votre application

Générez et exécutez votre application, puis testez ces actions.

  1. Testez la connexion à un compte Microsoft.

    L’application étant déconnectée du compte Microsoft de l’utilisateur, essayez les étapes suivantes :

    1. Ouvrez le menu volant de paramètres, sélectionnez la commande Account, puis cliquez sur Sign in.
    2. Connectez-vous avec un compte Microsoft. Si l’application vous demande l’autorisation de continuer, cliquez sur Oui.
    3. Assurez-vous que le texte et l’image de l’application changent afin de refléter l’état connecté.

  2. Testez la déconnexion de l’application.

    Remarque  Si vous testez votre application à partir d’un compte d’ordinateur associé à un compte Microsoft, le bouton Sign out est désactivé. Il s’agit du comportement attendu. Pour effectuer ce test, vous devez exécuter votre application à partir d’un compte d’ordinateur non associé à un compte Microsoft.

     

    L’application étant connectée au compte Microsoft de l’utilisateur, essayez les étapes suivantes :

    1. Ouvrez le menu volant de paramètres, sélectionnez la commande Account, puis cliquez sur Sign out.
    2. Assurez-vous que le texte et l’image de l’application changent afin de refléter l’état déconnecté.

  3. Testez l’authentification unique.

    L’authentification unique est la fonctionnalité de Windows qui vous permet d’associer votre compte d’ordinateur à votre compte Microsoft. Si vous exécutez votre application à partir d’un compte d’ordinateur de ce type, l’application se comporte différemment de ce qui est décrit ci-dessus.

    Par exemple :

    • L’application peut démarrer à l’état connecté automatiquement.
    • Le bouton Sign out n’apparaît pas dans le menu volant Account, car vous ne pouvez pas vous déconnecter de votre compte à partir de l’application.
    • Le menu volant Account affiche un message supplémentaire indiquant que vous ne pouvez pas vous déconnecter à partir de votre application.

Rubriques associées

Liaison de données

data-win-control

data-win-options

data-win-bind

Kit de développement logiciel (SDK) Live

WinJS.Namespace

WinJS.UI.SettingsFlyout

WL.api

WL.canLogout

WL.init

WL.login

WL.logout