Robert Lapkass

Canvas API authentication and XmlHttpRequest()

Discussion created by Robert Lapkass on Dec 26, 2018
Latest reply on Jan 17, 2019 by Robert Carroll

I'm getting a bit perplexed by some authentication usage of the Canvas API. I'm probably spinning my wheels past the simple solution, so I wonder if a more seasoned API person could help shed some light. I've been perusing examples and APIs, and doing some experimenting and simple prototyping, but haven't yet reached the definitive answer I need.

 

So here's the situation. I want to programatically manipulate Canvas from some external web application. For simplicity, let's say for now I just want to be able to create a new blank Canvas page (much more in mind later, gotta start with something simple).

 

As suggested in a getting started guide in the Canvas API docs, I'm starting out by using Postman as my messaging tool. I've created my own (static) Canvas authentication key, and with it I can construct the needed message, send it from Postman, and create the new Canvas page. All is great to this point.

 

So now, I want to remove Postman from the loop, and send the comparable message from my own JavaScript using XmlHttpRequest(). I figured a good place to start would be to reverse engineer the message Postman sent. I could inspect that message, then copy/paste/adapt it as needed.

 

As you might guess, this isn't working for some yet unknown reason. However, upon inspecting the message code that Postman used, I see two authentication-looking tokens, not just one. I see my own (static) Canvas auth key, but also what looks to be a Postman-specific one. In making multiple trials, I notice that my auth key stays constant, but the Postman one gets regenerated each time.

 

This is making me wonder: do I need to regenerate MY auth key each and every time also?? I saw verbage online indicating that keys after Oct 2015 expire after 1 hr. Should I be generating a "refresh token" for EACH message exchange?? This part is not clear to me at all.
https://canvas.instructure.com/doc/api/file.oauth.html

 

I guess I assumed that an auth key was a one-time, obtain it and use it, fixed authentication credential?? Perhaps I'm not just clear yet on the idea of the key(s) needed to do API development.

 

Here's the Postman-generated JavaScript that apparently works fine from Postman, and I'm trying to replicate on my side:

var data = null;

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
if (this.readyState === 4) {
console.log(this.responseText);
}
});

 

// NOTES: XXXXXX is my Canvas course ID, 6 digits
// my OAuth 2 key is obscured, but it appears where indicated

xhr.open("POST", "https://sierra.instructure.com/api/v1/courses/XXXXXX/pages?wiki_page[title]=New%20Page%201");
xhr.setRequestHeader("Authorization", "Bearer MY-AUTH_KEY-GOES-HERE");
xhr.setRequestHeader("cache-control", "no-cache");
xhr.setRequestHeader("Postman-Token", "d431ff40-9ce0-4af5-be1b-3f16271f8514"); // why is this needed???

xhr.send(data);

 

From some debug, I seem to achieve a readyState=4 state, but no response text is produced, I'm just trying to display it using a popup or document.write()

 

I would be grateful for any tips or suggestions anyone could provide here!

#

Thanks,
Rob Lapkass

Outcomes