How to use API GET request (Eloqua API) on a HTML page with javascript / ajax to retrieve data?

User_YJD2X · Jun 2, 2019 12:17AM

I am following this documentation: https://docs.oracle.com/cloud/latest/marketingcs_gs/OMCAC/DeterminingBaseURL.html

Using basic authentication.

I have already determined the base URL, so I am using the base URL directly in the code.

I am not 100% if i need authorization code or not (not sure, how i will get it) so i am not using this in my code: https://docs.oracle.com/cloud/latest/marketingcs_gs/OMCAC/Authentication_Basic.html

I am trying to get a list of emails by a simple GET request like here: https://docs.oracle.com/cloud/latest/marketingcs_gs/OMCAC/api-application-2.0-emails.html

So far, I have created this code but I do not see any success? why? is there any issue with my code? can anyone help please?

<!DOCTYPE html> <html> <head> <script src="<a class="jive-link-external-small" href="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" rel="nofollow">https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js</a>"></script> <script> $(document).ready(function () { var username = "MYUSERNAME"; var password = "MYPASSWORD"; function make_base_auth(user, password) { var tok = user + ':' + password; var hash = btoa(tok); return "Basic " + hash; } var url1 = '<a class="jive-link-external-small" href="https://BASEURL.com/api/REST/2.0/assets/emails" rel="nofollow">https://BASEURL.com/api/REST/2.0/assets/emails</a>'; $.ajax ({ type: "GET", url: url1, dataType: 'json', cache: false, //contentType: 'application/x-www-form-urlencoded', headers: { 'Accept': 'text/html', 'Content-Type': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded', 'Access-Control-Allow-Origin': '* ', 'Access-Control - Allow - Headers': 'Origin, X-Requested - With, Content-Type, Accept' }, //async: false, //data: '{}', beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', make_base_auth(username, password)); }, success: function (result) {' console.log(result); alert('success - this is working'); } //success: function (jsondata) { // console.log(status); //} }); alert("done"); }); </script> </head> <body> </body> </html>

I am getting the alert "done" but nothing else is happening. Please help!

Devon Guerrero · Jun 3, 2019 3:34AM

1. You will definitely need the auth code, and I'm assuming you're building it correctly with the instance name included. However, I have never personally called the api from the client side, so you might be running into CORS issues?

2. Having 'Content-Type': 'application/x-www-form-urlencoded', is a bit confusing and doesn't seem necessary.

3. What exactly is the response you receive from the server?

User_YJD2X · Jun 4, 2019 10:33AM

Hi Devon,

You are correct about CORS issue. I was getting that initially.

I did update my code and included authorization code in the header of my GET request.

Originally, I used postman and I am able to authenticate and get a response without any issues. I see an authentication code being generated. I tried copying all the headers as postman like the request was coming from postman (including authentication code), I stop getting COPS error but then I am getting unauthorized 401 error. I have triple checked all credentials, all works outside the ajax code. How can i troubleshoot?

The interesting thing is what, the authentication code I get from Postman is different from what I get using btoa() functions.

My guess is that encoding algorithm of postman might be different from this function?

I do want to create a client side solution and use the GET request to get data, extract some data points for reporting purpose.

Would it be possible for you to create a test solution with any GET request in client side code and share how it is done correctly? I think I am very close to solving this but something is not right and I am not aware where I am wrong.

User_YJD2X · Jun 18, 2019 10:57AM

Hi Denvor - Just following up...

Is it possible to get any any test solution with any GET request in client side code?

Devon Guerrero · Jun 18, 2019 7:38PM

I am also curious about a solution for this, but I have not had the time to figure it out. However, I just don't think it's possible.

Debiprasad Dey · Jun 19, 2019 3:39AM

Hi,

Most of the time I get Access Origin error in ajax call, it may be due to browser security level , while trying with chrome it didn't work but in IE it works fine. Find the below HTML page for example to pull contacts, replace the Basic Auth details and pod number and give a try in IE 10.

************************************Example Page**********************************************

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

var tblRow="";

$("#btnSubmit").click(function(){

$("#tblContact > tbody").empty();

tblRow="";

var counter=$("#ddlCounter").val();

var Contact_url="https://secure.p04.eloqua.com/API/REST/1.0/data/contacts?depth=complete&count="+counter;

$.ajax({

url: Contact_url,

method: "GET",

dataType: "json",

crossDomain: true,

contentType: "application/json; charset=utf-8",

async: true,

beforeSend: function (xhr) {

xhr.setRequestHeader('Authorization', 'Basic xyz');

},

success: function (data) {

//alert("Success");

for(var i in data.elements){

tblRow+="<tr><td>"+data.elements[i].accountName+"</td>"

+"<td>"+data.elements[i].address1+"</td>"

+"<td>"+data.elements[i].city+"</td>"

+"<td>"+data.elements[i].country+"</td>"

+"<td>"+data.elements[i].emailAddress+"</td></tr>"

}

$("#tblContact tbody").append(tblRow);

},

error: function (jqXHR, textStatus, errorThrown) {

alert("Error : "+textStatus+" "+errorThrown);

}

});

</script>

<style type='text/css'>

#tblContact {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

width: 100%;

border-collapse:collapse;

margin-top:10px;

}

#tblContact th{

padding-top:10px;

padding-bottom:10px;

text-align:left;

background-color:#bfbfbf;

color:#ffffff;

}

#tblContact th ,#tblContact td{

border:1px solid #ddd;

padding: 8px;

}

#tblContact tr:hover{background-color:#ddd;}

#tblContact tr:nth-child(even){background-color:#f2f2f2;}

</style>

</head>

<body>

<div>

<label>Select Page Size</label>

<select id="ddlCounter">

<option value="10">10</option>

<option value="20">20</option>

<option value="30">30</option>

</select>

</div>

<input type="submit" id="btnSubmit" value="Submit"/>

 

<table id="tblContact" cellpadding="0" cellspacing="0">

<thead>

<tr>

<th>

Account Name

</th>

<th>

Address1

</th>

<th>

City

</th>

<th>

Country

</th>

<th>

EmailAddress

</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</body>

</html>

**************************************************************************************************

User_YJD2X · Jun 19, 2019 12:34PM

Thank you so much for sharing the code - This is very helpful.

Question - So, it looks like i will just have to update the URL and "xyz" with the authorization code in this line:

xhr.setRequestHeader('Authorization', 'Basic xyz');

From where are you getting this authorization code at first place? Postman?

User_YJD2X · Jun 19, 2019 1:37PM

Another question - It looks like this solution works on internet explorer only.

Any workaround to make it work on other browsers like chrome & edge? Is there any way to disable CORS on these browser so this solution can run?

Debiprasad Dey · Jun 20, 2019 2:30AM

Ya I used to copy the authorization code from POSTMAN, and it's working in IE only. I am checking for other browsers like Chrome. Will update once get it fixed

User_YJD2X · Jun 20, 2019 7:36AM

Thank you for your response and sharing the code. Yes - it works great on IE but since IE browser is not available elsewhere, it is quite import (for me - in this use case) to be able to run the solution on common browsers like chrome.

If you come up with any solution (still client side), I would appreciate if you could please share it with us here.

John Proestakes · Jun 6, 2020 4:05PM

Including your eloqua credentials in an html page on the internet would be a security risk, and expose your login information to the public. You could build a proxy in PHP or nodejs that does the API call on the server--or locally on your machine --and then it returns the JSON object to an html page to display.

there is a web api (browser based) that does something like youre trying to do, but again, the way that eloqua's authorization token is just your username and password, doing this would expose your login information to rest of the internet and be a security risk to you and your organization. Some tokens are obtained through another service (oauth), so the token is generated after a user logs in with their own credentials, and that token exists only in their session and not on the public internet.

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

https://swizec.com/blog/waste-hours-fetch-brainfart/swizec/7173

i use node-fetch on my local machine to do api calls, the documentation is here:

https://www.npmjs.com/package/node-fetch

more information on using node-fetch with authorization headers:

https://hackersandslackers.com/making-api-requests-with-nodejs/

hope that helps

John Proestakes · Jun 6, 2020 4:09PM

For this use case (pulling contact information) using the REST api is unnecessary, you can use the eloqua web lookup api:

https://docs.oracle.com/en/cloud/saas/marketing/eloqua-user/Help/EloquaAsynchronousTrackingScripts/Tasks/DataLookups.htm

You set it up in your eloqua instance under Assets > Website Setup > Web Data Lookup

It gives you pretty much all of the code you will need to access the contact information, and at the same time you can set up which fields you would like to return in the call, so you're not overexposing contact information, and minimizing any risks with PII.

Categories

How to use API GET request (Eloqua API) on a HTML page with javascript / ajax to retrieve data?

Answers