Export (0) Print
Expand All

Displaying the Sign-in Link

Bb676638.note(en-us,MSDN.10).gifNote:
This topic describes functionality that will be obsolete. This functionality is provided only to support legacy applications. Live Connect incorporates features that provide equivalent functionality.

The first step to incorporating Windows Live ID into your Web site is to insert the sign-in/sign-out link into your page.

To insert the link, include the following code in the HTML of your site. (The code shown here is from the ASP.NET QuickStart sample application.)

    <iframe 
       id="WebAuthControl" 
       name="WebAuthControl"
       src="http://login.live.com/controls/WebAuth.htm?appid=<%=AppId%>&context=myContext&style=font-size%3A+10pt%3B+font-family%3A+verdana%3B+background%3A+white%3B"
       width="80px"
       height="20px"
       marginwidth="0"
       marginheight="0"
       align="middle"
       frameborder="0"
       scrolling="no"
       style="border-style: hidden; border-width: 0">
   </iframe>
Bb676638.note(en-us,MSDN.10).gifImportant:
If the page addressed by your return URL or other pages on your site use Secure Sockets Layer (SSL), use "https" in the src attribute for the Sign in link.

You display a Web Authentication sign-in link in one of three ways: as text only, as text with a logo, or as a logo button. The following table shows an example of each type of link and the syntax required to implement it on your site.

Link type Example Identifier Syntax

Text only

Bb676638.a42c8a7e-ce6d-42a9-9308-c4d2c162c8e2(en-us,MSDN.10).png

WebAuth.htm

https://login.live.com/controls/WebAuth.htm...

Text with logo

Bb676638.f486e3f0-9fc5-41fc-8a1a-4f0736c52b83(en-us,MSDN.10).png

WebAuthLogo.htm

https://login.live.com/controls/WebAuthLogo.htm...

Logo button

Bb676638.da81e0b9-cf2d-4ecc-bfee-ff1d1f6710ad(en-us,MSDN.10).png

WebAuthButton.htm

https://login.live.com/controls/WebAuthButton.htm...

When you insert the preceding code in your Web site, you must customize it a little for your application. Specifically, you must replace the values for the appid, context and style parameters (shown in bold in the example) with the proper values for your implementation. The following table provides descriptions for these parameters.

Parameter Description

appid

The Client ID that you obtained when you first registered your site. This query-string parameter is required. It tells the Windows Live ID authentication server where to sign in the user. For details, see Getting Your Client ID for Web Authentication.

context

The parameter that holds user state for your application.

For example, if the user is on your page www.example.com/xyz.htm, you can pass "xyz.htm" to the Windows Live ID service as context. When the user is redirected back to your site, you can send him or her back to xyz.htm to continue what they were doing before signing in.

Bb676638.note(en-us,MSDN.10).gifNote:
To help protect against script-injection attacks, there are limitations on the strings that may be specified for the context parameter. Script of any kind is strictly forbidden. The Windows Live ID service will convert unsafe characters to safe characters or may discard the value that you provide altogether. We recommend that you handle state in your application by using your own proprietary cookies.

style

The set of attributes that help to make the sign-in IFRAME element fit your site visually. These attributes are defined according to Cascading Style Sheet (CSS) specifications. The following attributes are currently supported:

  • font-family
  • font-weight
  • font-style
  • font-size
  • color
  • background

When you specify a value for the style parameter, you must supply these attributes in a semicolon-delimited, URL-encoded form. For example, the following is an example of an unencoded style string.

font-size: 10pt; font-family: verdana; background: white;

In contrast, the following example shows the same string after URL encoding:

font-size%3A+10pt%3B+font-family%3A+verdana%3B+background%3A+white%3B

After you have properly customized the sign-in link code and inserted it into your page, that code causes the appropriate sign-in or sign-out link to be displayed to the user. The following figure shows the output of the Web Authentication sample application as it appears to a user who has not yet signed in.

Bb676638.5849de40-ac20-4fc7-a942-0b5038b9fa3c(en-us,MSDN.10).jpg

Make sure to incorporate the sign-in link into the design of your site so that it is easily recognized by your users.

When users click the sign-in link, they go to the Windows Live ID sign-in page. This page contains a disclaimer similar to the following: Windows Live is not affiliated with www.<your site>.com and will share with it only an anonymous ID. For additional protection, you may use an Information Card. We recommend that you design your site to prepare users for this disclaimer by letting them know that Windows Live ID and your site do not share any data. We also recommend that you have a well-defined privacy policy.

Other Resources

Live Connect

Show:
© 2014 Microsoft