https://www.mysite.com/cobrand.js?lid=1033\&PP\_SERVICE=login\&PP;_PAGE=ppLogin

Flexible-Layout Cobranding Example

This topic presents an example of flexible-layout cobranding of the Microsoft® .NET Passport Login page. This example uses a cobranding template that is a static JavaScript file.

.NET Passport Login Page Content

The following example shows a sample URL of a .NET Passport Login page, including query string parameters, followed by a simplified representation of the code of the actual Login page. You can see that within the first SCRIPT tag, the participating site's JavaScript template is included into the Login page. Within the second SCRIPT tag, the JavaScript variables from the template are written out to the page, displaying the participating site's HTML cobranding content. First the HEAD tag content is displayed, then the BODY content is divided into two sections that surround the PASSPORT_UI token. Next, the BODY content that precedes the user interface (UI) is displayed. Then, the .NET Passport Login form is presented (represented by pseudocode in this example). Finally, the BODY content that resides below the UI is presented.

<SCRIPT LANGUAGE=JavaScript SRC="https://www.mysite.com/cobrand.js?lid=1033&PP;_SERVICE=login&PP;_PAGE=ppLogin"></SCRIPT>
<SCRIPT>
	document.write(CBLoginHead);
	PPCBBody = CBLoginBody;
	var PPCBBodyPre = PPCBBody.substring(0, ppuiIndex);
	var PPCBBodyPost = PPCBBody.substring(ppuiIndex + CBToken.length);
	document.write(PPCBBodyPre); 
</SCRIPT>
... .NET Passport Login UI is displayed here ...
<SCRIPT>
	document.write(PPCBBodyPost);
</SCRIPT>

Cobranding Template

The following example shows the cobranding template that is included into the .NET Passport Login page shown in the preceding example. This JavaScript file returns both Login and Registration cobranding variables because the same script file is used for both. JavaScript variables required for the Registration page will be ignored by the network Login page code, and vice versa. Above the sample cobranding template is the URL used by the Login page to retrieve the template. The query string parameters on the URL have been appended by the Login page, but are not used by the template in this example.

https://www.mysite.com/cobrand.js?lid=1033&PP_SERVICE=login&PP;_PAGE=ppLogin

// file cobrand.js - do not use SCRIPT tags, this is already a SRC= include
CBLoginBody = "<BLOCKQUOTE><H1>My Site presents Microsoft .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 ";
CBLoginBody += "</A> for more information about .NET Passport.";
CBLoginBody += "<P>PASSPORT_UI";
CBLoginBody += "<P>Thanks for using My Site and .NET Passport!";
CBLoginBody += "</BLOCKQUOTE>";	
CBRegistrationBody = "<BLOCKQUOTE><H1>My Site presents .NET Passport Registration</H1>";
CBRegistrationBody += "<P>The section below is the actual registration interface for .NET Passport. ";
CBRegistrationBody += "See <A HREF='https://www.passport.com' TARGET='_new'>the .NET Passport site";
CBRegistrationBody += "</A> for more information about .NET Passport.";
CBRegistrationBody += "<P>PASSPORT_UI";
CBRegistrationBody += "<P>You will need to register for a .NET Passport in order to continue viewing My Site.";
CBRegistrationBody += "</BLOCKQUOTE>";

There is no harm in defining variables that are not going to be used by a particular call to the template as in the preceding example. However, using an Active Server Pages (ASP) page that dynamically generates the JavaScript variable definitions based on query string parameters passed into the script can reduce the size of the download required for cobranding. For an example, see Flexible-Layout Cobranding (Branching Example).

Cobranded Page

The resulting cobranded page from the preceding examples would appear to the user as follows:

 

Flexible-Layout Cobranding of Sign-In Page

 

The requests and responses involved in this process are illustrated in the following diagram. The round-cornered boxes represent pages or code that are served by your site.

 

Flow Diagram of Flexible-Layout Cobranding

 

See Also

.NET Passport Cobranding Overview | Using the coBrandArgs Parameter for Flexible-Layout Cobranding | Flexible-Layout Cobranding Overview