How do I implement SSO integration in my web app?

[KiwiTech]

I have to integrate CANVAS Integration for SSO

The process will be, users can start on my web/app and click a "Sign In With Canvas" button.

CANVAS will then prompt the user for their username and password.

After the user has signed into CANVAS, they are redirected back to your website with the user details.

I am calling the below URL to open the modal.

GET https://<canvas-install-url>/login/oauth2/auth?client_id=XXX&response_type=code&redirect_uri=https://example.com/oauth_complete&state=YYY&scope=<value_1>%20<value_2>%20<value_n>

but getting below error : -

<my-redirect-url>?error=invalid_scope&error_description=A+requested+scope+is+invalid%2C+unknown%2C+malformed%2C+or+exceeds+the+scope+granted+by+the+resource+owner.+The+following+scopes+were+requested%2C+but+not+granted%3A+https%3A%2F%2Fdev.maps101.com%2F

[jerry_nguyen]

@KiwiTech 

From my understanding, you don't need to enforce "&scope=" in your URL. Users are only allowed to perform actions (API calls) based on their Canvas' Permissions. Thus you should remove "&scrope=" from the URL

[werner_huysman1]

The scopes in the scope parameter in the url should be a subset of the scope set for the developer key. Is that the case? Here is the documentation for developer key scopes: https://canvas.instructure.com/doc/api/file.developer_keys.html

[KiwiTech]

We have enabled all enforced scopes on developer KEY "204790000000000102" and created URL like this https://maps101.instructure.com/login/oauth2/auth?client_id=204790000000000102&response_type=code&re...

it is still not opening the canvas login screen and returning scope error. Please check and suggest as we are blocked.

[KiwiTech]

Please help us creating correct oAuth URL which can land on Canvas login page and after login with test user(teacher, student) it can redirect back to Maps101 page with user details in response. 

[matthew_buckett]

You need to specify the scopes you want to use in your request, or disable token scoping on the key and then you don't need to supply any scopes in the request.

[matthew_buckett]

If you aren't going to make API calls back to Canvas from your application then you can use `scope=/auth/userinfo` which will allow users to remember the login and not be prompted to grant access to their account every time they login. This is outlined on: https://canvas.instructure.com/doc/api/file.oauth.html

[KiwiTech]

Ok, after I disabled the  token scoping on the developer key, I can see the login screen where I am able to redirect back to my application page, but i can't see the user information of the teacher in response.

How can fetch the user information of canvas logged in URL so that I can check those user details in my application and allow them to auto login?

[matthew_buckett]

I think you need to follow step 3 of the OAuth flow outlined in: https://canvas.instructure.com/doc/api/file.oauth.html that allows you to get the token. You can then make a API request to /api/v1/users/self and it will give you details of the current user.

However I would recommend using the scope=/auth/userinfo for login as then I believe encoded in the token you get back are details of the current user (ID and name). You can use standard JWT libraries to parse and verify that the token is signed by Instructure. That way you don't have to make an API call for the actual login, if you need to make API calls in the future you can then ask the user to authorise the application for a normal developer key token and use that one for API calls.

[KiwiTech]

Got it, we followed the third step and able to receive access token response in this format when I hit the API: https://maps101.instructure.com//login/oauth2/token

{"access_token":"20479~JlBShpAhVuDsyEH2bwBb2dtHauhJ8pTosBxumP8bOVziU4Dn9sEV9UmjWhWf00H8","token_type":"Bearer","user":{"id":1,"name":"Map101 Teacher","global_id":"204790000000000001","effective_locale":"en"},"refresh_token":"20479~ZAbplSmmBzcljbBfuRpgY9GSO7pvv6MEj9jyqwvTQzewwh0R0wHPhYK5ZJbXd2I6","expires_in":3600}

However I am not able to access user details by passing access token with this API:
https://maps101.instructure.com/api/v1/users/self/profile

It returns Invalid access token. am i missing something?

[jerry_nguyen]

Did you use "access_token" (not refresh_token) as the token? try it in Postman

The endpoint for user profile is correct

Make sure you turned off "Enforce Scopes" in your developer key

[matthew_buckett]

Ok, if you want to then call the API you also need to request a token without the /auth/userinfo scope and then store that token in your application against the details returned in the original token (eg against Map101 Teacher) in your example.

Tokens with a scope of /auth/userinfo can't be used for API calls.

[KiwiTech]

can you elaborate please with some example?

[KiwiTech]

I have request a token without the "/auth/userinfo/" scope and I received "code" in return URL

Using the same "code" I made API call to https://maps101.instructure.com//login/oauth2/token
Using these attributes in Body:

- grant_type
- client_id
- client_secret
- redirect_uri
- code

This API returns me "access_token"

Using the access_token I hit the API "https://maps101.instructure.com/api/v1/users/self/profile" keeping access token in Bearer but i am getting  "Invalid access token"

Please help me resolving this error.

[jerry_nguyen]

@KiwiTech 

Did the token look like this "16534~vbcO7n...." ?

I have successfully implemented a "Login with Canvas" button in Javascript. Look up "oidc-client-js". 

If you wanted to use this library, I can guide you on setting it up

[KiwiTech]

I am getting this response from POST API https://maps101.instructure.com//login/oauth2/token
in this format:

{"access_token":"20479~zyq2kz0lYDuYoZ3RKQ5Wvy1y7LuJECo5U1BYGUCUFkCA96MMci5EEL3xeMg2EPZa","token_type":"Bearer","user":{"id":1,"name":"Map101

Teacher","global_id":"204790000000000001","effective_locale":"en"},"refresh_token":"20479~KzcyyYAZ8SXSOJN4NH0td27bLvyECNqPmTlRReSconoSFTxSKm1Hx3nNWxXB4HZy","expires_in":3600}

When I am trying to fetch user details using GET API /api/v1/users/self/profile

by passing bearer token as access token I am getting this error:

{

    "errors": [

        {

            "message": "Invalid access token."

        }

    ]

}

I am not sure weather the API endpoint is wrong for getting user details or the access token is having some issue. I need help on this.

[KiwiTech]

Yes I am using "access_token" (not refresh_token) and trying it in postman with "Enforce Scopes" as turned off in my developer Key, still it is returning me error

[{"message":"Invalid access token."}]}

[jerry_nguyen]

@KiwiTech I'm not quite sure what's wrong there as I can't see the image clearly. However, have a look at my post here: https://community.canvaslms.com/t5/Canvas-Developers-Group/API-Login-with-email-password/m-p/470453/...

This is how I set it up using the Javascript library mentioned. 

[KiwiTech]

Canvas Support-

We are getting CORS error (screenshot attached) while triggering following canvas end points from browser, however same endpoints are working fine when we tried hitting them from POSTMAN, need your urgent help to resolve this issue:

·         /login/oauth2/token

·         /api/v1/users/self/profile

Following the origins from where we are trying to access the API’s:

• ·         https://staging.maps101.com/
• ·         https://dev.maps101.com/
• ·         https://qa.maps101.com/
•  

We tried enabling “Trusted HTTP Referers” from settings but still getting the same CORS origin issue.

Need your help to resolve this issue.

 

[jerry_nguyen]

@KiwiTech 

Modern web browsers (E.g Chrome) will block CORS requests for security reasons. Postman is not a web browser thus your request went through. @matthew_buckett  has a great explanation on CORS here: https://community.canvaslms.com/t5/Canvas-Developers-Group/API-CORS-policy-No-Access-Control-Allow-O...

To bypass this, you will need to send your API requests through a proxy. The proxy server I used on my website is this one: https://github.com/Rob--W/cors-anywhere/