Accessing external data from Help Center
I am working on customizing the New Request Page for my company's Help Center, and I am having doubts about how to access external data, and what is actually available via Zendesk's framework.
I have previously created a Zendesk App which is displayed on the Ticket page, and this app accesses our company's API to load some data for our agents to use when creating or editing tickets. There are plenty of information for making Requests and accessing external data for the Zendesk Apps, including what's available through the framework, but I cannot find much information for how this is supposed to be done on pages in the Help Center.
Can someone please point me to some documentation where there are some explanation on this topic?
In addition, our API uses basic authentication, and I would like to know how/where to store the API password when calling it from the Help Center. On our App, the API password is stored in the settings during App installation so no one can see it when looking at the page source.
Since I could not find any documentation on how to get external data from the Help Center, I am using JQuery ($.ajax()) to call the API, but I am getting errors related to the cross-site requests.
For our App, I have the following code for the API call:
requests: {
getApiData: function(apiUrl) {
return {
url: apiUrl,
type: 'GET',
dataType: 'json',
secure: !this.isZatEnabled(),
headers: {
'Authorization': 'Basic ' + btoa(this.apiAuth)
}
};
}
},
And it works fine. I also have the domainWhitelist entry in my manifest.json:
"domainWhitelist": ["{{setting.subdomain}}.mydomain.com"],
However, in the Help Center, I am trying with this code (and a lot of different variations, specially for headers), and am having the cross-site request errors:
$.ajax({
url: 'https://myapiurl.com',
type: 'GET',
contentType: 'text/plain',
headers: {
'Authorization':'Basic mykeybase64'
},
success: function(data) {
console.log('success');
console.log(JSON.stringify(data));
},
error: function(textStatus) {
console.log('error');
console.log(textStatus);
}
});
The error I am getting is:
XMLHttpRequest cannot load https://myapiurl.com. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://fiddle.jshell.net' is therefore not allowed access. The response had HTTP status code 405.
Thanks!
-
After trying different things, I realized the problem is that I needed to setup and use CORS for this. Which I have done yesterday, and it is working now. I guess I was confused with the reason for it working on the App but not on the Help Center pages. For the App, the ajax requests happen through Zendesk Proxy, and I am assuming that for the Help Center there is no Proxy available.
One question I still have is with regards to storing the API Token. Does the Help Center offer any framework for this?
Thanks!
-
Hey Alex! Thanks for coming back and sharing what you figured out! I'll see if I can find someone to answer your question about the API token. :)
-
Hello Alex,
Unfortunalty the help center does not provide any framework for the storing the API token also we are currently unable to apply the apps framework to the help center.
-
Thanks for the replies.
Is there a suggested method for handling/storing external API tokens?
For instance, if I had to access Zendesk's API from the Help Center. Maybe we wanted to retrieve some information to show the user on one of the pages on the Help Center, where would I store my Zendesk's API token?
Clearly, just hard-coding it in the Javascript code would not be best practice, because any user with a little bit of web development experience would be able to see it, and use it.
Thanks!
-
Hi Alex,
As Klara said before, the Help Center does not provide any framework for the storing the API token. Sorry about that.
Please sign in to leave a comment.
5 Comments