API Login with email/password

[ErgiLaze]

Hi,

I'm developing an external application that I would like to integrate with Canvas API. I have a login form, where I want users to log in via their email and password (The same credentials they use for logging into Canvas). I looked at the API and the OAuth endpoints but couldn't find how to log in with email/password. Can someone please help me out with that?

[matthew_buckett]

As far as I'm aware there's no way to get users to enter their Canvas username/password and have you pass these credentials to Canvas to authenticate them. Having users enter their credentials to 3rd party applications is no a good security practice and so this is why Canvas supports OAuth. This allows you to request a token on behalf of the user and then use that token to perform API requests. This token is independent of the credentials and if the user decides they can then revoke the token and your application no longer has access to their account. There's more details about Canvas and OAuth here: https://canvas.instructure.com/doc/api/file.oauth.html

If you just want to use Canvas to allow the user to login and not make any API requests against Canvas on their behalf then you should use OAuth with a scope of scope=/auth/userinfo

If you are happy not having a normal login page but want users to access your application after first logging in to Canvas then you could look at using LTI to solve this: https://canvas.instructure.com/doc/api/file.tools_intro.html

[ErgiLaze]

But how can I receive an access token from a specific user without having them log in using their credentials? Of course, I don't want this to be manual.

[James]

@ErgiLaze 

As @matthew_buckett said, if you have an external application that need to access Canvas as the user, then you should have students log into Canvas and then launch your application with either OAUTH2 or LTI after creating a developer key. That avoids the manual logging in that you want to avoid.

An external application should not be asking people for their Canvas login and password as that is very bad security. A multi-user application that asks people to create a token for them violates the terms of service.

The call to generate an API token as a user is not an API call itself. It is an internal Canvas call, which means that you would have to log into Canvas as the user first and then generate the token. This makes it difficult for them to log into your application first and then you log into Canvas as them to get a token. This could be done with a headless browser if you had the user login and password information. This is not a supported method, though, and is not the way you should do this.

For our institutional applications that need to access Canvas on behalf of other users without user interaction, we created a service account and created an access token for that account. That access token never appears in JavaScript or other content delivered to the user, it is kept completely on a back-end server application. It can be used to take actions on behalf of people (using masquerading if necessary).

[ErgiLaze]

@James Thanks for the reply. Actually, that was my question from the beginning... How do I get users to log into Canvas and redirect to my site? Can I have a "Login with Canvas" button on my site that handles login for me or something similar, and if so, can you tell me how I can implement that?

Thanks in advance

[James]

@ErgiLaze 

If the students are already inside Canvas, then there needs to be an LTI placement within Canvas that directs them to your site. There are lots of placements available, some of the more common ones are account navigation, course navigation, module item, or profile. This is something that someone would need to add to Canvas, not something that you can do from your external application (some apps are kind enough to provide a file that can make the process go quicker). This is what the EduApps center does, but only choose that route if you are making something available for everyone. If this is a custom application for a single institution, I wouldn't use EduApps, but just add the tool directly to Canvas.

If you want add the "Log in using Canvas" button to your site, then what you need to do is set up Canvas as an identity provider (IDP) rather than a service provider (SP). This can be done (Google search finds several sites that implement it), but the Canvas documentation is about going the other direction. I have not done it, nor have I ever added a "Log in using xxx" button before. That means I'm writing about things I do not know about and I don't like to do that. Perhaps someone else with more experience can chime in now that we're clearer on what you're trying to do?

[jerry_nguyen]

@ErgiLaze

Yes, you can create a "Login with Canvas" which redirects users to /login/canvas to authenticate then redirected back to your website with an access token. Users can then use that token to perform API calls. 

If this is what you're after then let me know, I can explain further. 

[ErgiLaze]

@jerry_nguyen Thanks for the reply. Yes, that's what I'm looking for. Can you explain further how to implement that?

[jerry_nguyen]

@ErgiLaze have a look at these documents first to under how Canvas's OAuth2 works and  the process to generate Bearer Token for API calls

• https://canvas.instructure.com/doc/api/file.oauth.html (Overview of steps to get access token)
• https://canvas.instructure.com/doc/api/file.oauth_endpoints.html (OAuth2 login endpoints and requirements)
• https://canvas.instructure.com/doc/api/file.developer_keys.html

Once you understand the process, then look up this Javascript library called "oidc-client-js" - this library basically goes through the steps in the first link and produces the access token.

You will also need a CORS proxy (Canvas API doesn't allow CORS requests, I use this one https://github.com/Rob--W/cors-anywhere/)

The following image is an overview of how to set up the JS

[PrernaRavi]

Do you have a sample application with this "log in with canvas" button working? I see some of the source code in the screenshot but I was hoping to get a more complete view of what the entire code base for such a functionality might look like. @jerry_nguyen