cancel
Showing results for 
Search instead for 
Did you mean: 
Constant Contact wants to help you succeed! We’re celebrating our professional service programs on the Constant Contact Community this month and you have a chance to try one of the services for free! Learn more.

OAuth 2.0 Client Flow Demo/Example

Trusted Contributor

OAuth 2.0 Client Flow Demo/Example

Without much fanfare, Constant Contact has implemented and added documentation for a Client Flow for OAuth 2.0 Authentication. This fills a vacant need to provide more workable authentication options for partners or developers creating integrations for use by multiple Constant Contact accounts, as it allows for client-side management of the authentication credential (the access token), which can be stored as a cookie. Once stored, the access token can be retrieved from the client by server-based application which can use it to request the username for the account authenticated with the token.

 

What it boils down to is that users of integrations can authorize their client's access using OAuth 2.0 without the need for server-side management of credentials for multiple Constant Contact accounts. That makes client flow workable for desktop applications as well, although in that case with OAuth 2.0 there is still a need to host a web-based callback script designated as the safe "Redirect URI" to accept and store the access token returned after successful authentication. Because the Client flow includes only one callback to the reirect_URI, and returned the credentials in a hash appended to the Redirect URI, obtaining the access token can be quite easily handled with Javascript.

 

Here's a barebones example Javascript that will do the trick:

<script>

var apiKey = "YOUR_API_KEY"; 
var callback_uri = "YOUR_FULL_URL_FOR_THE_ccclientflow.html";

// NOTE: YOU ALSO MUST set Redirect URI for API Key to full home url for this HTML/JS document
// The Redirect URI MUST match the callback_uri - this is part of the OAuth 2 Standard

// Parse parameter values returned after call to authenticate
function parseParams (params) {
	var ccAuth = Array();
	var authData = params.split("&",4);
	for (i=0; i < authData.length; i++) {
		var paramVal = authData[i].split("=",2);
		ccAuth.push(paramVal[1]);
	}
	return ccAuth;
}

// Stores the access token cookie
function setCookie(token) {
	document.cookie = "ccauth" + "=" + token;
	return;
}

// This code does all the important work
if (window.location.hash.length == 0) {
	var path = 'https://oauth2.constantcontact.com/oauth2/oauth/siteowner/authorize?';
	var queryParams = ['client_id=' + apiKey,
     	'redirect_uri=' + callback_uri,
     	'response_type=token'];
	var query = queryParams.join('&');
	var url = path + query;
	window.open(url,"_self");
} else {
	var rawParams = window.location.hash.substring(1);
	var oAuthData = parseParams(rawParams);
	setCookie(oAuthData[0]);
	for (i=0; i < oAuthData.length; i++) {
	    document.write(oAuthData[i] + "<br />" );
	}
    document.write('<br /><a href="index.php">Click here</a> to go to the app.');
}
</script>

 

A highly commented version of this demo that includes a demo PHP App which retrieves the cookie from the client, and requests the username can be found and downloaded from this Github Repository. This more highly commented version also writes and echos additional text to your web browser, explaining the steps in the flow as they are carried out. The script is intended simply as a demo, and is not supported, but I hope it will be a useful example for those seeking to grasp and implement an OAuth 2.0 Client Flow strategy in their integrations.

Mark Coleman
Support Engineer
1 REPLY 1
Occasional Contributor

Re: OAuth 2.0 Client Flow Demo/Example

do you have any examples on how to get the list of campaigns with javaxcript  / ajax ?

 

from this list http://archive.constantcontact.com/fs024/1102430953111/archive/1102535281206.html