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!