Kaizen #24 - CORS and the JS SDK

Hello everyone!

Welcome back to another week of Kaizen!

In this post, we will discuss the Cross-Origin Resource Sharing (CORS), and how it is used in Zoho CRM's JS SDK.

What is CORS?

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers in requests to allow web apps running in origin A, access to selected resources in origin B.

The below image depicts how CORS requests are served in a browser.

Here, in a web document hosted in domain-a.com, the main page, the layout CSS, and the image is served from the same domain (domain-a.com), while the canvas image is served from a different domain (domain-b.com).

Therefore, the request to fetch the canvas image from domain-b.com is a cross-origin request controlled by CORS.

What requests use CORS?

Invocations of the XMLHttpRequest (XHR).
Web fonts so that servers can deploy TrueType fonts that can only be cross-site loaded and used by web sites that are permitted to do so.
Images/video frames drawn to a canvas using drawImage().
CSS shapes from images.

CORS Request Types

The browser decides the request type based on the request methods (GET/PUT/POST/DELETE) and the request headers.

The two types of CORS requests are

Simple Requests
Pre-flight requests

1. Simple Requests

The browser sends the header ORIGIN in the XHR (XMLHttpRequest) to inform the target site about the request's origin.
On the target site, the server compares the ORIGIN value with the allowed origins.
If the source is allowed, the target site allows access to the resource to the requested site. Otherwise, the request is denied.

2. Pre-flight Requests

Before the actual request is sent, a pre-flight request is sent to the target site.

The browser sends the pre-flight request via the OPTIONS HTTP request method.
The server sends the details about the target site such as the allowed methods and the allowed origins.
After deciding whether the target site could return the requested information based on this response, the browser makes the actual GET/POST/PUT/DELETE request.

Therefore, the server must send back the header Access-Control-Allow-Origin in the response header to serve simple and pre-flight requests appropriately.

Access-Control-Allow-Origin : [origin]

Example : Access-Control-Allow-Origin: https://www.example.com

This header allows only the website mentioned here to access the resources.

Here, https://www.example.com can access the resource on the target site, since it is explicitly allowed.

The server compares this value to the one sent in the ORIGIN header of the request, and accepts/rejects the request accordingly.

Access-Control-Allow-Origin : *

Example : Access-Control-Allow-Origin: *

The wildcard character (*) means that any site can access the resource in the target site. This practice is unsafe and hence, not widely used.

CORS and Zoho CRM JS SDK

Zoho CRM's JS SDK contains methods to invoke Zoho CRM's APIs that are CORS-enabled. All you have to do is register your JS app in Zoho Accounts Developer console and authenticate it.

You can then just use the methods available in our JS SDK in your code, and make API calls to Zoho CRM.

Prerequisites

Your app must have the redirect.html page to which the access token is sent.
The redirect.html page must contain the script to save the tokens in local storage based on the parameters sent after user authentication.

Before you can use the CRM APIs, you must

a. Register your app

b. Authenticate your app

a. Register your app

Go to https://api-console.zoho.com.
Click ADD CLIENT.
Choose the client as Java Script and click CREATE NOW.
Specify the client name, homepage URL of your app's UI, redirect URI (the HTML page of your application where you want the users to be redirected to after providing consent to your app), and the JavaScript domain.
Click CREATE.
Your client ID, client secret will be displayed under the Client Secret tab.

b. Authenticate your app

Call the authorization URL from your HTML app.
https://accounts.zoho.com/oauth/v2/auth?scope={scope}&client_id={client_id}&response_type=token&state=zohocrmclient&redirect_uri={path_to_the_redirect.html_of_your_app}
Provide the necessary scopes, and the redirect_uri.
The Zoho Accounts page prompts for user credentials. The user enters the credentials and may grant access for the entire session.
After the user grants access, Zoho Accounts redirects the user to the page you specified in the redirect_uri. You can see the access_token, grant_for_session as parameters to the redirect uri in the address bar.
Example: javascriptDomainName/redirect.html?access_token={access_token}&grant_for_session=true|false
The redirect.html file must run the script to store the access token of a particular user in local storage and use it while making API calls to Zoho CRM. This file is available in the attached ZIP of this post.
Parse the access_token parameter to obtain the OAuth token.
Note that the OAuthtoken expires every one hour. Generate a new one as and when required.

Note

You can find the sample JS app as an attachment to this post.
You can also download our JS SDK from the Github page.

After you download the ZIP, it opens the jssdktest folder that contains the below folders.

app - This folder contains the redirect.html file which holds the script to store and retrieve tokens from local storage.
index.html - The HTML file that renders the form where the user-entered details are captured to insert a lead in Zoho CRM. This file also calls the init() method to simultaneously initialize the SDK while the user submits the form.
js - this folder contains the zcrmsdk.js and the processData.js files.
zcrmsdk.js holds all the API methods.
The processData.js file contains the script to initialize the SDK (init()), the action that happens when the user clicks the Submit button on the web page (submitData()) etc,.

