cancel
Showing results for 
Search instead for 
Did you mean: 
Tomorrow morning (8/26) from 07:00 AM - 08:00 AM ET we need to make a few updates to our site. During this time, no emails will be sent and some customers will not be able to access their contacts. We recommend finishing up your work before 07:00 AM and logging in after 08:00 AM ET. Thank you for your patience while we make these updates.

Visualizing the OAuth 2.0 client flow

Moderator

Visualizing the OAuth 2.0 client flow

This post was written by Ravi Kulkarni on the Web Services team. You can find the original on the Tech Blog.

 

OAuth 2.0 flows are complex, and it can be difficult to understand exactly what is going on under the covers. I found that being able to see the data exchanges between the client and server in each step of the process was a key to understanding the OAuth 2.0 client flow. 

In this post I share how what I’ve done to visualize the OAuth 2.0 client flow.

 

Refer to the IETF OAuth 2.0 RFC for all the details in the specification, and 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.

 

I use Postman to go through the process of a Constant Contact user authenticating themselves, and then authorizing or granting an application access to their Constant Contact account, which in turn generates an access token for the application to use going forward for that user. 

 

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
  • A 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 an API key, log in or create a developer account with Constant Contact, and register an 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.

    Initiate OAuth 2.0 client flow
  3. To initiate the OAuth 2.0 flow, the client directs the user to the Constant Contact authorization server; do this by making the following API call in Postman:

GET https://OAuth 2.0.constantcontact.com/OAuth 2.0/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.

 

  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://OAuth 2.0.constantcontact.com/OAuth 2.0/oauth/login?response_type=token
wb                          false
nosell                    true
luser                      <CTCT_username>
lpass                      <CTCT_password>

 

If the user credentials are correct, and you are successfully logged into your account, the authorization server responds by displaying the Grant Access page, the code for which is shown in the Postman Body response window.

 

   5. Now you will grant the application access to your Constant Contact account, and the server
       will return the OAuth 2.0 access token. Grant access by making the following request in
       Postman; ensure that Chrome Developer tools are open and the network tab is open:

 

POST https://OAuth 2.0.constantcontact.com/OAuth 2.0/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 “preregistered_redirect_uri”.

 

 6. View the access token generated as follows:

http://www.example.com#access_token=abcdef1234567890&token_type=Bearer&expires_in=313472922

 

Rich Marcucella
Sr. Technical Writer, Content Developer
Web Services Team
http://developer.constantcontact.com
2 REPLIES 2
Occasional Visitor

Re: Visualizing the OAuth 2.0 client flow

How to get token_access value from url for query string pls anyone gives the sollutions.

Moderator

Re: Visualizing the OAuth 2.0 client flow

Hello,

 

Thank you for reaching out to the API Support team here at Constant Contact.

 

I'd be happy to answer any question you may have. I just need a bit of clarification on what you are looking for help with. Are you building out Oauth2 for a client side app and having trouble getting an access token?

 

 

Sincerely,

David B.

API Support Specialist