Come aggiungere servizi Microsoft a un'app (HTML)

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

In questo argomento viene illustrato come aggiungere funzionalità dei servizi Microsoft alle app di Windows Runtime, in modo che possano accedere ai dati del profilo dell'utente, a file e foto su Microsoft OneDrive e alle informazioni di Outlook.com. Ai fini della procedura descritta in questa esercitazione useremo un'app vuota a cui aggiungere le funzionalità per accedere all'account Microsoft di un utente e per ottenere i dati del profilo da visualizzare nell'app stessa.

Importante  L'esercitazione in questo argomento illustra un'app di Windows Store. Puoi anche aggiungere servizi Microsoft a un'app di Windows Phone Store. Dato che l'interfaccia utente di Windows Phone non supporta i riquadri a comparsa, tuttavia, devi usare le pagine in un'app di Windows Phone Store per implementare le funzionalità per le quali vengono usati i riquadri a comparsa in questo argomento.

 

Cosa sapere

Tecnologie

Prerequisiti

  • Windows 8
  • Microsoft Visual Studio
  • Live SDK
  • Account sviluppatore di Windows Store
  • Due file di immagine (formato PNG) da usare nell'app

Istruzioni

Passaggio 1: Creare un progetto di app vuota e includere Live SDK

Ecco come creare la nuova app da un modello di Visual Studio:

  1. Scegli Nuovo progetto da menu File di Visual Studio.
  2. Nella finestra di dialogo Nuovo progetto passa a Installato > Modelli > JavaScript > Windows Store.
  3. Seleziona Applicazione vuota.
  4. Immetti il nome e percorso della nuova app e fai clic su OK.
  5. Compila e testa l'app. Dovrebbe essere visualizzata una pagina vuota contenente solo l'indicazione "Spazio per il contenuto". In questo caso, chiudi l'app e continua la procedura.

Passaggio 2: Aggiungi l'app al tuo account sviluppatore di Windows Store

Affinché l'app possa usare i servizi cloud a cui si accede tramite Live SDK, deve essere registrata nell'account sviluppatore di Windows Store. Non è necessario inviare l'app a Windows Store per la certificazione. È sufficiente immettere un nome per l'app nell'account per sviluppatore di Windows Store.

Passaggio 3: Aggiungere i riquadri a comparsa delle impostazioni e dei dati dell'app

Le app di Windows Store che usano Live SDK devono prevedere almeno le due operazioni seguenti:

  • Consentire all'utente di accedere all'account Microsoft e di disconnettersi da esso, se possibile.
  • Visualizzare un'informativa sulla privacy che descrive in che modo vengono protetti i dati personali a cui accede l'app.

Per altre info sull'esperienza di accesso e disconnessione e l'informativa sulla privacy, vedi Requisiti per l'accesso all'account Microsoft.

In un'app di Windows Store, queste opzioni sono accessibili tramite i riquadri a comparsa delle impostazioni.

Per aggiungere riquadri a comparsa alla tua app, procedi in questo modo:

  1. Crea la pagina del riquadro a comparsa Account.

    1. Crea una nuova cartella per i file del riquadro a comparsa Account. In Esplora soluzioni fai clic con il pulsante destro del mouse sul nome del progetto, scegli Aggiungi e seleziona Nuova cartella.

    2. Rinomina la nuova cartella in account.

    3. Fai clic con il pulsante destro del mouse sulla cartella account, scegli Aggiungi e seleziona Nuovo elemento.

    4. Nella finestra di dialogo Aggiungi nuovo elemento, passa a Installato > JavaScript > Windows Store e seleziona Controllo pagina.

    5. Nel campo Nome digita "account.html" e fai clic su Aggiungi.

    6. Modifica i nuovi file per la tua app.

      Nel file account.html, sostituisci l'elemento <div> con questo codice.

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

      Aggiungi il codice seguente alla fine del file 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. Crea la pagina del riquadro a comparsa Privacy.

    1. Crea una nuova cartella per i file del riquadro a comparsa Privacy. In Esplora soluzioni fai clic con il pulsante destro del mouse sul nome del progetto, scegli Aggiungi e seleziona Nuova cartella.

    2. Rinomina la nuova cartella in privacy.

    3. Fai clic con il pulsante destro del mouse sulla cartella privacy, scegli Aggiungi e seleziona Nuovo elemento.

    4. Nella finestra di dialogo Aggiungi nuovo elemento passa a Installato > JavaScript > Windows Store e seleziona Controllo pagina.

    5. Nel campo Nome digita "privacy.html" e fai clic su Aggiungi.

    6. Modifica i nuovi file per la tua app.

      Nel file privacy.html sostituisci l'elemento <div> con questo codice.

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

      Accertati di modificare il contenuto di privacy.html in modo che faccia riferimento all'informativa sulla privacy.

      Aggiungi il codice seguente alla fine del file 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. Aggiungi i comandi delle impostazioni.

    Nel file default.js aggiungi questo codice al gestore di eventi 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. Compila ed esegui l'app.

  5. Apri l'accesso alle impostazioni. Verifica che i comandi Account e Privacy siano visualizzati nel riquadro delle impostazioni.

  6. Fai clic su ogni comando per verificare che si apra un riquadro a comparsa.

    Dopo aver visualizzato entrambi i riquadri a comparsa, chiudi l'app e continua.

