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]

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