How to get thirrd party oAuth v2 token From UI using msal-angular

Question

Consider this scenario: I have an application which is registered in Azure AD and under that in API permissions one API is configured. I want to call that API but it is not deployed in our namespace and is a separate application. So I need to fetch the the API token first and then call the API. How can I achieve this result. The API team is asking to call the OAuth API with client key and secret key but this will increase security risk of leaking secret key

I tried using the protectedResourceMap to use the new scope but that didn't worked as I guess the Application is not registered under my Azure AD application.

score 0 · Answer 1 · answered Jul 04 '23 at 10:53

I need to fetch the API token first and then call the API. How can I achieve this result.

To fetch the access token for an API, you have to create an Azure AD Application and Expose an API like below:

enter image description here

And add the API permissions like below:

enter image description here

Now, I generated auth-code using below authorize 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=api://APIAppClientID/access_as_user
&state=12345

enter image description here

I generated access token via Postman by using below parameters:

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

client_id:ClientID
grant_type:authorization_code
scope:api://APIAppClientID/access_as_user
code:code
redirect_uri:https://jwt.ms
client_secret:ClientSecret

The access token got generated for the API like below:

enter image description here

By using the above access token, you can now call the API.

To get the access token using @azure/msal-angular, make use of below code refer this Blog.

@NgModule({
    imports: [
        MsalModule.forRoot({
            auth: {
                clientId: "Your client ID"
            }
        }, {
            protectedResourceMap: [
                               ['https://api.myapplication.com/users/*', ['access_as_user']]
            ]
        })
    ],
    providers: [
        ProductService, 
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MsalInterceptor,
            multi: true
        }
    ]
})
export class AppModule {}

Reference:

microsoft-authentication-library-for-js/lib/msal-angular AzureAD/microsoft-authentication-library-for-js · GitHub by tnorling

How to get thirrd party oAuth v2 token From UI using msal-angular

1 Answers1