Need Help: Best secure handling for API key with JS on cloud-hosted Canvas?

[NatFeibish]

Hey, friends. I've developed a few JS elements (flashcards, quizzes, etc) that are to be used in courses just for self-checks. There have been requests for these interactions to be also recorded into the gradebook, so that means I need to use the API.

• I'm going to be checking things in our instance, so I need a secure way to use an API Key without having it directly in the JS for obvious reasons. We're cloud-hosted, and I'm just starting with this. 
• We're going to be passing our JS to other institutions when we deliver courses we have developed for them. So I also need instructions on the best way for them to handle their API keys securely. I don't mind giving them a separate version of the code if need be.
• All JS is applied in the Theme Editor with the custom CSS. This is vanilla JS, no React.

I started researching this and got quickly overwhelmed with answers that kinda seemed to be the right track, only to discover that it does not apply to my situation. I'm happy to do the reading if somebody can point me in the direction of the appropriate approach(es) for my situation.

Thanks in advance, I appreciate your help.

Nat

[NatFeibish]

I am working through these steps: https://community.canvaslms.com/t5/Canvas-Developers-Group/Canvas-APIs-Getting-started-the-practical... 

[matthew_buckett · Accepted solution]

Hiya Nat,

If you are wanting to put results in the Gradebook there are 2 routes to create gradebook entries in Canvas:

- LTI Advantage integration. This is used when the extension is integrated into Canvas using LTI and allows the tool to create gradebook entries and then post scores to those entries. As you aren't currently using LTI to integrate these JS elements this isn't an option. The documentation about this is at: https://canvas.instructure.com/doc/api/file.assignment_tools.html

- Canvas API calls. Here you have an admin token that your tool uses create gradebook entries and then post results to them. This admin token needs to be stored on a server and the server needs to be making API calls to Canvas so that end users can't find out the value of the token. The problem then becomes of how does the JavaScript that you add to the page make an authenticated request to your server because it doesn't have any token or cookie that you can verify. This is what the LTI integration route solves, it allows your JavaScript to get a token (generated by Canvas) that proves who the current user is, you can then use this token to make API requests again your server. But with all of this you will need some serverside components to make the requests to Canvas.

You can generate tokens from in-theme JavaScript, but you still need a LTI tool to be generating tokens for (this is how Ally does it's in-page requests).

In the long run if you want a deep integration with Canvas I suspect that looking at the LTI route is going to provide the most elegant solution and also has the potential for your self-checks to be used with other LMSs in the future.

All the best.

Matthew

[seanbeirnes]

Hi @NatFeibish,

I second what @matthew_buckett wrote. Once you get past making cosmetic changes to the Canvas UI, custom JavaScript in your Canvas instance is usually not the best way to go, and it becomes time to look into alternative solutions. LTI Advantage is definitely the best option for a custom integration that involves updating grades, but at that point, you will be getting into the weeds of web app development. There is a lot to learn, so I would encourage you to investigate "off the shelf" solutions before diving into LTI development.

There are companies dedicated to creating custom LTI solutions (Unicon, Atomic Jolt, Instructure's Professional Serivices, etc.) due to the technical knowledge required to create them and safely deploy them to users. An LTI, just like any other publicly accessible website or web app, will be hosted on a server or cloud provider and will be accessible to the entire web. You will need to make sure it is secured using the most up-to-date cybersecurity practices to ensure any stored user data does not leak. The actual steps you take for this depend on where you host the LTI (i.e. Amazon Web Services, Heroku, or your own virtual private server).

You may consider looking into Adobe Captivate, Articulate Storyline, HP5, or iSpring as low-code solutions that can add interactivity to your courses without the need to dive deep into building out a web application that conforms to the LTI Advantage specifications. Most of these solutions, such as Captivate and Storyline, can be integrated into a course via SCORM, which is usually as simple as publishing a project in one of these apps as a zip file and uploading that file to Canvas.

It is certainly worthwhile learning the Canvas API because it allows you to do many things that the UI does not do. However, that alone will not show you how to do what you are asking about. Your custom JS will not be able to safely communicate with the Canvas backend to update grades as it currently stands. The problem is that your custom JS is running in the student's browser when they are completing the flashcards and quizzes. Therefore, your JS code can only "authenticate" itself as the student via passing along the CSRF session token or generating access tokens on behalf of that user, but the student will not (and should not) have access to update their own grades, so your JS will not be able to work with the Canvas API to update grades in either case.

This brings us to the LTI solution. An LTI is it's own web app hosted on another server. When a user opens your LTI in Canvas (either by clicking a link in the course navigation, a link in a module, or a link embedded via the Rich Content Editor), Canvas will launch the app in an iframe within Canvas or in a new tab. In this process, Canvas and your LTI do an authentication "handshake" following the OAuth specification. This handshake tells your LTI who is using it so it can track that student's progress. Your LTI can then update that student's grades via the permissions it was granted from the LTI key that a Canvas admin had to add to Canvas. That LTI key is like a Canvas administrator's stamp of approval that lets Canvas know that the LTI is allowed to make certain updates in Canvas according the the LTI Advantage specification. Students can complete the flashcards in your LTI while the LTI has permissions to update grades because an LTI key had to be added to the Canvas instance by a Canvas admin. If you want to see an example of what the code for an LTI looks like, Unicon has the starter code for a Java Spring Boot implementation on their github, and Instructure has a similar starter implementation written in Ruby. These code repositories are what would be built into the server-side application that would run on the cloud/hosting provider of your choosing.

I am writing all of this not to overwhelm you, but so you know what you are getting yourself into. Once again, I do suggest looking at some of the other "off the shelf" solutions I mentioned. Chances are that you will find at least one of them will be able to replicate similar interactivity to what you desire. It may not be exact, but it will be much easier to deploy to users.