Adding a Sign-in Page
Collapse the table of content
Expand the table of content

Adding a Sign-in Page (ASP.NET Sample)

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

After you create and configure a Microsoft ASP.NET-based project, you can add an ASP.NET (.aspx) page to your website. This is the page on which all your interaction with Windows Live takes place. The user interface on this page is quite simple; it consists of a single button for starting the sign-in process. On this page you add the following:

  • <wl:app> control—Provides your application configuration information. This tag is not visible in the user interface (UI).
  • <wl:signin> control—Adds a button on your page. When a user clicks this button, it initiates the user consent and authentication process.
  • <wl:bar> control—A single UI control; contains a full Windows Live Messenger experience. This appears as a bar at the bottom of the page.
  • Code to retrieve user data—After the user signs in and gives consent, your site can work with Windows Live on the user's behalf. In this sample you add code to retrieve the signed-in user's Windows Live contacts and display them on the page.

When you use the <wl:app>, <wl:signin>, or other Windows Live controls, you are invoking the Messenger Connect JavaScript API implicitly. This practice is called declarative form, in which you use XML markup to call the API. As an alternative, you can invoke the functionality imperatively, by means of explicit calls to the API. For more information about these programming patterns see, Declarative vs. Imperative Programming (JavaScript Library).

The following procedure steps through the creation of the page, highlighting relevant points along the way.

