Démarrage rapide : personnalisation de votre application (HTML)

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

Votre application Windows Runtime en JavaScript peut utiliser le Kit de développement logiciel (SDK) Live pour accéder aux informations du compte Microsoft de l’utilisateur.

Quand votre application s’exécute, l’utilisateur doit se connecter avec son compte Microsoft et donner son consentement pour autoriser votre application à accéder à ses données. Après cela, votre application a accès aux informations sur le profil de l’utilisateur dont elle a besoin pour personnaliser l’expérience utilisateur.

Important  Cette rubrique de démarrage rapide est fournie uniquement à titre d’illustration et de démonstration. Pour utiliser cette fonctionnalité dans une application que vous souhaitez charger sur le Windows Store pour la distribuer à des clients, vous devez ajouter une fonctionnalité de déconnexion, une politique de confidentialité, ainsi qu’une fonctionnalité de connexion. Lorsque vous aurez terminé cette rubrique de démarrage rapide, reportez-vous à Conditions requises pour la connexion avec un compte Microsoft pour en savoir plus sur l’ajout de ces fonctionnalités.

 

Important  Le didacticiel de cette rubrique illustre une application du Windows Store. Vous pouvez également ajouter des services Microsoft à une application du Windows Phone Store.

 

Prérequis

Avant de développer une application Windows Runtime en JavaScript qui utilise les fonctionnalités des services Windows Live, vous devez vérifier que les logiciels requis sont installés sur votre ordinateur de développement.

  • Les outils et le Kit de développement logiciel (SDK) requis pour le développement d’applications du Windows Store, si vous ne les avez pas encore installés. Cela inclut Microsoft Visual Studio et plusieurs autres outils.

  • Le Kit de développement logiciel (SDK) Live.

  • Une application du Windows Store en JavaScript.

    Remarque  Le code affiché dans cette rubrique de démarrage rapide est ajouté au modèle Application vide des projets JavaScript dans Visual Studio.

     

Connecter l’utilisateur et obtenir son consentement pour que votre application puisse accéder aux données utilisateur

Ajoutez le code requis pour accéder aux fonctionnalités des services Windows Live.

Pendant son exécution, votre application peut afficher le contrôle de connexion Windows pour permettre à l’utilisateur de se connecter avec son compte Microsoft. Une fois connecté, si l’utilisateur n’a pas déjà donné son consentement à l’application, il est invité à autoriser cette application à accéder à ses informations de profil.

Pour connecter l’utilisateur quand votre application s’exécute, effectuez l’opération suivante dans votre projet :

  1. Définissez une référence au kit de développement logiciel (SDK) Live, de la façon suivante :

    1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur Références > Ajouter une référence....
    2. Accédez à Windows > Extensions, puis activez la case à cocher en regard de Kit de développement logiciel (SDK) Live. Si le Kit de développement logiciel (SDK) Live n’apparaît pas dans la liste, réinstallez le Kit de développement logiciel (SDK) Live, puis recommencez cette procédure.
    3. Cliquez sur OK pour fermer la boîte de dialogue.
  2. Ajoutez la référence au fichier wl.js du Kit de développement logiciel (SDK) Live dans votre application. Dans le modèle Application vierge des projets JavaScript, cet ajout est effectué dans Default.html.

    Dans la balise <head> du fichier de code principal de l’application et au-dessus du lien vers le fichier default.js, ajoutez une balise <script> comme suit.

    <script src="///LiveSDKHTML/js/wl.js"></script>
    
  3. Dans la balise <body> de default.html, ajoutez le code permettant de connecter l’utilisateur à son compte Microsoft et de mettre à jour l’affichage à l’aide des informations relatives à l’utilisateur.

    Remarque  Le contrôle de connexion du compte Microsoft ne s’affichera pas si le compte d’ordinateur de l’utilisateur est associé à son compte Microsoft. Dans ce cas, l’application sera connectée automatiquement.

     

    Dans la balise <body>, ajoutez le code suivant.

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

Récapitulatif et étapes suivantes

Dans cette rubrique, vous avez découvert comment utiliser les services Windows Live dans vos applications pour accéder aux données utilisateur contenues dans les services de cloud computing Microsoft, tels qu’Outlook.com et Microsoft OneDrive.

Continuez votre découverte de l’utilisation des services Windows Live dans les rubriques Conditions requises pour la connexion avec un compte Microsoft et Comment ajouter les services Microsoft à votre application. Vous y trouverez des informations sur l’ajout de fonctions de connexion et de déconnexion et d’une politique de confidentialité.