Securing a modern Web application with Entra ID

Presented at Techorama NL 2024

1. Securing a modern Web application with Entra ID

2. Speaker intro Joonas Westlin Developer / Architect @ Zure Worked with Azure for 9 years All time #1 for AAD / Entra ID answers on Stack Overflow joonasw.net

3. Agenda Entra ID, OpenID Connect, and OAuth 2 Demo : Walkthrough of OpenID Connect and OAuth 2 Recap of first demo Demo : Configuring the app in Entra ID Demo : API back-end and Microsoft.Identity.Web Demo : Front-end and MSAL.js Q&A

4. Entra ID, OpenID Connect, and OAuth 2

5. Entra ID Previously Azure Active Directory (AAD) Identity and access management Users Applications Devices Permissions Used by Microsoft 365, Azure, … Entra External ID tenants and Azure AD B2C are a bit different, but use the same protocols

6. What is a tenant? Organization Collection of users, apps and devices If you “create an Entra ID”, you are creating a tenant Identified by domains something.onmicrosoft.com by default

7. OpenID Connect and OAuth 2 Standards for authentication (OIDC) and authorization (OAuth) OAuth is about getting access to protected resources OIDC builds on top of OAuth 2 and focuses on identifying the user If you are having difficulties sleeping (or like auth stuff): https://openid.net/specs/openid-connect-core-1_0.html / https://datatracker.ietf.org/doc/html/rfc6749

8. Token types ID token Identifies the user From OIDC Intended for client application Access token Used to call an API From OAuth Intended for an API (one, not many) Refresh token Used to get new tokens

9. Demo: Walkthrough of OpenID Connect and OAuth 2

10. Recap

11. Front-end authentication

12. Token validation

13. On-behalf-of flow

14. Authentication redirect MSAL uses Authorization Code flow with PKCE MSAL stores nonce, code verifier Redirect with client_id , redirect_uri , state, nonce, response_type , code_challenge , code_challenge_method

15. Authentication redirect What MSAL saves in the browser Redirect parameters client_id (identifies the app) redirect_uri (where to send the user after login) state (string that will be passed back to app after login) nonce (unique id for the login, prevent replay) response_type : code (app wants an authorization code) code_challenge (hash from randomly generated verifier) code_challenge_method (says that the challenge is hashed) No secrets are ever used here (public client)

16. Authentication in Entra ID User authenticates with whatever, not app’s concern Also, the password is never shared with the app Parameter validation App with client ID exists Redirect URI matches one of that application’s URIs PKCE parameters are valid Tenant ID in URL or “common” or “organizations” or “consumers”

17. Redirect back to app Authorization code State reflected back MSAL exchanges code for tokens ID, access, and refresh token PKCE: Randomly generated code verifier also sent, Entra ID can do the same hashing again to verify it is same

18. Call to API Access token included in Authorization header Token validation, what happens internally Loading OpenID metadata, public keys (only once per API instance per day, rest of steps are offline) Signature validation Expiry, not before Audience (note that token is only valid for one API) Issuer Scopes / roles Now caller is authenticated with the API

19. On-behalf-of flow Exchanging API access token for Graph API access token Different audience, so Graph API won’t accept our token Client secret or certificate required to authenticate the app Access token received by API also passed

20. Demo: Configuring the app in Entra ID

21. Important parts of app configuration Tenant ID (or “common” / “organizations” / “consumers”) Client ID Client secret / certificate (if needed) Platforms and redirect URIs Exposed API permissions Required API permissions

22. Demo: API back-end and Microsoft.Identity.Web

23. Important parts of back-end configuration Add Microsoft.Identity.Web Nuget package and add its configuration in Program.cs / Startup.cs Instance, Tenant ID, client ID in app settings Client secret / certificate will need secure storage Require authentication for all requests Some level of additional authorization for all requests (see next slide)