How to use Developer Key for OAuth2 Authentication?

[sam_ofloinn]

So I'm the admin of a Canvas test server, and want to set up OAuth2 authentication for my webpage.
I've generated a developer key after logging into "https://my.test.instructure.com" and setting up a developer key from there. Let's call the developer key "myTestKey".
And in my code, I made a redirect to the website like this:

https://my.test.instructure.com/login/oauth2/auth?client_id=myTestKey&redirect_uri=192.168.10.10%2Fcallback&response_type=code&scope=conference

However, the result I get is this:

while(1);{"error":"invalid_client","error_description":"unknown client"}

Is this not the correct use of a developer key? How should I be using it instead to get authentication?

[pklove · Accepted solution]

When you say "Let's call the developer key "myTestKey",what are you actually using for the client_id?

It should be the key's actual ID, maybe something like 9900000000123.

In case its of any use, we have a test site at https://canexa.netkno.nz 

[sam_ofloinn]

Peter, thank you very much for the reply. 

For the client ID, I have tried two different things so far:
1) the ID of a client when I make a client using Laravel Passport and my homestead database
2) and the actual Developer Key I have generated. Neither have worked.

I actually didn't realise developer keys have IDs of their own. Where can I see these? The only traits I see on my Canvas page's Developer Key section for my developer keys are a key's name, its key value, and its owner email. Image here: https://i.imgur.com/7kufSre.png 

Thank you very much for the test site link.

EDIT: I feel embarrassed now, but it just dawned on me. The value in the Details section. The one before you hit "Show Key." That's not the key in a condensed form. That's the actual ID for the developer key.

I put this in now, where it asked for my client ID, and it seems to have gotten past that issue. I've gotten a new error now: "while(1);{"error":"invalid_request","error_description":"redirect_uri does not match client settings"}" 

Since that isn't tied to this thread's original question, I'll consider this answered. But if you've any advice on that error, I'd appreciate that.

[pklove]

If you edit the key, you will see a box on the left for "Redirect URIs".   Have you put your URL in there?

[sam_ofloinn]

I have put it there, as well as in the Redirect URI (legacy) box. Here is a screencap: 

This also matches the redirect URI in the code that points to Canvas' OAuth2 authentication.

I will note that these redirects work for other elements. Namely, if I change my redirect route to any other page, it works. If I point to any other redirect route that I've coded, it also works.

This block of code - which I'm initially asking Canvas to redirect to after authorisation - is the problem. I was advised on this block of code by numerous laravel passport tutorials and official documentation. I'm aware laravel is not the specialty of many people here, but in case it is of use:

Route::get('/callback', function (Request $request) {
   Log::info("Entered callback");
   $state = $request->session()->pull('state'); //is returning null
   throw_unless(
      strlen($state) > 0 && $state === $request->state,
      InvalidArgumentException::class
   );

   $http = new GuzzleHttp\Client;
   $response = $http->post('http://my.test.instrucutre.com/login/oauth2/auth?', [
      'headers' => [
         'Accept' => 'application/json',
      ],
      'form_params' => [
         'grant_type' => 'authorization_code',
         'client_id' => '10', //only a client ID in my laravel homestead database
         'client_secret' => 'DKwYRnNg30GVcIYKiRRwtPpCIiVb8FBYZft5iBYqx', //corresponding client secret for laravel database
         'redirect_uri' => '192.168.10.10/callback',
         'code' => $request->code,
      ],
      ]);

      return json_decode((string) $response->getBody(), true)['access_token']; //returns null
});

I was recommended to use Passport in order to be able to use OAuth2 on Canvas, but now I'm wondering if there was some confusion, if that recommendation was accurate to my problem. If my project is already using Canvas, and I can make clients on it, and I can authorise those clients, is Passport essentially doing the same thing? Is this essentially a redundancy?

EDIT: It might also be worth noting that, even in the cases of successful redirects by the OAuth2 server, I'm not sure where to see the access token that I hear is generated.

[pklove]

Seem to be mixing up lots of stuff here.

Anyway, if you are still getting "redirect_uri does not match client settings" try changing your code so the redirect uris are the same:

    'redirect_uri' => 'https://192.168.10.10/callback',

[asalma]

Hi Peter

Even though in my other post you mentioned I do not need to use Auth, I am still trying to do it.

( Do I need to use OAuth  )

So from my webpage that has my app, I am making an http  Get call  to

"https://myinstitutesite.instructure.com/login/oauth2/auth?response_type=code&client_id=80580000000001111&redirect_uri=someotherpageicrated"

as an attempt to implement the first stage of the Oauth2 and get a code.

( "myinstitutesite" is just for example, I am using our real cloud name ).

( 80580000000001111 is  the developer key ID that I crated in the account as admin, modified a bit for this example ).

( someotherpageicrated is the URL of another webpage I crated. I made sure it is identical to the 'redirect uri' on the developer key ).

Loading the page, what really supposed to happen ? I am still getting the same page with the same URL, no error message but also no different URL string .

Since I am both the admin and the app developer, am I doing something wrong?  

Aside of creating the Developer key, I did not crate my app on any Canvas platform, just on my web page.

Was I supposed to register it in any other way? if yes then how?

Thanks

Arie

