Hi all! I am building out a WDC for tableau to connect with a third party API (the API is through a company called Simpli.fi). This API does not require an OAuth, but it does need 2 headers including the “X-User-Key” and the “X-App-Key”.
When I call this api through a software called Postman with my two keys (the user key and the app key), I receive all of the data I need in JSON format. However, I am trying to build out a flow in my JavaScript file and am receiving nothing.
I want this WDC to require a sort of “login” – in the user interface, the user would plug in their “X-User-Key” and “X-App-Key” in an HTML input box. The JavaScript file would then take these inputs into the loginFlow() function and add them to the “headers”. I would really appreciate any help that I can get at this point - a fresh set of eyes would be much appreciated.
snippet of HTML containing the input fields:
<div class="text-input-fields">
<div class="text-box" style="padding: 25px; align-self: center; vertical-align: middle; margin: 30px">
<form action="./simplifiapi.js">
X-User-Key: <input type="text" name="User API Token"><br>
<br />
X-APP-Key: <input type="text" name="API Token"><br>
<br />
<div class="container container-table">
<div class="row vertical-center-row">
<div class="text-center col-md-4 col-md-offset-4">
<button type="button" id="submitButton" class="btn btn-success" style="margin: 10px;" onclick="loginFlow(x_user_key, x_app_key)">Get Campaign Data</button>
</div>
</div>
</div>
</form>
</div>
</div>
JavaScript function to put the HTML items into:
'use strict';
function loginFlow() {
var x_user_key = document.write(document.getElementsByName("User API Token").textContent);
var x_app_key = document.write(document.getElementsByName("API Token").textContent);
const baseUrl = 'https://app.simpli.fi/api';
const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
var loginBtn = document.getElementById("submitButton");
var settings = {
"url": proxyUrl + baseUrl,
"method": "GET",
"headers": {
"x-app-key": x_app_key,
"x-user-key": x_user_key,
"Accept": "*/*",
"Cache-Control": "no-cache",
"cache-control": "no-cache",
"cookie": true
}
}
// login error handle
if (response.status != 200) {
alert('invalid login credentials');
} else {
console.log('you have access yay');
buildURL(pageCount, page_resposne);
}
buildURL(baseUrl,pageCount, page_response);
}