OAuth 2.0 flows are complex, and it can be difficult to understand exactly what is going on under the covers. I found that by being able to see the data exchanges between the client and server in each step of the process, I was able to understand the OAuth 2.0 client flow. In this post I share what I did to visualize the OAuth 2.0 client flow.
You can refer to the IETF OAuth 2.0 RFC for the detailed specification, and you can check out the Constant Contact OAuth 2.0 client flow API documentation.
Fortunately there are tools that make it fairly easy to walk through the client authentication flow and see how the exchanges take place between the client, the application, and the authorization server.
Before you start
You will need the following in order to perform the steps to observe the OAuth 2.0 Client flow exchange:
- Chrome browser
- Chrome browser developer tool
- Postman extension for Chrome
- An active Constant Contact account (make sure you are logged out of any CTCT sessions).
- A Constant Contact API key (client_id)
If you do not have one, log in or create a developer account with Constant Contact, register an app and get a client_id (API key) here.
Get started
1. Open your Chrome browser and start Postman
2. Open the Chrome developer tools – click 
, select Tools >Developer tools, then click the Network tab.
3. To initiate the OAuth 2.0 flow, make the following API call in Postman
(mimics the client application directing the user to the Constant Contact authorization server):
GET https://oauth2.constantcontact.com/oauth2/oauth/siteowner/
authorize?response_type=token&client_id=<client_id>&redirect_uri=<redirect_url>
Be sure the following parameters are configured as URL params in Postman:
Param value
response_type token
client_id <api_key>
redirect_uri <redirect_uri> associated with the <api_key>
The Constant Contact authorization server responds by sending the browser to the Constant Contact login page, view the code for this web page in the Postman Body response window. View the HTML code for this on page 2:
4. Login to your Constant Contact account by making the following POST call in Postman:
POST https://login.constantcontact.com/login/
Post request URL parameters:
Param Value
goto https://oauth2.constantcontact.com/oauth2/oauth/login?response_type=token
wb false
nosell true
luser <CTCT_username>
lpass <CTCT_password>
If the credentials are correct, and you are successfully logged into your Constant Contact account, the authorization server responds with the Grant Access html page, the code for which is shown in the Postman Body response window: See page 3 for this HTML code.
5. In this step you will grant the application access to your Constant Contact account in order to get an OAuth 2.0 access token using the following request in Postman (ensure that you have Chrome Developer tools started and network tab is open):
POST https://oauth2.constantcontact.com/oauth2/oauth/siteowner/authorize
Post request URL parameters:
Param Value
user_oauth_approval true
preregistered_redirect_uri <redirect_ uil>
authorize Grant Access
Once you send the request, the authorization server sends the access token, and redirects the browser to the URL specified in the “preregistered_redirect_uri”.
6. View the access token generated as follows:
a. Go to the Network tab of the Developer Tools section in Postman; locate the POST request you made in step 5, it should have a status code of 302.
b. Click on that request, look at the response headers, and find the Location header. The location with the access token value is in the following format:
http://www.example.com#access_token=abcdef1234567890 &token_type=Bearer&expires_in=313472922
Leave a Comment