Cobranding Login Pages

Cobranding Login Pages

The following is a very simple illustration of the areas of the Login server page that can be cobranded using flexible-layout cobranding. To the right of the figure is the cobranding template code that created the screen you see here. Each portion of cobranding template code is approximately aligned with the rendered page element it produced. For a general discussion about flexible-layout cobranding, see Flexible-Layout Cobranding Overview.

Cobranding Login Pages

Variable Reference: Login Server Flexible-Layout Cobranding

The following are the variables you specify for flexible-layout cobranding of the Microsoft® .NET Passport Login page:

• CBLoginHead
  Specifies the content in the HEAD section for the Sign-in pages, including any error pages.

• CBLoginBody
  Specifies the content in the BODY section for the Sign-in pages, including any error pages. The token "PASSPORT_UI" must appear somewhere within this variable, at the point in the HTML structure where the .NET Passport sign-in interface block is to be inserted into the body. This token is case-sensitive and should be all uppercase. Do not include the BODY tag itself as this is provided by the Login page.

• CBLoginOnLoad
  Optional. Contains a statement to be executed when the JavaScript body onLoad() event is fired. Do not include the SCRIPT tags; this string will be injected into a preexisting script tag in the Login page.

Example of a Cobranding Template for Flexible Layout

A finished cobranding template for flexible layout might look something like the following example, as a text-only JavaScript file that contains only the required string variables. This example assumes either that only the Login page is being cobranded, or that the cobranding template seen here is being produced by server-interpreted code that generates a file tailored specifically for cobranding the Login page (based on handling the PP_SERVICE query string parameter on the URL that requested the cobranding template file). Otherwise, the cobranding template output should include variables for all of the different pages being cobranded by your site. This example combines the snippets seen on the right side of the preceding figure, and also adds a CBLoginHead variable.

// file cobrand.js
var CBLoginHead = "<STYLE>.mystyle {font-face: arial}</STYLE>"
var CBLoginBody = "<BLOCKQUOTE><H1>My Site presents .NET Passport Sign-in</H1>";
CBLoginBody += "<P>The section below is the actual sign-in interface for .NET Passport. ";
CBLoginBody += "See <A HREF='https://www.passport.com' TARGET='_new'>the .NET Passport site</A> ";
CBLoginBody += " for more information about .NET Passport.";
CBLoginBody += "<P>PASSPORT_UI"; //the token
CBLoginBody += "<P>Thanks for using My Site and .NET Passport!";

Another Example

The preceding example was necessarily under-designed so that the actual cobranding code used to create it could be shown alongside. For a more design-oriented illustration of what is possible when cobranding the Login server, see this example.

Cobranding Login for Windows XP Users

Users running Microsoft® Windows® XP and Microsoft® Internet Explorer 6.0 and later will be processed by the Login server in a slightly different manner. Windows XP and Internet Explorer 6 provide the functionality of the Credential Manager. In this environment, users who have previously signed in to .NET Passport will see their e-mail address prefilled in the sign-in dialog box and will only need to enter their password to sign in to .NET Passport.

If multiple users have signed in to .NET Passport on the same computer, and all of the users have signed in to Windows XP under the same user account, their e-mail addresses will be available in the drop-down list on the Credential Manager user interface (UI). After selecting their e-mail address from the list, users will then enter the password for the e-mail address to sign in to .NET Passport.

The Credential Manager functionality is built into the .NET Passport Login server. This means that participating sites do not have to do anything programmatically to make this functionality available to users. The Login server will automatically detect whether a user is running Internet Explorer 6 under Windows XP and display the Credential Manager UI instead of the regular .NET Passport Sign In dialog box.

The Credential Manager UI can be cobranded. You should use the CobrandImage2URL field to point to the location of your site's logo, which will appear at the top of the .NET Passport credential box. Make sure this URL contains a file name for the image.

This logo must be 102 × 80 pixels and must be a GIF file. If you are implementing Microsoft® Kids Passport, this URL must be served HTTPS. Otherwise, an HTTPS URL is recommended, but not required.

Text to be displayed in the Credential Manager UI to the right of your logo should be a text string you provide in the CoBrandInstructionText field when registering your site. The size limit for this text string is 256 characters.

If you do not provide an image using CobrandImage2URL and text in CoBrandInstructionText, the default is to not show an image; the text, "Connecting to <site>" is displayed.

If you provide a logo but no cobranding text, the Credential Manager UI will display the logo and default text, as shown in the following.

.NET Passport Credential Dialog Box Showing Logo and Default Text

See Also

.NET Passport Cobranding Overview | Cobranding Registration Pages