Passaggio 4: Aggiungere il contenuto dell'interfaccia utente e l'associazione dati

L'interfaccia utente dell'app deve rappresentare lo stato corrente della connessione all'account Microsoft dell'utente. Invece di inserire testo statico nell'interfaccia utente dell'app, usa l'associazione dati in modo che il contenuto cambi a seconda dei valori dei dati corrispondenti.

In questo passaggio aggiungiamo il codice che consente di connettere i dati dell'app all'interfaccia utente.

  1. Aggiorna default.html in modo che includa gli elementi dell'interfaccia con gli attributi di associazione che effettuano la connessione dell'interfaccia ai dati dell'app,

    A tale scopo, sostituisci il contenuto del tag <body> in default.html con questo codice.

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

    Nei tag con attributi data-win-bind, il campo dati associato a un attributo è presente anche nel valore del tag. Questo aspetto è a fini di debug. Se l'associazione ha esito positivo, i valori dei dati del programma sostituiscono questo testo. Se l'associazione ha esito negativo, nell'interfaccia utente viene visualizzato il nome del valore dei dati non mostrato, il che può agevolare il debug dell'errore.

  2. Crea l'oggetto dati da usare come oggetto associazione.

    Crea un nuovo file denominato data.js nella cartella js del progetto e aggiungi il codice. A tale scopo, esegui le operazioni seguenti:

    1. In Esplora soluzioni fai clic con il pulsante destro del mouse sulla cartella js e scegli Aggiungi, quindi seleziona Nuovo elemento.

    2. Passa a Installato > JavaScript > Codice e quindi seleziona il file JavaScript.

    3. Nel campo Nome digita "data.js" e quindi fai clic su Aggiungi.

    4. Sostituisci il contenuto di data.js con il codice di questo esempio.

      (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. Aggiungi il riferimento al nuovo file in default.html immettendo questo codice prima del tag <script> che fa riferimento a default.js.

    
    <!-- The app's data definition -->
    <script src="/js/data.js"></script>
    
  4. Aggiungi il codice per associare l'oggetto dati all'interfaccia utente.

    In default.js, nel gestore di eventi app.onactivated, aggiungi questo codice per creare l'oggetto associazione e inizializzarlo.

    // 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. Aggiungi un gestore di eventi per aggiornare l'interfaccia utente con i dati dell'oggetto associazione al termine del caricamento del documento dell'app.

    In default.js aggiungi questo gestore di eventi prima dell'assegnazione 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. Aggiungi la funzione di sincronizzazione dei dati dell'app con i dati dell'utente.

    Per questo passaggio, questa funzione fornisce dati statici a fini di test. Aggiungeremo le funzioni per ottenere i dati dell'utente dall'account Microsoft in un passaggio successivo.

    In default.js aggiungi questa funzione dopo la funzione anonymous in modo che sia visibile ad altri moduli nell'app.

    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. Aggiungi i file di immagine.

    1. Copia i due file di immagine nella cartella images del progetto. Rinomina un'immagine "SignedOutImage.png" e l'altra "SignedInImage.png".

    2. In Esplora soluzioni fai clic con il pulsante destro del mouse sulla cartella images e scegli Aggiungi > Elemento esistente.

    3. Seleziona i due file di immagine appena aggiunti e fai clic su Aggiungi.

  8. Compila e testa l'app. Se nella pagina vengono visualizzati il testo corretto e l'immagine SignedOutImage.png, procedi con il passaggio successivo.

    Se viene visualizzato il nome del campo dati invece del testo, c'è un problema con l'associazione dati ed è necessario risolverlo prima di continuare.

Passaggio 5: Aggiornare il riquadro a comparsa Account per l'uso dell'oggetto associazione

  1. In account.html modificare i tag <button> in modo analogo a questo affinché lo stato di accesso sia usato per visualizzare il pulsante corretto nel riquadro a comparsa.

    
    <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. In account.js aggiungi queste funzioni dopo la funzione anonymous.

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

    Modifica quindi la funzione del caso ready della chiamata WinJS.UI.Pages.define in modo che includa una chiamata a updateDisplay come in questo esempio.

    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. Aggiungi a default.js le funzioni che consentono all'utente di accedere all'account Microsoft o di disconnettersi da esso.

    Queste funzioni non interagiscono ancora con le funzionalità dei servizi Windows Live. Aggiungeremo questa funzionalità successivamente. Queste funzioni consentono solo di testare l'oggetto associazione per accertarsi che funzioni in entrambi gli stati di accesso e aggiorni l'interfaccia utente quando lo stato cambia.

    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. Compila e testa l'app.

    1. L'app si avvia e visualizza SignedOutImage.png.

    2. Apri l'accesso alle impostazioni e seleziona il comando Account. Verifica che vengano visualizzati il pulsante Sign in e la richiesta.

    3. Fai clic sul pulsante Sign in e verifica che lo stato dell'app e il contenuto del riquadro a comparsa Account cambino in modo da riflettere lo stato di accesso effettuato.

    4. Nel riquadro a comparsa Account verifica che vengano visualizzati il pulsante Sign out e la richiesta.

    5. Fai clic sul pulsante Sign out e verifica che lo stato dell'app e il contenuto del riquadro a comparsa Account cambino in modo da riflettere lo stato di disconnessione.

    Se l'app funziona in questo modo, puoi aggiungere le funzionalità dei servizi Windows Live.

Passaggio 6: Aggiungere le funzioni di Live SDK

  1. Aggiungi all'app il riferimento al Live SDK.

    1. In Esplora soluzioni fai clic con il pulsante destro del mouse su Riferimenti e quindi scegli Aggiungi riferimento

    2. Passa a Windows > Estensioni, seleziona Live SDK e quindi fai clic su OK.

    3. Nel tag <head> di default.html, aggiungi questa riga prima del collegamento a default.css.

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

    In default.js immetti questo codice dopo l'assegnazione binding.Person nel gestore app.onactivated.

    // Initialize the Live SDK.
    WL.init();
    
  3. Aggiorna la funzione getInfoFromAccount in modo che l'app ottenga lo stato di accesso dell'utente dall'account Microsoft.

    In default.js, in getInfoFromAccount, sostituisci le due istruzioni if che testano p.index con questo codice.

    // 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. Aggiorna la funzione SignInNewUser per l'accesso dell'utente all'account Microsoft.

    In default.js, in SignInNewUser, sostituisci il codice dopo il parametro test con questo codice.

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

    In default.js, in SignOutUser, sostituisci il codice dopo il parametro test con questo codice.

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

    Alla fine di default.js, aggiungi la funzione ShowSignOutButton visualizzata qui.

    function ShowSignOutButton() {
        // Return true or false to indicate whether the user 
        // can sign out of the app.
        return (WL.canLogout());
    }
    
  7. Aggiungi il test indicante se l'utente può disconnettersi. Se l'utente accede all'app da un account computer associato a un account Microsoft, non può disconnettersi dall'app. Questa funzione testa tale condizione in modo da visualizzare il messaggio corretto all'utente.

    In account.js, nella funzione updateDisplay, sostituisci l'istruzione if con questo codice. Tieni presente che il test è stato aggiunto per indicare se il pulsante Sign out deve essere visualizzato.

        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. Rimuovi il codice fittizio usato per il test precedente.

    In account.js, in signInCmd, rimuovi le chiamate a updateDisplay e WinJS.UI.SettingsFlyout.show in modo che l'unica riga di codice nella funzione sia questa.

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

    In account.js, in signOutCmd, rimuovi la chiamata a updateDisplay in modo che le uniche righe di codice nella funzione siano queste.

    // Sign the current user out.
    SignOutUser(p);
    
    // Return to the Settings flyout.   
    WinJS.UI.SettingsFlyout.show();
    

L'app è ora pronta per il test con un account Microsoft.

Passaggio 7: Eseguire il test dell'app

Compila ed esegui l'app e testa queste azioni.

  1. Testa l'accesso a un account Microsoft.

    All'avvio dell'app disconnessa dall'account Microsoft, prova a eseguire questi passaggi:

    1. Apri il riquadro a compara delle impostazioni, seleziona il comando Account e fai clic su Sign in.
    2. Esegui l'accesso con un account Microsoft. Se l'app richiede l'autorizzazione per continuare, fai clic su Yes.
    3. Verifica che il testo e l'immagine nell'app siano quelli per lo stato di accesso effettuato.
  2. Testa la disconnessione dall'app.

    Nota  Se testi l'app da un account computer associato a un account Microsoft, il pulsante Sign out sarà disabilitato. Questo è il comportamento previsto. Per questo test, devi eseguire l'app da un account computer non associato a un account Microsoft.

     

    All'avvio dell'app con accesso effettuato all'account Microsoft, prova a eseguire questi passaggi:

    1. Apri il riquadro a compara delle impostazioni, seleziona il comando Account e fai clic su Sign out.
    2. Verifica che il testo e l'immagine nell'app siano quelli per lo stato di disconnessione.
  3. Testa la funzionalità di Single Sign-On.

    Single Sign-On è la funzionalità di Windows che ti consente di associare l'account computer all'account Microsoft. Se esegui l'app da un account computer di questo tipo, il comportamento sarà diverso da quello descritto sopra.

    Ad esempio:

    • L'app potrebbe essere automaticamente avviata con accesso effettuato.
    • Il pulsante Sign out non viene visualizzato nel riquadro a comparsa Account poiché non è possibile disconnettersi dall'account dall'interno dell'app.
    • Il riquadro a comparsa Account mostra un altro messaggio indicante che non è possibile disconnettersi dall'app.

Argomenti correlati

Associazione dati

data-win-control

data-win-options

data-win-bind

Live SDK

WinJS.Namespace

WinJS.UI.SettingsFlyout

WL.api

WL.canLogout

WL.init

WL.login

WL.logout