Note
This article pertains to the Quickbase updates that enhance security. Learn more about posting a temporary token from a Quickbase field.
This article discusses changing your code pages in your Quickbase apps to meet the upcoming security changes and help keep your data secure.
Additionally, if you use our extensions from outside Quickbase, you likely need to implement a code page to continue using our extensions in the same way.
This article is written for people with the technical skills to change and implement code pages. If you have questions about changing any of these features to comply with our new security measures, submit a technical support case.
Use cases
Existing code page
If you have an existing code page that uses our extensions, you need to implement a way to gather a Temporary Authorization token and pass it to our extension through the body or form of the request. This must be done this way because of how our extensions interact with the Quickbase front end—they need to POST a token to us to consume while also redirecting the user, all in one call.
The following is an example of this code snippet, showing some temp-token logic:
To summarize, first gather the temp-token using the authorization call to the JSON API. This only works if the user has an ongoing session within Quickbase.
Next, create a form element in your DOM (if one is not already present) and add an input named TempToken, setting the value to the authorization token you received. Append that input to the form, and submit the form. Make sure you set the form's method to POST and, if you want to open the result in a new tab, set the form's target.
If you want to open the extension in a pop-up from here, use the form event onsubmit to set the target of the submission.
Otherwise, if you don't need to present the extension to the user and only need to call the extension to start a process, you can POST directly to the extension with the temp-token in the body, keyed as TempToken. You need to do some work to figure out how this works. Our suggestion is to manually create the body as described. However, another option is to use a form submission with preventDefault on the submission event and add further logic to complete the POST. Another method is to use a hidden iframe and set the form's target to the iframe—this way the redirect technically happens but is hidden.
Dashboards and outside of Quickbase—bookmarks, links, etc.
If you are currently using an extension from a source outside of Quickbase, or in a place inside Quickbase that doesn't have access to temp-tokens (Dashboards)—you can use the following code page.
Create a new code page with the following code, and make note of the PageID:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
//run a URL directly through fetch
async function RunXMLAPI(url) {
//generic header
var headers = {
'User-Agent': 'XML_API_Pre-Action_for_Quickbase_Extensions',
'Content-Type': 'application/xml'
}
//fetch URL with POST, most of the XML API is suggested with POST
const response = await fetch(url, {
method: 'POST',
headers: headers,
});
//if there was an error, navigate over to the URL so that it displays the exact DOM as it would have before
if (response.status != 200) {
location.href = url;
}
return;
}
//get the temp token for a given DBID
async function GetTempToken(dbid) {
var headers = {
'QB-Realm-Hostname': window.location.origin,
'User-Agent': 'Temporary_Token_For_Quickbase_Extensions',
'QB-App-Token': '',
'Content-Type': 'application/json'
};
//get the token
const response = await fetch('https://api.quickbase.com/v1/auth/temporary/' + dbid, {
method: 'GET',
headers: headers,
credentials: 'include'
});
const token = await response.json();
//return the token
return token;
}
//get temporary token for given DBID and form-submit redirect to the add-on
async function RunAddonWithTempToken() {
const form = document.createElement('form'); //create a form
form.method = 'POST'; //set action to POST so we can include the temp token
form.action = window.atob(urlParams.get('exturl')); //set the URL to direct the form submission to
form.rel = "noopener noreferrer";
let token = await GetTempToken(urlParams.get('extdbid')); //get the token
const tempTokenInput = document.createElement('input'); //set an input element to have the temp token
tempTokenInput.type = 'hidden';
tempTokenInput.name = "TempToken"; //name needs to be TempToken here as to match up properly
tempTokenInput.value = token.temporaryAuthorization; //set the value
form.appendChild(tempTokenInput); //append the input into the form
document.body.appendChild(form); //put the form into the body
form.submit(); //submit the form
}
window.onload = async function (e) {
try {
if (urlParams.get('exturl') == "" || urlParams.get('exturl') == null || urlParams.get('extdbid') == "" || urlParams.get('extdbid') == null) {
document.getElementById("message").textContent = "The URL is missing necessary parameters. Please contact your app administrator."
return;
}
let apicallparam = urlParams.get('apicall');
if (apicallparam != "" && apicallparam != null) { //if we have an api call to execute...
let xmlAPICalls = window.atob(apicallparam); //grab the API call parameter
await RunXMLAPI(xmlAPICalls); //execute it - wait for it to finish
}
RunAddonWithTempToken(); //go form-submit to the add-on
} catch (Exception) {
document.getElementById("message").textContent = "An error has occurred. Please contact your app administrator."
console.log(Exception); //log exception
}
}
</script>
<div>
<span id="message">Please wait while the page loads...</span
</div>
</body>
</html>Next, go back to your Formula field, and change it to point to this code page instead. See the following images for the steps:
The formula should become:
Essentially, the extension URL must go into the exturl parameter (Base64-encoded), and you must set the extdbid parameter to the primary DBID used by the extension.
Remember to change the PageID in the code page URL to the correct PageID.
If you have questions about changing any of these features to comply with our new security measures, submit a technical support case.