I am trying to get a very minimal proof of concept oauth2 flow going for a web app hosted locally and hitting a cloud oauth provider (Canvas LMS oauth2/LTI).
I need the user to click a button on my initial page (local web app) that starts the process with the external oauth2 server.
If I make the following a clickable link then I get get the user authorization page which, if the user clicks 'accept' provides an authorization code. But I need the authorization code to be available in my javascript, not displayed on a redirect page.
<a id='authClick' href='https://XXX.instructure.com//login/oauth2/auth?client_id=XXX&response_type=code&scope=auth/userinfo&redirect_uri=http://localhost/oauth_complete.php'></a>
If I use AJAX to make the call, I hit CORS errors - which seem legit and basic web security.
Here is what I have tried:
$.ajax({
type: "GET",
url: "https://XXX.instructure.com/login/oauth2/auth?client_id=XXX&response_type=code&redirect_uri=http://localhost/oauth_complete.php",
processData: true,
success: function(canvasCode) {
console.log('Called Canvas - response: ' + canvasCode);
},
error: function (data) {
console.log('Fail - could not get LTI auth token...');
}
});
I don't understand how you call the auth server and get a code that you can then use (step 2, in javascript or maybe php back end) to obtain a token.
Any help deeply appreciated - I'm close...just missing some crucial core concept (as usual).