Guida introduttiva: Personalizzazione di un'app (HTML)

  • Articolo

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

Le app di Windows Runtime scritte in JavaScript possono usare Live SDK per accedere alle info dell'account Microsoft dell'utente.

Mentre l'app è in esecuzione, l'utente deve effettuare l'accesso tramite il suo account Microsoft e dare il consenso per l'accesso dell'app ai suoi dati. Dopo l'accesso e il consenso dell'utente, l'app può accedere ai dati del profilo dell'utente per personalizzare l'esperienza.

Importante  Questa guida introduttiva viene fornita unicamente a scopi illustrativi e dimostrativi. Per usare questa funzionalità in un'app da caricare in Windows Store e distribuire ai clienti, dovrai includere una funzionalità di disconnessione, oltre a una funzionalità di accesso e a una informativa sulla privacy. Dopo aver completato questa guida introduttiva, leggi Requisiti per l'accesso all'account Microsoft per info su come aggiungere queste funzionalità.

 

Importante  L'esercitazione in questo argomento illustra un'app di Windows Store. Puoi anche aggiungere servizi Microsoft a un'app di Windows Phone Store.

 

Prerequisiti

Prima di sviluppare un'app di Windows Runtime scritta in JavaScript che usa le funzionalità dei servizi Windows Live, dovrai aver installato il software necessario nel computer di sviluppo.

  • Strumenti e SDK per lo sviluppo di app di Windows Store, se non sono già installati. Questi strumenti includono, tra gli altri, Microsoft Visual Studio.

  • Live SDK.

  • App di Windows Store scritta in JavaScript.

    Nota  Il codice illustrato in questa guida introduttiva viene aggiunto al modello Applicazione vuota per progetti JavaScript in Visual Studio.

     

Accesso dell'utente e consenso per l'accesso ai dati

Aggiungi il codice per accedere alle funzionalità dei servizi Windows Live.

Durante l'esecuzione, l'app può visualizzare il controllo di accesso di Windows per consentire all'utente di accedere con l'account Microsoft. Dopo aver effettuato l'accesso, se l'utente non ha già autorizzato l'app, verrà richiesto di prestare consenso all'accesso ai propri dati del profilo da parte dell'app.

Per consentire all'utente di accedere quando l'app è in esecuzione, effettua quanto segue nel progetto:

  1. Imposta un riferimento a Live SDK, come indicato di seguito:

    1. In Esplora soluzioni fai clic con il pulsante destro del mouse su Riferimenti > Aggiungi riferimento.
    2. Passa a Windows > Estensioni e controlla la casella accanto a Live SDK. Se Live SDK non è presente nell'elenco, reinstalla il Live SDK e ripeti la procedura.
    3. Fai clic su OK per chiudere la finestra di dialogo.

  2. Aggiungi il riferimento al file wl.js nel file Live SDK dell'app. Nel modello Applicazione vuota per i progetti JavaScript questo viene aggiunto a Default.html.

    Nel tag <head> del file di codice principale dell'app e sopra il collegamento al file default.js, aggiungi un tag <script> analogo al seguente.

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

  3. Nel tag <body> di default.html, aggiungi il codice per l'accesso all'account Microsoft da parte dell'utente e aggiorna la visualizzazione con i relativi dati.

    Nota  Il controllo di accesso all'account Microsoft non viene visualizzato se l'account computer dell'utente è associato al relativo account Microsoft. In questo caso, l'app effettua l'accesso automaticamente.

     

    Nel tag <body>, aggiungi il codice seguente.

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

Riepilogo e passaggi successivi

In questo argomento abbiamo illustrato come iniziare a usare i servizi Windows Live nelle tue app per accedere ai dati degli utenti nei servizi cloud Microsoft come Outlook.com e Microsoft OneDrive.

Continua ad approfondire l'uso dei servizi Windows Live in Requisiti per l'accesso all'account Microsoft e Come aggiungere servizi Microsoft a un'app, in cui sono disponibili informazioni su come aggiungere funzioni di accesso e disconnessione e un'informativa sulla privacy.