Quickstart: Personalizing your app (HTML)

Article
08/31/2015

Your Windows Runtime app using JavaScript can use the Live SDK to access info from the user's Microsoft account.

When your app runs, the user must sign in with his or her Microsoft account and give consent for your app to access his or her data. After the user signs in and gives consent, your app can access the user's profile data to personalize the experience.

Important This quickstart is for illustration and demonstration purposes only. To use this feature in an app that you want to upload to the Windows Store and distribute to customers, you'll need to include a sign-out feature and a privacy policy as well as a sign-in feature. After you complete this quickstart, read Requirements for Microsoft account sign-in for info on how to add these features.

Important The tutorial in this topic demonstrates a Windows Store app. You can also add Microsoft services to a Windows Phone Store app.

Prerequisites

Before developing a Windows Runtime app using JavaScript that uses Windows Live Services features, you'll need to have the required software installed on your development computer.

The tools and SDK for developing Windows Store apps, if they aren't already installed. These tools include Microsoft Visual Studio and other tools.
The Live SDK.
A Windows Store app using JavaScript.

Note The code shown in this quickstart is added to the Blank App template for JavaScript projects in Visual Studio.

Add the code that accesses the Windows Live Services features.

When your app runs, it can display the Windows sign-in control for the user sign in with their Microsoft account. After signing in, if the user hasn't already given consent for this app, he or she is prompted to give consent for the app to access his or her profile info.

To sign the user in when your app runs, do this in your project:

Set a reference to the Live SDK, like this:
1. In Solution Explorer, right-click References > Add Reference....
2. Go to Windows > Extensions, and check the box next to Live SDK. If you don't see Live SDK in the list, reinstall the Live SDK and retry this procedure.
3. Click OK to exit the dialog box.
Add the reference to the wl.js file in the Live SDK file to your app. In the Blank App template for JavaScript projects, this is added to Default.html.

In the <head> tag of the app's main code file and above the link to the default.js file, add a <script> tag like this.
```
<script src="///LiveSDKHTML/js/wl.js"></script>
```

In the <body> tag of default.html, add the code to sign the user in to his or her Microsoft account and update the display with the user's info.

Note This won't display the Microsoft account sign-in control if the user's computer account is associated with their Microsoft account. In that case, the app will be signed in automatically.

In the <body> tag, add the following code.

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

Summary and next steps

In this topic, you learned how to begin using Windows Live Services in your apps to access users' data in Microsoft cloud services like Outlook.com and Microsoft OneDrive.

Continue learning more about using Windows Live Services in Requirements for Microsoft account sign-in and How to add Microsoft services to your app, where you can find out how to add sign-in and sign-out functions and a privacy policy.

Quickstart: Personalizing your app (HTML)

Prerequisites

Sign the user in and get their consent to access their data

Summary and next steps

Additional resources