To create the SignIn.aspx page:

  1. Add a new Web Form (SignIn.aspx) to your project.
  2. Replace the <html> element with the following code:
    <%@ Import Namespace="System.Web.Configuration" %>
    <%@ Import Namespace="Microsoft.Live" %>
    
    <script runat="server">
        public string SessionId
        {
            get
            {
                SessionIdProvider oauth = new SessionIdProvider();
                return "wl_session_id=" + oauth.GetSessionId(HttpContext.Current);
            }     
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:wl="http://apis.live.net/js/2010">
    <head id="Head1" runat="server">
        <title></title>
        <script type="text/javascript" src="http://js.live.net/4.1/loader.js"></script>
        <script type="text/javascript">
            function signInComplete(signInCompletedEventArgs) {
                if (signInCompletedEventArgs.get_resultCode() !== Microsoft.Live.AsyncResultCode.success) {
                    alert("sign-in failed: " + signInCompletedEventArgs.get_resultCode());
                    return;
                }
                if (signInCompletedEventArgs.get_resultCode() === Microsoft.Live.AsyncResultCode.success) {
                    alert("Sign in Success");
                    // Get the data context and load contacts.
                    dataContext = Microsoft.Live.App.get_dataContext();
                    dataContext.loadAll(Microsoft.Live.DataType.contacts, contactsLoaded);
    
                }
            }
            function contactsLoaded(dataLoadCompletedEventArgs) {
                $get('Name_list').options.length = 0; // Clear list of names.
                if (dataLoadCompletedEventArgs.get_resultCode() !== Microsoft.Live.AsyncResultCode.success) {
                    alert("Contacts failed to load: " + dataLoadCompletedEventArgs.get_error().message);
                    return;
                }
    
                contactsCollection = dataLoadCompletedEventArgs.get_data();
                for (var i = 0; i < contactsCollection.get_length(); i++) {
                    var contact = contactsCollection.getItem(i);
                    addOption($get('Name_list'), contact.get_formattedName(), contact.get_id());
                }
            }
    
            // Add items to the drop down list box.
            function addOption(selectbox, text, value) {
                var optn = document.createElement("OPTION");
                optn.text = text;
                optn.value = value;
                selectbox.options.add(optn);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <wl:app channel-url="<%=WebConfigurationManager.AppSettings["wl_wrap_channel_url"]%>"
            callback-url="<%=WebConfigurationManager.AppSettings["wl_wrap_client_callback"]%>?<%=SessionId%>"
            client-id="<%=WebConfigurationManager.AppSettings["wl_wrap_client_id"]%>" 
            scope="WL_Profiles.View, Messenger.SignIn, WL_Contacts.View">
        </wl:app>
            <wl:signin onsignin="{{signInComplete}}" />
             <wl:bar></wl:bar> 
            <hr />
            <table>
                <tr>
                    <td>
                        <wl:userinfo />
                        <br />
                        <label>
                            Contact list (by DisplayName):</label><br />
                        <select id="Name_list">
                            <option value="">Display Names</option>
                        </select>
                    </td>
                </tr>
            </table>
        </div>
        </form>
    </body>
    </html>
    
  3. Ensure that the necessary application keys that are used in the <wl:app> tag are defined in the web.config file.

Overview of the SignIn.aspx

Note the following key elements of the SignIn.aspx page:

  • The namespace declaration in the <html> tag.
  • The loader.js specification.
  • The <wl:app>, <wl:signin> and the <wl:bar> controls.

Namespace declaration in the <html> Tag

The <html> tag defines a namespace prefix, wl, as shown in the following example.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wl="http://apis.live.net/js/2010">

Use this namespace prefix when you add Messenger Connect controls to the page; for example, <wl:app> and <wl:signin>.

Loader.js

In the loader URL, note that

  • You can use either HTTP or HTTPS protocol. If the calling page is hosted by using Secure Sockets Layer (SSL), you must specify "https" in the loader URL to avoid receiving content alerts from the browser.
  • The file name (loader.js) in the URL is optional, because it is the default document at the URL (http://js.live.net/4.1/).
  • The loader.js is in a compact form of JavaScript, with all white space removed, and is therefore difficult to read. If you plan to debug your application, you can use the debug version of the loader (http://js.live.net/4.1/loader.debug.js).The debug version is more readable. When you use the debug version of the loader you may optionally show debug messages on your page by adding a <textarea> tag with the id value set to "TraceConsole". For example,
     <textarea id="TraceConsole" rows="15" cols="100" style="width: 99%"></textarea>
    

The loader script does the following things for you:

  • Loads the scanner, which scans the page and replaces all Messenger Connect control instances with their Document Object Model (DOM) representations. For example, if the page has a SignIn control, the scanner replaces the initial markup with the necessary DOM elements to display your name and profile photo.
  • Based on the dependencies detected by the scanner, loads all the necessary JavaScript files.
  • If you have a <wl:app> tag, initializes the application (Microsoft.Live.App) instance before activating the controls. The loader contains all application configuration data such as the channel URL, application name, and a list of scopes (for example, WL_Contacts.View).

<wl:app> Tag

In the <wl:app> tag, the following attributes describe the application configuration.

Attribute Description

channel-url

Points to a Channel.htm page on your Web site. This page must be in the same domain as your application. You already added this page as part of the process describe in Creating an ASP.NET Project. The channel-url value can be a relative path (/channel.htm) or a full URL (http://contoso.com/channel.htm).

callback-url

Also known as the return URL. Functions as the handler page to which the browser posts the verification token. The handler page sends this token back to Windows Live to obtain access tokens. The browser then uses the access tokens to retrieve user data from Windows Live. The callback-url value can be a relative path (for example, /OAuthWrapCallback.ashx?<%=SessionId%>) or a full URL (for example, http://contoso5000.com/OAuthWrapCallback.ashx?<%=SessionId%>).

client-id

Contains the client ID that you obtained from Windows Live for your application.

scope

Identifies the scope of permissions that users are invited to grant consent for. For example, if your application is being designed to display a visitor contact list, you would set the scope value to "WL_Contacts.View". In the sample site, the scope value is set to "WL_Contacts.View, Messenger.SignIn". For details about scopes, see Messenger Connect Scopes.

For a list of attributes that can be specified for the <wl:app> element, see Application Control.

<wl:signin> Tag

This control adds the sign-in button on the page. When the user clicks this button, a consent window appears and begins the user consent and authentication process.

<wl:bar> Tag

This Messenger Web Bar provides the full Messenger experience to the application's web site.

To proceed to the next step, go to Running the ASP.NET Sample.

Show:
© 2016 Microsoft