Install LTI for Canvas LMS on NodeJS

Tram Ho

Currently, I see that many universities have applied Canvas LMS to online teaching or supplementing classroom teaching. Canvas brings a lot of convenience to the management of schools and teachers easier.

In addition to the available functions we can use LTIs to add additional features according to the needs. In this article, we will briefly learn about LTI and how to install LTI into Canvas LMS so that you can easily apply it to LTI projects in the LMS later.

You can download the source code here .

What is LTI?

LTI (Learning Tools Interoperability) is an integration standard for third-party tools and is developed by the IMS Global Learning Consortium. Canvas (or other LMS platforms) supports LTI, allowing for easy integration and use of third-party tools.

We can use the LTIs available on the App Center or create our own LTI to develop functions that suit the needs of the project. Here I will guide you to create your own LTI with the function of displaying the role of the current account logged in in the LMS, then connect to the Canvas LMS.

How does LTI work?

image.png

Install LTI on Canvas

To create LTI I will use the package ltijs on NPM. The first step we need to create a Developer key on Canvas to initialize the necessary configs, these values ​​help to authenticate between ltijs and Canvas. The Developer key generation process includes the following steps:

  1. Login to Canvas, then go to Admin ➡️ Root account (here may be different in name depending on your config, usually the url will be https://your-canvas-domain/accounts/1 )
  2. Click to select Developer keys in the interface just displayed.
  3. In the Developer keys interface, click button |+ Developer Key| and then select |+ LTI Key| as shown below: image.png
  4. The LTI Key generation interface appears, because the config interface is a bit long, so I will divide it into 2 parts. Part 1: we will fill in the fields as shown below: image.png Note :
    • Fields marked with “*” are required to be filled in.
    • Port 3333 in http://localhost:3333 is the server port of LTI, we will configure it later, you can choose an arbitrary port.
    • The JWK Method part returns to the Public JWK URL (default Public JWK )

    Part 2: when you scroll down, you will see the next interface image.png

    • In the LTI Advantage Services section, it will help to decentralize more specific data from Canvas to LTI, depending on project requirements, different options will be enabled. If you are not used to it, you can turn it all on for easy operation.
    • In the Additional Settings section, I will use the Custom fields field to send the role of the current account from Canvas to LTI, these values ​​will be sent with the response in the connection between Canvas and LTI. See more dispatchable variables here .
  5. After pressing the Save button we will get a new Developer Key as shown below, press ON in the State column. The long sequence of numbers is the Client ID , click Show key to display the Secret key . image.png
  6. To display LTI on Canvas, we need to add one last step to create an External App, click Setting ➡️ App as shown below, then select + App : image.png
  7. A new popup will appear, in the Configuration Type section select By Client ID , then enter the Client ID just created in step 5, click Submit ➡️ Install : image.png
  8. Refresh the page and you will see the LTI has been displayed on the Canvas (Under the Developer keys in the sidebar – because when bouncing on Placement in the config Developer key we have for Account Navigation , similarly when entering the Course will also be displayed due to the price. The value of the Placement contains the Course Navigation ): image.png

Those are all the basic steps to create an External App using LTI on Canvas, we will come to the next part of configuration on NodeJS.

Install LTI on NodeJS

We will proceed to install the package ltijs , at the moment of the article I am using ubuntu : 24.04 , nodejs : v19.3.0 and package ltijs : v5.9.0 .

  1. Create directory and initialize nodejs project:

    mkdir lti-account-role && cd lti-account-role

    npm init -y

  2. Install the necessary packages:

    npm install ltijs dotenv

  3. Run MongoDB:

This package natively uses mongoDB by default to store and manage the server data, so you need to have it installed, see link bellow for further instructions.

Based on the developer document, we should use MongoDB to be consistent with ltijs . However people can use other Database Plugins like Firestore Plugin or Sequelize Plugin

  1. Create a directory structure, since this is a tutorial on installing LTI, I will create a brief structure so that you can deploy it easily and quickly:

image.png

  • .env : save environment variables. My MongoDB is running at port 27022, you change it to the port you are using (usually 27017). Same goes for DATABASE_USERNAME and DATABASE_PASSWORD.

  • lti.config.js : We will do ltijs config in this file.
    • Function lti.setup helps us to configure secret key and database connection.
    • The function lti.whitelist will whitelist routes that do not need to be authenticated and are still accessible outside of the Canvas. If you don’t need any whitelist routes, you can delete this config section.
    • Function lti.onConnect on successful LTI launch from Canvas this function will be called. Our goal is to return the account role so we will get it from the token res.locals.context.custom.role . When implementing the actual project we will have the interface from the Front-end so the return res.json(res.locals.context.custom.role) will be replaced with return res.sendFile() or res.redirect() depending on the usage of each person.
    • The function lti.setUpPlatform is used to configure the port to run the ltijs server and configure variables from the Developer key generated on bounce.

  • app.config.js : used to initialize the application, in the lti.config file, whitelist route /ping to test whether ltijs has run correctly or not. Normally when the server runs ltijs it will only be called from Canvas, if we try to access it directly ltijs will return NO_LTIK_OR_IDTOKEN_FOUND . I have created some initialize methods that you can’t delete if you don’t use them.

main.js: Launch the server

  1. Edit package.json to add script:

    "start": "node src/main.js"

  2. Run the server with the command:

    npm start

  • If the response is as shown below, the server has successfully started.
  • Go to http://localhost:3333/ping to check. If the return message is ” pong “, the setup is successful.

  1. Go back to Canvas and open LTI to see the results, as shown below, we have successfully returned the role of the account that is logged in to Canvas – I am logged in with an Admin account, so in the response there will be Administrator for Student account, it will only show Student . Since it is currently a dev environment, the LTI server without https will display a warning from Canvas. When deploying to production with https those warnings will disappear.

image.png

Common errors

  1. UNREGISTERED_PLATFORM : usually this error is caused by the LTI_ISS in your .env file not matching the ISS in the security config of the Canvas LMS. Update again so that the two sides match, if the error still appears, you access the table platforms in the database, delete the record containing the old LTI_ISS and restart the server.
  2. TOKEN_TOO_OLD : This error is usually caused by slow network, you refresh or hard refresh a few times to be able to re-enter.

Conclusion

So we have created a custom LTI, you can rely on that to further develop the functions according to the requirements of the project you participate in. Currently we are using ltijs server – which is run by ExpressJS – to run LTI, which will have its own advantages and disadvantages. In part 2, I will guide you to integrate ltijs into the NestJS Framework to run LTI as a separate route using the serverless option . The last part of my series will be to integrate FE powered by ReactJS to launch a complete LTI.

Thank you for watching. If you have any questions, please comment below or inbox me privately. Wishing you all a very happy and successful year of the Rabbit.

References

Share the news now

Source : Viblo