Let us now see how CORS works while using the JS app.

Step - 1: User Redirection and SDK Initialization

The user visits your web page and the app redirects the user to Zoho Accounts with the client id, scopes, and the redirect URI that you have specified in the processData.js file.

The user enters the Zoho Credentials. Zoho Accounts prompts for user consent.

When the user clicks Accept, Zoho Accounts redirects the user to the URL you specified while registering your app. In our case, it is the path to the redirect.html file inside the app folder.

This step simultaneously initializes the SDK and runs the script to store the token.

Step - 2: redirect.html runs the script to store the access token

After the user grants access to the app, the access token is sent as a parameter in the address bar of the redirect URI.

The redirect.html invokes the setAccessToken() method and stores the token in local storage.

Here's the code snippet.

function setAccessToken() {

var hashProps = getPropertiesFromURL();

if(hashProps) {

for( var k in hashProps) {

if( hashProps.hasOwnProperty(k)) {

var key = ( k === 'access_toke' || k === 'access_token' ) ? 'access_token' : k;

var value = ( k === 'api_domain' ) ? decodeURIComponent(hashProps[k]) : hashProps[k];

localStorage.setItem(key, value);

}

setTimeout(function() { window.close(); }, 0);

}

setAccessToken();

You can also see the access token in the browser console under the Application tab.

Step-3: Display the Homepage of the app (index.html)

After the access token is obtained, the index.html page (the homepage URL you specified while registering) of your app is displayed.

The user enters the details in the form and clicks Submit.

Step-4: Invoke the submitData() method from the processData.js file

Clicking the Submit button invokes the submitData() method that contains the code to insert the lead in Zoho CRM with the details furnished in the form.

The code snippet is as follows.

function submitData()

{

var firstName = document.getElementById("firstName").value;

var lastName = document.getElementById("lastName").value;

var email = document.getElementById("email").value;

var company = document.getElementById("company").value;

var dataObj = {'First_Name': firstName,'Last_Name': lastName, 'Email': email, 'Company': company};

var input = {'module':'Leads', 'body':{'data':[dataObj]}};

headers = {'Content-Type': 'application/json'};

ZCRM.API.RECORDS.post(input).then(function(resp){

var jsonData = JSON.parse(resp);

window.location.replace(window.location.origin + "/view.html");

//location.reload();

});

}

Step-5: Make the cross-origin request to insert the lead

The method submitData() sets the headers and makes a function call to ZCRM.API.Records.post() which in turn, makes a CORS request to the Zoho CRM server.

You can see the request headers being set in the browser console under the Network tab.

As you can see, the header Access-Control-Allow-Origin contains the value as the JavaScript Domain.

When this domain and the one specified during app registration matches, the request goes through and the lead is inserted in CRM. Otherwise, the app receives the error.

Below is the screenshot after the lead is inserted in CRM.

The major advantage of using the JS SDK is that all APIs are available as JS functions, and CORS code handling is already done. All you have to do is incorporate the requested methods in your app's code and make calls from the registered JavaScript domain.

We hope you found this post useful. Stay tuned for more!

Cheers!

Zoho Developer Community

New to Zoho LandingPage?

Access Zoho LandingPage

Zoho LandingPage Resources

New to Zoho Survey?

Access Zoho Survey

Latest Feature Updates

Explore our Pricing & Plans

Zoho Survey Resources

Android Mobile Surveys

Insurvey Blogs

Insight Blogs

Tips & Tricks

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Bigin?

Signup Now

Access Bigin

Latest Feature Updates

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Tout forum

France ZUGs

Zoho SalesIQ Resources

Topic Participants
Shylaja S

Sticky Posts
Extension pointers for integrating Zoho CRM with Zoho products #8: Upload and manage Zoho Workdrive folders and files from within Zoho CRM
Keeping records on your customers and business prospects is essential for tracking data, conducting follow-ups, and running a business smoothly. When you use two separate applications, and store relevant data in each, checking and tracking data becomes
Extension pointers: Handle cases with personalized solutions using custom actions
In our last post, we detailed the steps involved in creating a custom action and the workflow from the developer and end user's side. Now let's look at a working example of how we can create a custom action and implement it in a Zoho CRM account to make
Extension pointers - Simple yet significant pointers #13: On change of field value for CRM variables
CRM variables provide global access to a variable across an entire extension. They also help in the storage of user-specific data provided by the user at the time of installation, which can later be fetched to perform data functionalities. Additionally,
Extension pointers: Extend end-user benefits and allow personalization by implementing extensions with custom actions
From our earlier post on custom actions, we know that we can create templated actions, share them with end users, and allow them to reuse those actions to achieve personalized outcomes. In this post, we'll look at how custom actions make it easy for users
Extension pointers - Simple yet significant pointers #12: Functions for Zoho CRM extensions
Functions are essential in achieving logical functionality for an extension. You can easily code your functions in Deluge using drag-and-drop tools to meet your requirements. How to create functions for Zoho CRM extensions in Sigma Go to Sigma and select