Brand site Integration with CNID client

The CNID client serves social sign-on, AMG sign-on and brand site registration. The CNID client should be served over https in an iframe within a responsive modal dialog. The CNID client will communicate with the brand site via postMessage HTML5 API.

The following steps are necessary for the brand site integration with the CNID client,

Include the Bootstrap 2.3.2 CSS in the HEAD section.


	<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css">

Add markup for the bootstrap modal (that houses iframe), the spinner and the buttons (to launch the modal).
Include the following JavaScript libraries at the bottom of the page - jquery ~1.10.2, bootstrap 2.3.2, cnid-client.

3.1. cnid-client.js: This file creates a CNID property on the global object, if there isn't already one, setting its value to an object containing a init method. The init method determines the brand client's environment and sets up the iframe URL to point to a corresponding CNID environment. For instance, the brand's staging environment will point to CNID staging and all other brand environments will point to the CNID production evironment.
```
 
 <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
 <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
 <script src="https://cnid.condenastdigital.com/client/libs/cnid-client.js"></script>
 
 
```
Specify a couple of properties (postMessageCallback and initializeCNID) on the brand's global object for setting up the postMessage callback handler and for initializing the CNID client. (see sample code for details).


	var cnBrand = cnBrand || {
	postMessageCallback: function (data){
		//	callback that'll recieve data (authToken, showLoader, scrollTop, etc.) from CNID
	},
	hostEnv: function(){
		//	determine brand environment and return a String ('prod', 'stag', 'dev', 'local')
	},
	initializeCNID: function(regPath){
		CNID.init({
			iframeId: 'cnidClient',         //  required, id of iframe hosting the CNID client
			brand: 'com.condenet.glamour',  //  required, brand name launching the CNID client
			regPath: regPath,               	//  required, path to configure the CNID client, (possible values "auth" or "commenting")
			regSrc: 'CNEE_GLM',             //  required, registration source
			postMessageCallback: this.postMessageCallback  //  required, callback method that'll receive postMessage data from the CNID client
			hostEnv: this.hostEnv			//	optional, function callback that determines brand environment (possible return values are 'prod', 'stag', 'dev', 'local')
		});
	}

Setup click handlers on buttons that'll initialize the CNID client (via commenting or auth flows) and launch the responsive modal window.

 
 $('#signInRegisterBtn').on('click', function(){
 	//	launches CNID via auth flow
     cnBrand.initializeCNID('auth');
 });
 $('#commentingBtn').on('click', function(){
 	//	launches CNID via commenting flow
     cnBrand.initializeCNID('commenting');
 });

Messages/data from the CNID client

On the brand site, the postMessageCallback handler setup can expect to receive the following properties on the data object passed from the CNID client.

scrollTop - boolean, scroll to the top of the page within the modal when an error message is displayed.
showLoader - boolean, show loading status while the CNID client loads.
authToken - string, use authToken to close the modal window and fetch cookie information from the CNID server and log the user in.
rememberMe - boolean, true if user checks 'Remember Me' during login.
alert - object (with properties 'message' and 'type'), show alert message in a popover for mobile devices. The CNID server determines the device type, so no device type detection will be needed on the brand client, the brand client just shows the alert message in a popover when it receives the data via postMessage event from CNID client.

The following property should be defined on the brand's global object, and should be available on any page that uses the CNID client.


// called every time cnid tries to communicate to brand client
postMessageCallback : function(data) {
	// scroll to top
	if (data.scrollTop) {
		$("#frameContainer").animate({
			scrollTop : 0
		// scroll to top
		}, 1);
	}
	//	show loader
	if (data.showLoader) {
		$('#loader-container').show();
	} else {
		$('#loader-container').hide();
	}
	//	got auth token
	if (data.authToken) {
		// use token to get cookie information from the CNID server
		// log user in
		$('#myModal').modal('hide');
	}
	//  show alert message
	if (data.alert) {
		//	set the alert message
		$('#alert-txt').html(data.alert.message);
		//	set the css class on the message container
		$("#alert-message")[((data.alert.type==="error")? "add":"remove") + "Class"]("alert-error");
		$('#alerts-container').show();
	}
}

Cross-browser issues

To fix content overlflow issues on iOS Safari, the CNID client communicates with the brand client via postmessages scrollTop, showLoader and alert.

veeracs/postmessage

Brand site Integration with CNID client

Messages/data from the CNID client

Cross-browser issues