Implement applications authentication via Microsoft Identity platform, OAuth 2.0 and JWT
Basic concepts
Application scenarios
- Single-page app (SPA)
- Web app that signs in users
- Web app that calls web APIs
- Protected web API
- Web API that calls web APIs
- Desktop app
- Daemon app
- Mobile app
OAuth 2.0 implicit grant flow (MSAL.js 1.0)
OAuth 2.0 authorization code flow (MSAL.js 2.0)
Practice
Source code: Angular single-page application built with MSAL Angular v2 and Microsoft identity platform
Note:
- For simplicity there is no custom backend there but frontend just calls Microsoft Graph API.
You can follow readme section from github repo but in my case I used a little bit different configuration approach.
My steps
- I used my personal Microsoft account and my personal tenant. (How to set up tenant)
- Go to Azure Azure Active Directory -> App registration
- Add new registration (Account type=Single tenant, redirect URL: empty)
4. For registered app go to Authentication-Add a platform-SPA. Redirect Url=http://localhost:4200
! Important ! Both checkboxes in “Implicit grant and hybrid flows” should be disabled bc we use MSAL.js 2.0 which supports authorization code flow.
5. Now configure your SPA. Go to src/app/app.module.ts
- Replace the string
"Enter_the_Application_Id_Here"with your app/client ID on AAD Portal. - Replace the string
"Enter_the_Cloud_Instance_Id_HereEnter_the_Tenant_Info_Here"with https://login.microsoftonline.com/[your tenant id]' - Replace the string
"Enter_the_Redirect_Uri_Here"with http://localhost:4200 - Replace the string
"Enter_the_Graph_Endpoint_Herev1.0/me"with"https://graph.microsoft.com/v1.0/me"
6. Run npm install
7. Run npm start
8. In your browser, navigate to http://localhost:4200.
9. Click profile
10. log in
12. After this you should see such view on http://localhost:4200/#/profile
We are done)
Now if we check request which was made to https://graph.microsoft.com/v1.0/me (for example, from developer tool in chrome)
we will see Authorization header with encoded JWT:
You can copy it and decode here. This is how it looks like:
