Microsoft Graph: User Authentication with Javascript (SPA)

First you need to: 1. Register your application. 2. Set the callback URI redirect.

Then you add Microsoft Authentication Library (MSAL.js):

...  
  <!-- msal.min.js can be used in the place of msal.js; included msal.js to make debug easy -->
  <script src="https://alcdn.msauth.net/browser/2.30.0/js/msal-browser.js"></script>
...

...  

  <!-- msal.min.js can be used in the place of msal.js; included msal.js to make debug easy -->

  <script src="https://alcdn.msauth.net/browser/2.30.0/js/msal-browser.js"></script>

...

Once you complete the sign-in process, you will get an access_token.

At this point, you can use the access_token with Microsoft Graph API.

But because we have our own backend resources, We want to send this access_token to the backend /login URI.

Then the backend will make a call with Microsoft Graph API for validity, by calling:

GET https://graph.microsoft.com/v1.0/me HTTP/1.1

GET https://graph.microsoft.com/v1.0/me HTTP/1.1

If the call return success, then we auth the user.

If the call is failed, then we reject the user.

References:

• https://learn.microsoft.com/en-us/graph/auth/auth-concepts
• https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser
• https://learn.microsoft.com/en-us/graph/api/overview?view=graph-rest-1.0
• https://learn.microsoft.com/en-us/entra/identity/role-based-access-control/permissions-reference
• https://learn.microsoft.com/en-us/entra/identity-platform/v2-oauth2-auth-code-flow#request-an-authorization-code