Platform
APIs & SDKs
Resources

...

Authorization in practice

Introduction

This tutorial guides you through the Authorization Code Grant flow, which is typical for server-side apps. As an example, we'll show you how to list chats using the Agent Chat Web API.

Together, we'll go through the following steps:

  1. Configuring the Authorization building block of your app

  2. Acquiring the code

  3. Exchanging the code for an access token

  4. Sending a request

Before you start

Make sure you have:

  • a LiveChat Owner or Admin account. Sign up for free if you don't have it.
  • a server-side application in Developer Console. Find out how to create one.
  • correct scopes for the selected method. See documentation.
  • any tool that will allow you to send requests (Postman, terminal, etc.)

Step 1 Configure the Authorization building block

To use any method from the Agent Chat, Customer Chat, and Configuration API, your app needs to have an Authorization building block. This is where you'll configure authorization details.

LiveChat Developer Console

However, before that, you must decide if you are building a JavaScript or server-side app. We will use the server-side app in our guide.

LiveChat Developer Console

In the Authorization building block of your app, you'll find the fields you need to go through the authorization process:

  • Client Id, which is the identifier of your app. It's considered public info.
  • Client Secret, which is a confidential identifier. We will use it in Step 3. Copy it as it won't be visible once you refresh the page. Store it in a safe location. In production apps, Secret is usually stored on a server.
LiveChat Developer Console
  • Redirect URI whitelist - the address of your app that will receive the code and access token in a URL. Using only this address, one can acquire a code or token. App users will be redirected to this address after successful authorization.
  • Access scopes - most methods require certain scopes. See the API documentation to find out what scope your app needs to use the List Chats method.
LiveChat Developer Console

When it's all set, we can proceed with code generation. Make sure to have your Client Id, Client Secret, and Redirect URI at hand.

Step 2 Acquire the code

Start by pasting your Client Id and Redirect URI in the following request:

GENERAL REQUEST FORMAT
Copied!
https://accounts.livechat.com/
?response_type=code
&client_id=<CLIENT_ID_HERE>
&redirect_uri=<REDIRECT_URI_HERE>

For Client Id: 81e8a326ec4a63252faa0ae6f660c0c8 and Redirect URI: https://www.livechat.com/, the request looks like this:

https://accounts.livechat.com/
  ?response_type=code
  &client_id=81e8a326ec4a63252faa0ae6f660c0c8
  &redirect_uri=https://www.livechat.com/

Paste this snippet in the browser and copy the returned value. Make sure you're logged in to the exact same LiveChat account that was used to create the app in Developer Console. Otherwise, you'll be asked to log in first.

https://www.livechat.com/hello-again/?code=dal%3Ak0FTiZgtBkTLnzXlatwt6Fgvpp4&state=
LiveChat Developer Console

If you ever get a code or a token that contains %3A, change it to : (a colon). Normally, URL encoding replaces : with %3A. In that case, the code looks as follows:

dal:k0FTiZgtBkTLnzXlatwt6Fgvpp4

Normally, at this point during app installation, the app asks users to access certain resources of their accounts. If they agree, they are redirected to the Redirect URI defined in Developer Console with code in the response.

Step 3 Exchange the code for an access token

Now we have to exchange code for token to authenticate the identity of our application.

To do that, we'll send an HTTP POST request providing code, Client Id, Client Secret, and Redirect URI. We'll use Postman. You can read more about exchanging code for access token and refresh token here. Please remember to replace sample parameters with your own.

GENERAL REQUEST FORMAT
Copied!
curl "https://accounts.livechat.com/v2/token" \
  -X POST \
  -d "grant_type=authorization_code&\
  code=YOUR_CODE_HERE&\
  client_id=YOUR_ID_HERE&\
  client_secret=YOUR_SECRET_HERE&\
  redirect_uri=YOUR_redirect_HERE"

You'll get an object with not only the access token, but also the refresh token, scopes, expiration time, and other.

LiveChat Developer Console

You can find all the requests from the Agent authorization flow in our Postman collection. Don't forget to replace sample parameters with your own.

Run in Postman

Remember the access token doesn't belong to you as an agent. It's the token of your application - that's why you specify Client Id in the request.

Learn more about Agent authorization flow, and if you're struggling with errors, check out Authorization FAQ, where we tackle the most common problems.

Step 4 Send a request

Managed to get your token? Great! You can now use it to authorize the request sent the List Chats request.

Go to List Chats in our documentation and copy the request code snippet. Once more, we'll use Postman and its Import > Paste Raw Text option. After importing, replace <your_access-token> with the actual token.

LiveChat Postman Authorization

Once you click Send, you should be able to get the response:

LiveChat Postman Authorization

All the requests from the Agent authorization flow can be found in our Postman collection. Don't forget to replace sample parameters with your own.

Run in Postman

Questions?

And that would be about it! We hope you managed to successfully send the request. You can use your access token for other methods from the Agent Chat and Configuration APIs. Remember that you cannot use the same token for Customer Chat API. Instead, use the token you have for creating a customer, and acquire a new one. In case of doubts, make sure to check out our documentation. You can always reach out to us at developers@text.com.

...

Join the community
Get in direct contact with us through Discord.
Follow us
Follow our insightful tweets and interact with our content.
Contribute
See something that's wrong or unclear? Submit a pull request.
Contact us
Want to share feedback? Reach us at: developers@text.com