Angular Azure AD Token Request Pattern for Single Page Application with Backend for Token Management

Question

I am trying to set up Angular app Single Sign On using Auzre AD authentication. After onboarding I got below parameter and values

• Client ID
• Client Secret
• Tenant ID,
• OAuth 2.0 authorization endpoint
  (v2):https://login.microsoftonline.com//oauth2/v2.0/authorize,
• OAuth 2.0 token endpoint (v2):
  https://login.microsoftonline.com//oauth2/v2.0/token,
  OpenID Connect metadata document:
• https://login.microsoftonline.com//v2.0/.well-known/openid configuration,

How to use this value for different API calls. I am looking for guidance on API sequence call required for SSO.

I don't want to store token on client side so planning to handle it through backend.

I already created a service which will return session object with help of fingerprint. What will be my next API call to fetch the auth code url and then token.

Answer 1

What will be my next API call to fetch the auth code url and then token.

To fetch the auth code make use of below endpoint:

https://login.microsoftonline.com/TenantID/oauth2/v2.0/authorize?
client_id=ClientID
&response_type=code
&redirect_uri=https://jwt.ms
&response_mode=query
&scope=https://graph.microsoft.com/.default
&state=12345
&code_challenge=***
&code_challenge_method=S256

Generated the access token via Postman using below parameters:

For sample, I generated access token for Microsoft Graph API

https://login.microsoftonline.com/TenantID/oauth2/v2.0/token

client_id:ClientID
grant_type:authorization_code
code:code
redirect_uri:https://jwt.ms
code_verifier:S256
scope:https://graph.microsoft.com/.default

Using the above generated token, you can call Microsoft Graph API:

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

You can call any APIs by granting the API permissions to the Microsoft Entra ID application and changing the scope parameter.

To implement the same in Angular SSO, refer below:

microsoft-authentication-library-for-js/lib/msal-angular at dev · AzureAD/microsoft-authentication-library-for-js · GitHub by konstantin-msft

Tutorial: Create an Angular app that uses the Microsoft identity platform for authentication using auth code flow - Microsoft identity platform | Microsoft