Signing users in to OneDrive (Windows Runtime apps using JavaScript and HTML)

Article
03/05/2015

Let your users sign in to their Microsoft OneDrive from your Windows Runtime app using JavaScript and HTML.

In this article
Prerequisites
Add a reference to the Live SDK
Associate your app with the Store
Specify consent page settings
Initialize the Live SDK
Sign in using WL.login
Get session info and handle events
Summary

The user must be signed in to his or her Microsoft account for your app to work with the user's info on OneDrive. You help the user do this by adding sign-in functionality to your app in the form of a button or a hyperlink.

Prerequisites

We assume that you know JavaScript and HTML and can write Windows Runtime apps. You also need the following:

If you are building a Windows Phone Store app, use Microsoft Visual Studio 2013 Update 2, which installs the Windows Phone 8.1 SDK. If you are building a Windows Phone 8 app, use Microsoft Visual Studio 2012, which installs the Windows Phone 8 SDK.
You must have an app to which you want to add sign-in functionality.
The Live SDK must be installed on your machine.

Add a reference to the Live SDK

In Microsoft Visual Studio, open your app's project.
In Solution Explorer, right-click References > Add Reference.
Click Windows > Extension SDKs and select both Live SDK and Windows Library for JavaScript 2.1.
Click Add, and then click Close.
To enable Microsoft IntelliSense in default.html, add this script element in the head element. This loads the wl.js library.
```
<script src="///LiveSDKHTML/js/wl.js"></script>
```
To enable IntelliSense in any other JavaScript (.js) file in your project, add this comment to the top of the file.
```
/// <reference path="///LiveSDKHTML/js/wl.js" />
```

Associate your app with the Store

In Visual Studio, open your app's project.
Right-click the project, click Store, and then click Associate App with the Store.

After users sign in from your app to a service that is compatible with Microsoft account, the Allow access page (also called the consent page) is displayed. It explains to the user the types of info that your app wants to access. To customize the items in the consent page, go to your Microsoft account Developer Center and specify the following items.

Consent page	App management site setting
Your app's logo	Basic Information page, Application logo image
Your app's domain name, which appears in several places in the consent page	API Settings page, Root Domain box
Your app's name, which appears in several places in the consent page	Basic Information page, Application name box
Your app's terms-of-use hyperlink	Basic Information page, Terms of service URL box
Your app's privacy statement hyperlink	Basic Information page, Privacy URL box

Note

If the Terms of service URL and Privacy URL settings are not specified, the text APPLICATION_NAMEterms and privacy statement will not appear in the consent page.

Initialize the Live SDK

Initialize the Live SDK by calling WL.init when the page loads. Calling WL.init with the scope enables single sign-on and the sign-in UI.

JavaScript and HTML

Call the WL.init function with the wl.signin and wl.skydrive scopes to initialize the Live SDK, and check whether the user is already signed in to his or her Microsoft account. If the user is not already signed in, a sign-in button is displayed to prompt the user to sign in. You call the WL.login function to sign the user in.

Note

The wl.signin scope enables single sign-on, and wl.skydrive gives users access to OneDrive.

WL.init({ scope: liveSdkSample.defaultScopes }).then(
    function (result) {
        if (result.status == "connected") {
            liveSdkSample.displayMe();
            }
        else {
            // Display the sign-in button.
            connectButton.style.display = "block";
            connectButton.onclick = function () {
                WL.login({
                    scope: ["wl.signin", "wl.skydrive"]
                        }).then(
                            function (result) {
                                if (result.status == "connected") {
                                    // Don't display the sign-in button.
                                    connectButton.style.display = "none";
                                    liveSdkSample.displayMe();
                                }
                            }
                        );
                    };
                }
            });

This example displays a sign-in button in the UI.

<button id="connectButton" style="display:none">
Connect with a Microsoft account</button>

In your Windows Runtime apps using JavaScript, use the WL.login function to display the sign-in UI provided by Windows.

When you use WL.login, you must specify the Scopes and permissions that your app requires. In this example, the custom signInUser function calls WL.login to sign the user in with the wl.signin scope. You call the custom signInUser function when the user clicks the accompanying HTML button control.

(In this case, the results of the sign-in are handled by a custom onLoginComplete function, which is shown later in this topic.)

function signInUser() {
    WL.login({
        scope: ["wl.signin", "wl.skydrive"]
    }, onLoginComplete);
}

document.write("<button onclick='signInUser()'>" +
    "Sign In</button>");

Get session info and handle events

Many of the functions in the Live SDK support an optional callback parameter that your JavaScript-based app can use to control what happens after a call finishes.

You can also use an event handler to detect changes in user status. To handle events from the Live SDK, call WL.Event.subscribe. In this example, the code subscribes to the auth.login event, which is fired after the user signs in. After the code in the example runs and the user signs in, the onLogin function is called.

WL.Event.subscribe("auth.login", onLogin);

The onLogin function in this example displays the "Signed in" message.

function onLogin() {
    document.getElementById("infoLabel").innerText = "Signed in.";
}

Another common event that an app might track is auth.sessionChange. This event is fired when an aspect of the sign-in session changes, such as when the user consents to a new scope.

This example code subscribes to the auth.sessionChange event and specifies that the onSessionChange function is called when an aspect of the user's session changes.

WL.Event.subscribe("auth.sessionChange", onSessionChange);

The onSessionChange function calls WL.getSession to get a session object for the user. The session object contains information such as the user ID, access token, and the scopes to which the user has consented.

function onSessionChange() {
    var session = WL.getSession();
    if (session) {
    document.getElementById("infoLabel").innerText =
        "Something about the session changed.";
    }
    else {
        document.getElementById("infoLabel").innerText =
            "Signed out or session error.";
    }
}

Summary

You have just seen how to sign your users in to their OneDrive account. Next, you might want to give them the ability to work with their OneDrive files and folders in your app. To do this, see File and folder properties.

For more info about signing users in from Windows Runtime apps using C#/Microsoft Visual Basic and XAML, see Signing users in (XAML).