Connecting javascript SinglePageApplications to Turnkey (SPA)
Hans Karlsen (talk | contribs) No edit summary |
Hans Karlsen (talk | contribs) No edit summary |
||
Line 8: | Line 8: | ||
Once you have this example - follow the lead and add another button, just like the readMail and seeProfile buttons from the sample: | Once you have this example - follow the lead and add another button, just like the readMail and seeProfile buttons from the sample: | ||
<pre> | |||
function readTurnkey() { | |||
getTokenPopup(loginRequest) | |||
.then(response => { | |||
const headers = new Headers(); | |||
const bearer = `Bearer ${response.idToken}`; | |||
const endpoint ='http://localhost:5052/TurnkeyRest/Get?command=RestExample' | |||
headers.append("Authorization", bearer); | |||
const options = { | |||
method: "GET", | |||
headers: headers | |||
}; | |||
console.log('request made to Turnkey API at: ' + new Date().toString()); | |||
fetch(endpoint, options) | |||
.then(response => response.json()) | |||
.then(response => updateUI(response, endpoint)) | |||
.catch(error => { console.log(error); }); | |||
}).catch(error => { | |||
console.error(error); | |||
}); | |||
} | |||
</pre> |
Revision as of 22:20, 28 February 2021
In order to connect SPA's built with pure-javascript or React or Angular or Vue or anthing else we must address these needs:
- Cors - allow foreign apps to query our Turnkey server
- Authentication - allow foreign apps to acquire a jwt from somewhere (Oauth host) and we want to check it and possibly accept it
- Stay logged in - with a cookie after initial authentication
To show this we can use the Microsoft SPA example from here : https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-javascript-auth-code
If you follow all the instructions there you soon have a SPA application that logs in with Azure AD - and gives you idToken that are in jwt format (really jws as they are signed).
Once you have this example - follow the lead and add another button, just like the readMail and seeProfile buttons from the sample:
function readTurnkey() { getTokenPopup(loginRequest) .then(response => { const headers = new Headers(); const bearer = `Bearer ${response.idToken}`; const endpoint ='http://localhost:5052/TurnkeyRest/Get?command=RestExample' headers.append("Authorization", bearer); const options = { method: "GET", headers: headers }; console.log('request made to Turnkey API at: ' + new Date().toString()); fetch(endpoint, options) .then(response => response.json()) .then(response => updateUI(response, endpoint)) .catch(error => { console.log(error); }); }).catch(error => { console.error(error); }); }
This page was edited more than 11 months ago on 02/10/2024. What links here