Export (0) Print
Expand All

Signing users in to OneDrive (JavaScript and HTML)

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

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

  1. In Microsoft Visual Studio, open your app's project.
  2. In Solution Explorer, right-click References > Add Reference.
  3. Click Windows > Extension SDKs and select both Live SDK and Windows Library for JavaScript 2.1.
  4. Click OK to close the dialog.
  5. 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>
    
    
  6. 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

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

    Note  You'll be directed to sign in with a developer account, if you are not already signed in.

Specify consent page settings

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 Live SDK app management site and specify the following items.

Consent pageApp 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_NAME terms 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 wl.signin scope enables single sign-on and the sign-in UI.

Dn631820.wedge(en-us,WIN.10).gifJavaScript 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: ["wl.signin", "wl.skydrive"] }).then(
        function (result) {
            if (result.status == "connected") {
                //display to the user, that they are connected
                }
            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";
                                        //display to the user, that they are connected
                                    }
                                }
                            );
                        };
                    }
                });
    
    

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

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

Sign in using WL.login

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



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

 

 

Show:
© 2014 Microsoft