[mahmoud_mostafa]

 @asalma ‌ 

Do you have a code sample, to see if I can help ? 

[asalma]

Hi Mahmoud

I am running it on a Wordpress PHP site, basically the HTTP call is described above , there is not much more to it ( the rest of the app which is other API calls is commented out for this test, but it works great with an API key that I generated myself on the admin ).

In my site it looks like this (  this is WP way of calling HTTP )

$url_canvas21 = "https://mycanvassite.instructure.com/login/oauth2/auth?response_type=code&client_id=80580000000001111&redirect_uri=https://mywebsite.org/form-return/oauth-complete/";

$response21 = wp_remote_get( $url_canvas21, array(

            'timeout' => 45,
            'httpversion' => '1.0',
       )
);
if ( is_wp_error( $response21 ) ) {
$error_message = $response21->get_error_message();
echo "Something went wrong with outh: $error_message";
} else {

   echo "we actually getting something<br>";

    $json_21 = json_decode( $response21['body'] );

     foreach( $json_21 as $value) {

         echo $value->code;

     }

}

[mahmoud_mostafa]

 @asalma ‌ 

I have the same thing, mine works with API key but it redirects me to canvas, and it does not work with LTI key because it throws an error of invalid_scope. Are you familiar with such an error ? 

[pklove]

I'm not sure I quite follow.

Why are you doing the get on $url_canvas21?

This is the URL you would redirect the user to in their browser so they can authorise the app.

In case it helps, we have a test server at https://canexa.netkno.nz that will go through the process.

[mahmoud_mostafa]

Hi Peter, 

I have different question but I hope i will get an answer for it, am kind confused as I am trying to set up our platform to be an external tool for Canvas users. I was following certain path following Canvas and IMS documentations for the LTI v1.3 but when I am following what they say on Eduapps (has been recommended by the university that we will be dealing with), they are using LTI v1.0 (lti_version: 'LTI-1p0'), what i am getting in the header request. I am not really sure of which direction that

I have to take ! 

[asalma]

Hi Peter thanks for replying

https://mycanvassite.instructure.com/login/oauth2/auth?response_type=code&client_id=8058000000000111...

is the URL string I am using in the GET call to try to implement the first level of OAuth.

(  mycanvassite.instructure.com is modified above - I use the real Canvas cloud account )

As mentioned, when someone wants to be registered to a course, they fill out a form in my external website. The results of the form go a second page, which is where I also have the API calls to register the person etc.

So on that second page, before I do the API calls,  I placed that GET call there. 

I thought, maybe for the first time I will fill out the form as a 'fake' person, then it would direct me to a canvas page where I would give permission to myself, so later on when people that want to register to a course fill out the form, since I already authorize the user ( which is really myself ) , the app would already skip this stage so they will not be directed to an 'authorization' screen 

Does it make any sense ? If not, how would you make the flow for this?

[asalma]

Actually Peter,  I solved the mystery.

So my mistake was, I thought that this string has to be used as a HTTP call ( like Ajax GET ). I looked at the Oauth.com site, and it says that this should be the URL that I point the browser to ( in the Canvas docs it sort of looks like the other HTTP calls which confused me )

So I put this string in a browser address bar and got the right authorization page.

Weather I will use this in the app I described here , is to be determined, but now I know how to do it.

Many thanks for your patience

Arie

[mahmoud_mostafa]

Hi,

pklove‌  @sam_ofloinn ‌

I am new in the canvas world, I am trying to add our web app to canvas as it has to be used by a University in England by January.

I found this recent post the most helpful for now, but I still have some points would appreciate if someone can help me out figuring out them.

First of all I configured our app to be able to work with ( Authorization code grant ) which I assume the right thing to do for now, but I can not get to the point to find where i can test it through Canvas, does it have a developer mode so i can have the tokenUrl and the authorizationUrl to test out my set up. We are using Javascript stack , node js, express as a server and react in the frontend.

Any useful tips would be appreciated.

Thanks

[sam_ofloinn]

Mahmoud,

At a guess, perhaps Postman might be what you need.. I don't use it myself, but I hear it recommended for reading the values of URLs, tokens, and testing them quickly. It is universal with other languages, so those techs shouldn't be a burden on it.

That said, I don't have enough details about your problem to give any further help

[mahmoud_mostafa]

 @sam_ofloinn ‌ Thanks Lee for your answer.

As a matter of fact i need more than postman, what I was asking for is how to send real requests from Canvas to our app using kind of test environment, I am not part of institution or educational organisation so I do not have developer key privilege and could not figure out a way to generate it and reach out the test environment. 

So to have Canvas in test environment do I have to have it on my local machine and try it out from there, cuz i need to configure the ClientId, Secret and get the TokenUrl, authorizationUrl all that in a test environment to test out my set up and to see the actual responses that we will be getting when we have our app getting used by canvas in a production environment.

If there is unclarity please let me know as I am trying to get my hands on it but the resources are not that clear.

Thanks   

[sam_ofloinn]

Forgive the delay in my response. I don't know about making requests from Canvas to an application, only about applications requesting data from Canvas endpoints. If you want control over Canvas' own actions, contact your department's admin and see what he can do, but otherwise I understand it's not that kind of application which lets people command it liberally: only to request resources from it.