Visualizing the OAuth 2.0 Client Flow

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 chrome_menu, 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):


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 request URL parameters:

Param                   Value
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 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:

Pages: 1 2 3

Leave a Comment