The Community is hosting an End of Summer sweepstakes! Participants must complete tasks to earn tickets that will enter them with a chance to win a free year of Constant Contact and other great prizes!*
*No Purchase Necessary. For Official Rules, visit here. Constant Contact’s End of Summer 2020 Sweepstakes ends on October, 20, 2020 at 11:50 PM EST.

Oauth and javascript

SOLVED
Go to solution
Highlighted
Occasional Contributor

Oauth and javascript

Hey.

I'm new to Oath.
I am trying to create a multi-site multi-user app, which means the redirect URI will be different for each person deciding to install the app on their server.


Asking each of them to apply for their own API-key is not exactly userfriendly.

If I understood correctly, using the three-legged Oauth 1.0 is the way to go in this scenario?


Also, is it possible to do this using javascript?

I have found very little documentation and code-examples about Oauth,

and even less for javascript. I only managed to find a javascript library without documentation and a warning saying:
"Do not use this library unless you understand the difficulties that cross-domain XMLHttpRequest poses...which I don't.

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Moderator

Re: Oauth and javascript

That's 100% correct Henrik.  The Client flow does a simple 302 redirect to the callback URL in the browser, not server side. So the browser will load up your static helper-example.com page with the token in the fragment.  You'll simply need to pull that token from the fragement in JavaScript and then pass it back to the parent window.

 

The last step that you'll need to do on your server is to collect the username.  Which is simply doing this step (note: this can't be done in JavaScript as it results in a cross site scripting error when trying to make  POST request to another domain, it must be done on server side but you can use AJAX to make the page not reload):

 

URL: https://oauth2.constantcontact.com/oauth2/tokeninfo.htm?access_token={the_token}

METHOD: POST

CONTENT-TYPE: application/x-www-form-urlencoded

 

Response is a JSON payload with the following information:

 

{

  "client_id" : "some_guid",

  "user_name" : "the_username",

  "expires_in" : 311216665 // time in seconds from current time until token expires, starts at 10 years

}                             

Dave Berard
Senior Product Manager, Constant Contact

View solution in original post

7 REPLIES 7
Highlighted
Occasional Contributor

Re: Oauth and javascript

Is it possible at all, to use Oauth with Constant Contacts, using only javascript, and making the redirect URI be variable, and point to the site that originally sent the request?(and this page will be a different URI for every guy using the app)

Highlighted
Trusted Contributor

Re: Oauth and javascript

Hello, 

 

Any number of Constant Ccontact accounts can authenticat using a single application's API Key. The redirect uri is part of the OAuth 2 flow, in which a script you hose handles the redirect/callback, and passed the credentials on to the client, and is the approach I would recommend. 

 

We have implemented a client flow, which is partly detailed at the bottom of our OAuth 2 documentation, and this can handled via javascript on a static pages you host, and then set the access token returned with the client (I am planning to post an example client flow javascript snippet soon). In this case, you just need to have one script that all clients authenticate through (using your API Key and their login credentials), which plants a the access token cookie with the client. Note that the one thing missing from our OAuth 2 documentation at present, is the request needed to retrieve the username after the acces token is obtained.

 

I hope this is helpful.  The redirect uri being specified in the API key settings is part  of the OAuth 2 standards, and is designed to prevent redirect exploits. At this time, we aren't implementing a desktop application flow.

 

You could choose to use OAuth 1.0a, for which we have a Out of Band (oob) desktop application flow, that doesn't require a staticuri, but OAuth 1.0 is programmatically more difficult to implement and troubleshoot, so I would really recommend adapting an OAuth 2 client flow strategy.

Mark Coleman
Support Engineer
Highlighted
Moderator

Re: Oauth and javascript

For some clarification on Marks great answer:

 

OAuth 1.0a is depricated and we do intend to release an end of life statement for when we are going to cut all support.  We expect this date to be sometime in 2013 (probably early 2013).  It is highly recommended to use OAuth 2.0 as it is both far easier to implement and far easier to support.

 

Regarding the multi-site, multi-user app with unique redirect URIs, this is actually pretty easy to get around.  If you use a JavaScript implementation, all you need to do is have a single, static redirect page that works like this:

 

1. Call the OAuth 2.0 flow by using window.open() in JavaScript and pass it the OAuth URL complete with your static redirect URI

2. OAuth 2.0 flow finishes from the user and goes to your static redirect URI

3. Redirect URI processes the token and username and calls a JavaScript function for passing the token and username back to the parent window (something like parent.processToken())

4. Redirect URI closes itself ending the popup window flow

 

This flow will allow you to easily process the OAuth 2.0 flow for all users, regardless of what domain they are coming from in your multi-site architecture or what user they are in their multi-user architecture since the JavaScript will be local to their information and it doesn't need to call a URI.  Hope this helps!

Dave Berard
Senior Product Manager, Constant Contact
Highlighted
Occasional Contributor

Re: Oauth and javascript

Dave, Mark, thanks for the helpful suggestions!

Just to make sure I understood what you meant, Dave:

Your workaround for the multi-site and variable URI, is to host a simple server with a fixed URI, which all the other sites go through for authenticating with your OAuth server.

The redirect will then always go back to that static host, and the clients which contacted the static-server will then proceed to acquire the token by JavaScript or some other way, correct?

 

So say we got 2 users, example1.com and example2.com, and our static authentication server helper-example.com.
Using this workaround, example1.com and example2.com should both be able to authenticate by opening a window and fetching the token from helper-example.com, which in turn got both tokens from your(Constant Contact) OAuth server.

Highlighted
Moderator

Re: Oauth and javascript

That's 100% correct Henrik.  The Client flow does a simple 302 redirect to the callback URL in the browser, not server side. So the browser will load up your static helper-example.com page with the token in the fragment.  You'll simply need to pull that token from the fragement in JavaScript and then pass it back to the parent window.

 

The last step that you'll need to do on your server is to collect the username.  Which is simply doing this step (note: this can't be done in JavaScript as it results in a cross site scripting error when trying to make  POST request to another domain, it must be done on server side but you can use AJAX to make the page not reload):

 

URL: https://oauth2.constantcontact.com/oauth2/tokeninfo.htm?access_token={the_token}

METHOD: POST

CONTENT-TYPE: application/x-www-form-urlencoded

 

Response is a JSON payload with the following information:

 

{

  "client_id" : "some_guid",

  "user_name" : "the_username",

  "expires_in" : 311216665 // time in seconds from current time until token expires, starts at 10 years

}                             

Dave Berard
Senior Product Manager, Constant Contact

View solution in original post

Highlighted
Occasional Contributor

Re: Oauth and javascript

Thanks, Dave. Much appreciated.
I havent thought very hard about it, but could the static URI "helper-server" perform the username-fetching as well?

 

Given that would be possible, would I need to use any server-side programming once I got both the username and token in the client?

I was hoping to stay javascript only in the program

Highlighted
Moderator

Re: Oauth and javascript

The helper page could be your gateway to making the username request.  Since it's a POST request to the Constant Contact domain, you can't do that in JavaScript (you'll run into Cross Site Scripting problems).  You could easily set up a server side service on your side that is callable through your helper page (I.E. provide it the access token and it will make the call on the server and then return the username to your help page via XmlHttpRequest or a similar javascript AJAX tool).  That way, your help page does to all the work, with some assistance from your server.

Dave Berard
Senior Product Manager, Constant Contact
Developer Portal

View API documentation, code samples, get your API key.

Visit Page

Constant Contact 2020 End of Summer Community Sweepstakes!

The Constant Contact User Community is hosting a sweepstakes. The more you participate, the more chances you have to win! Read on to learn more...

Read More
Featured