Signing Users In (JavaScript Library)

Ff748792.note(en-us,MSDN.10).gifNote:
Current information about Live Connect is now available in the Windows Live Developer Center. The information in the following sections is provided for legacy purposes only.

You can use the Windows Live JavaScript Library to add sign-in functionality to your application programmatically. The Microsoft.Live.App class provides Microsoft.Live.App.signIn and Microsoft.Live.App.signOut methods for this purpose. The following code demonstrates the use of this class.

JavaScript
Copy 
function signIn() {
    if (Microsoft.Live.App.get_auth().get_state() !== Microsoft.Live.AuthState.authenticated) {
        Microsoft.Live.App.signIn(signInCompleted);
    }
}
function signOut() {
    if (Microsoft.Live.App.get_auth().get_state() === Microsoft.Live.AuthState.authenticated) {
        Microsoft.Live.App.signOut();
    }
}
function signInCompleted(signInCompletedEventArgs) {
    if (signInCompletedEventArgs.get_resultCode() !== Microsoft.Live.AsyncResultCode.success) {
        alert("error: " + signInCompletedEventArgs.get_error().message);
    }
}

For an API usage overview, see Using the JavaScript Library and Controls for Messenger Connect.

The following code example uses <input> buttons to trigger sign-in and sign-out. To test this page, set up the Getting Started Sample for ASP.NET. Then add a page to that project as follows:

  1. Create a new ASP.NET page in the project.
  2. Replace the <html> element with the sample code.
  3. Update the sample code by providing your client ID in the <wl:app> tag.
JavaScript
Copy 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wl="http://apis.live.net/js/2010">
<head>
    <title>JS_Microsoft.Live.UI.SignIn Conceptual Example</title>
    <script type="text/javascript" src="http://js.live.net/4.1/loader.js"></script>
    <script type="text/javascript">
        var isLoggedIn
        function appLoaded(appLoadedEventArgs) {
            updateButtons();
        }
        function updateButtons() {
            if (Microsoft.Live.App.get_auth().get_state() === Microsoft.Live.AuthState.authenticated) {
                $get('SignInButton').style.visibility = 'hidden';
                $get('SignOutButton').style.visibility = 'visible';
            }
            else {
                $get('SignInButton').style.visibility = 'visible';
                $get('SignOutButton').style.visibility = 'hidden';
            }
        }
        function signIn() {
            if (Microsoft.Live.App.get_auth().get_state() !== Microsoft.Live.AuthState.authenticated) {
                Microsoft.Live.App.signIn(signInCompleted);
            }
        }
        function signInCompleted(signInCompletedEventArgs) {
            if (signInCompletedEventArgs.get_resultCode() !== Microsoft.Live.AsyncResultCode.success) {
                // Take action.
                Sys.Debug.writeLine("error: " + signInCompletedEventArgs.get_error());
            }
            updateButtons();   
        }
        function signOut() {
            if (Microsoft.Live.App.get_auth().get_state() === Microsoft.Live.AuthState.authenticated) {
                Microsoft.Live.App.signOut();
            }
            updateButtons();
        }

    </script>
</head>
<body>
    <h1>
        SignIn Using Code</h1>
    <wl:app 
    channel-url="/channel.htm" 
    callback-url="/OAuthWrapCallback.ashx?wl_session_id=<%= Session.SessionID %>"
    client-id="<Your-Client-Id>"
    scope=" WL_Profiles.View" 
    onload="{{appLoaded}}">
    </wl:app>
    <input type="button" id="SignInButton" value="SignIn" onclick="signIn()" />
    <input type="button" id="SignOutButton" value="SignOut" onclick="signOut()" />
</body>
</html>
Show: