Skip to main content

Authorization Code

An authorization code is a temporary code authorized by an authorization server. You can get an access token in exchange for an authorization code. Once you get an access token, you can use it to access the resources or perform actions on behalf of the user.

In Appsmith, you can achieve this by setting up an Authenticated API and configuring it to use the Authorization Code as the grant type.

Integrate with Dropbox

Let’s take an example to understand the authorization code integration with Dropbox. You have a portal app built on Appsmith, and your app users use it to upload their profiles. You already have a backend application integrated with Dropbox and want to use Dropbox to store the profiles. To achieve this, you have to create an Authenticated API and configure it to connect with Dropbox.

User Endpoint

You’ll have to connect to a user endpoint on the Dropbox platform to perform API calls. Navigate to the exhaustive list of user endpoints used by Dropbox for different API calls.

info

Dropbox provides details on headers or the content type that you will have to add to your requests.

Configure Authenticated API

For uploading files configure Authenticated API as per below table:

AppsmithDropboxValue
URLUser Endpointhttps://content.dropboxapi.com/
HeadersDropbox-API-Arg{"path": "/{{<pick the file path from widget like`` FilePicker>}}","mode" : "add","autorename" : true, "mute" : false,"strict_conflict" :false}
HeadersContent-Typeapplication/octet-stream
Authentication TypeNAOAuth 2.0
Grant TypeNAAuthorization Code
Access Token URLToken Endpointhttps://api.dropboxapi.com/oauth2/token
Client IDNavigate to Appconsole >> Select App >> Settings tab >> App keyCopy the App key and add in the Client ID field.
Client SecretNavigate to Appconsole >> Select App >> Settings tab >> App secretCopy the App secret and add in the Client secret field.
ScopesNavigate to Appconsole >> Select App >> Permissions tab >> select Scope files.content.writeCopy the scope files.content.write and add it to the field.
Authorization URLAuthorization Endpointhttps://www.dropbox.com/oauth2/authorize
Redirect URLNavigate to Appconsole >> Select App >> Settings tab >> OAuth2 >> Redirect URIsAdd the Redirect URL from Appsmith to the field and click add button.
info

To create an application you can also follow the OAuth guide available at Dropbox.

Keep the rest of the settings and click the Save and Authorize button. You’ll be redirected to the datasource screen on Appsmith with the response status as success on successful authentication.

info

You can verify if your datasource verification has been successful by checking the response_status in the address bar of your browser.

Upload Files

A user will select the files by using a Filepicker widget. Whenever a user chooses a file and clicks upload, the button will trigger the API call for uploading the file. Here’s a blueprint of interaction between Portal App and Dropbox:

Upload files workflow and interaction

  1. User selects a file and clicks on the upload button.
  2. The Upload API residing on Appsmith will be called.
  3. The Authenticated API talks to Dropbox APIs for authorization and generating a token. The token generated is added to the Upload API call.
  4. The upload request is executed on Dropbox to upload a file.
  5. Dropbox directory structure shows that the file is uploaded successfully.

You can send the response all up to the Portal App to display the uploaded file or bind it to show a message to intimate users for a successful upload.

Let’s configure Authentication API to integrate with Dropbox and create the workflow for uploading files.

Create Query

Navigate to Explorer → Click (+) next to Query/API → Select New <AuthenticatedAPIName> Query under Create Query.

The action adds an API connected to the Datasource (AuthenticatedAPI) for Dropbox. You’ll see that the User Endpoint you configured for the datasource is already available, along with the header details.

Create a query to use the Dropbox Authenticated API

There are two ways to add the headers to the APIs:

Add Headers to Authenticated API

You can add headers directly to the Authenticated API when you configure it. Here you can add the headers that are common across the APIs. For example, content type.

Add Headers to API

You can add headers to individual APIs when you add them to the platform. Here you can add headers that are specific to API.

Add Widget

Let’s add a filepicker widget to canvas and configure it to trigger the Upload API call.

  • Navigate to Widgets → search FilePicker in the search bar → Drag the widget onto the canvas.
  • Select the FilePicker Widget and navigate to the onFilesSelected event available on the properties pane.
  • Enable JS available next to the event
  • Add the following code in the input box.
{{UploadFileToDropbox.run() }} 

The above code snippet will trigger the API execution whenever from a FilePicker widget user selects a file and clicks on the Upload button available on the widget.

info

At any given point in time, you can add data to your headers by using the mustache {{}} sign. For example, FilePicker1.files[0].name for filename.

Once the API call is successful, you can navigate to the Dropbox interface and verify the file upload.

Integrate with Google Docs

Let’s look into some other integrations that you can do with Authenticated APIs. In this section, you’ll be able to configure your Google Docs integrations to your Appsmith apps.

User Endpoint

You’ll have to connect to a user endpoint on the Google Docs platform to perform API calls. Google Docs provide an exhaustive guide for integrating with Docs API.

Configure Authenticate API

Follow these steps to configure Google docs integration for an Authenticated API.

AppsmithGoogle DocsValue
URLUser Endpointhttps://docs.googleapis.com/
Authentication TypeNAOAuth 2.0
Grant TypeNAAuthorization Code
Access Token URLToken Endpointhttps://oauth2.googleapis.com/token
Client IDNavigate to Google API Console >> Select Your Project that has Google Docs API Enabled >> Select Google API Docs on API/Service Details >> Click on Client Credentials >> Select the OAuth 2.0 Client >> Copy Client IDCopy the Client ID and add in the Client ID field.
Client Secret

Navigate to Google API Console >> Select Your Project that has Google Docs API Enabled >> Select Google API Docs on API/Service Details >> Click on Client Credentials >> Select the OAuth 2.0 Client >>

Copy Client Secret

Copy the Client secret and add in the Client secret field.
ScopesNavigate to Google API doc >>Click the API you are integrating with for example (create) >> on the right Panel >> Try this method >> scroll to the show scopes link >> click on the link to reveal the scopes required for the API.

https://www.googleapis.com/auth/documents

https://www.googleapis.com/auth/drive

Authorization URLAuthorization Endpointhttps://accounts.google.com/o/oauth2/auth
Redirect URLNavigate to Google API Console >> Select Your Project that has Google Docs API Enabled >> Select Google API Docs on API/Service Details >> Click on Client Credentials >> Select the OAuth 2.0 Client >>Authorized redirect URIsAdd the Redirect URL from Appsmith to the field and click the save button.
tip

You can follow the step-by-step guide provided by Google to set up an OAuth 2.0 Client.

Keep the other settings as is and click Save & Authorize button to create the Authenticated API. You’ll be asked to sign in to your Google account and authorize the datasource. Once successfully authenticated, you’ll navigate to the Appsmith Datasource screen with response status available in the address bar. A response status as success marks the successful configuration of the datasource.

Once the datasource is added, you can create queries and perform different actions with the google docs interface.

info

You can also check out the How-To Guide- How to add OAuth2 Authorization for Integrating Google Sheets into Appsmith.

Integrate with Zoho Campaigns

Let’s look into another integration that you can do with Authenticated APIs. In this section, you’ll be able to configure your Appsmith app to integrate with Zoho Campaigns.

User Endpoint

You’ll have to connect to a user endpoint on the Zoho Campaigns platform to perform API calls. Zoho Campaigns provide an exhaustive developer guide for integrating with Campaign APIs.

Configure Authenticated API

Follow these steps to configure Zoho Campaigns' integration for an Authenticated API.

info

The Zoho APIs are location-specific, i.e., if your organization is located in the United States of America (US), then the API endpoints you use should be specific to the.com domain. For example, https://campaigns.zoho.com/ will be used if your organization is located in the US. Whenever you configure the URL in the Authenticated API, verify the location of your organization.

AppsmithZoho CampaignsValue
URLUser Endpointhttps://campaigns.zoho.in/api
Authentication TypeNAOAuth 2.0
Grant TypeNAAuthorization Code
Access Token URLToken Endpointhttps://accounts.zoho.in/oauth/v2/token
Client IDNavigate to Zoho API Console>> Select Your Application >> Select Client Secret Tab>> Copy Client IDAdd it to the Client ID field on Appsmith.
Client SecretNavigate to Zoho API Console>> Select Your Application >> Select Client Secret Tab>> Copy Client SecretAdd it to the Client secret field on Appsmith.
ScopesNavigate to the Zoho Campaign guide and click on the API you want to integrate with and check the scope required.Zohocampaigns.campaign.ALL
Authorization URLAuthorization Endpointhttps://accounts.zoho.in/oauth/v2/auth
Redirect URLNavigate to Zoho API Console>> Select Your Application >> Select Client Details>> Authorized Redirect URIsAdd the Redirect URL from Appsmith to the field and click the Update button.
info

You can follow the step-by-step guide provided by Zoho to Register the Client.

Once you make changes to the above fields, click Save & Authorize button to create the Authenticated API. You’ll be asked to authorize the datasource by signing into your Zoho Account. You’ll be navigated to the Appsmith Datasource screen with a response status as success available in the address bar on successful authentication.

Once the datasource is added, you can create queries and perform different actions with the Zoho Campaign interface.

Additional Settings

Apart from the required settings, there are some optional settings which have default values set, and you can change the configuration if the need be:

Custom Authentication Parameters

If your authorization server needs you to send some custom query parameters as part of access token request, you can add those here. You can add one or more parameters based on your needs. For example, your API needs a parameter showPrompt that is sent to authorization server and based on it your API logic either presents user with a prompt to take the consent or the prompt is not shown as the consent is already recorded. In such cases, you configure the showPrompt parameter as a custom parameter.

Add one or more custom authentication parameters

Client Authentication

If your APIs need client credentials to be sent along then you can use client authentication field. You can either choose to send the client credentials as part of:

Select the option to send Client Authentication

  • Basic authorization header by selecting Send as Basic Auth Header.
  • Body in the form of client credentials by selecting Send client credentials in body.

Advanced Settings

There are some advance settings that you can configure as part of your Authenticated API.

Send Scope with Refresh Token

With this configuration you can choose to send the scope configured for the API along with a refresh token. By default, the setting is turned off. You can turn on the settings by selecting Yes.

Select &#39;Yes&#39; to turn on the setting

Send Client Credentials with (on Refresh Token)

You can choose to send the client credentials along with refresh tokens by configuring this field. You can either choose to send the client credentials as part of header by selecting header, or as part of body by selecting body.

You can choose what best suits your business needs

With OAuth 2.0 integration, you can connect your APIs to Appsmith and build complex apps.