Implementing SSO with Microsoft Accounts (for Single Page Apps) |
Project: University College London IXN Project Resourcium
Team members: Louis de Wardt, Hemil Shah, Pritika Shah
Project Resourcium University College London
Guest blog by the Project Resourcium Team from University College London
With the complexities that come with setting up your own database to make a login system, the best alternative would be to use Microsoft live login instead. This works by “handing” over responsibilities of login management to Microsoft as well as security technicalities. Having to design your own database with login and passwords also slows the development process, giving you less time as developers to focus on things that you need. Our project aimed to allow an easy way for students to access our application and get assistance. The simplest answer was for students to use their existing login (also known as SSO ‘Single Sign On’) to access apps. This does not only simplify things for the developer, but also the user themselves since it reduces the need for them to remember another set of usernames and passwords. This article will explain in detail on how you can setup your application to use live login directly with Microsoft.
This is designed to work for single page apps, if your app involves a web server serving each web page then you will need to use a slightly different login flow (specifically the `Web` flow rather than the `Single-page application`)
Press the new registration button:
Here you can see screenshots showing each step:
Here you choose Single-page application:
Enter in the redirect URL (such as http://localhost:3000):
Code
Create a variable to store this information:
var msalConfig = {
auth: {
clientId: "{{APP_ID}}",
// Only required if single tenant (remove if multi-tenant)
authority:
"https://login.microsoftonline.com/{{TENANT_ID}}",
},
};
function login() {
var msalInstance = new msal.PublicClientApplication(msalConfig);
msalInstance
// Here you can specify scopes (see example code for more details)
.loginPopup({})
.then((response) => {
if (response === null) {
showError("There was an error authenticating you (response was null)");
return;
}
showResult(response);
})
.catch((error) => {
showError("There was an unexpected error during the login process");
console.error(error);
});
}
Here we chose the popup method of authentication, you can also chose redirect.
The functions called showError and showResult are examples and they will likely be different in your application.
The response object has a field called accessToken which you can use to query data on behalf of the user.
By default you are very limited by what you can do with the access token for security reasons. If you want to be able to perform more actions you can add scopes. Here is an example from the MSAL documentation:
var loginRequest = {
scopes: ["user.read", "mail.send"]
};
Now we can update the loginPopup parameters from earlier:
msalInstance
.loginPopup(loginRequest)
// ... the rest of the code
Now the access token will have access to those scopes.
Note: you will also need to update the permissions on the app registration for all scopes except for user.read which is on the registration by default.
Example app
You can find an example app here (https://resourcium.github.io/sso-article/example_site.zip) that demonstrates using SSO login on a single page app without any frameworks (pure JavaScript).
To run you need to download the source code and host it locally such as by using python3 -m http.server 3000. You then need to create the app registration which will give you access to a tenant id and an app id. You should then edit the script.js file to update the clientId and authority (see the msalConfig variable). You need to set the single page app redirect URL to be localhost:3000 or your local URL.
Useful links:
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.