10

I have 2 sites, an angular application and a WebAPI.

When I use MSAL.js from the frontend to call the WebAPI, no token is being attached (because of CORS).

I know I need to set protectedResourceMap but I can't find a clear explanation of how to set it.

I can find plenty of examples, but none giving an explanation that makes sense (to me).

Can anyone please offer any input?

Beakie
  • 1,948
  • 3
  • 20
  • 46

3 Answers3

7

I am just learning this but found this information in the doco:

MSAL.js Angular readme:

protectedResourceMap : Mapping of resources to scopes {"https://graph.microsoft.com/v1.0/me", ["user.read", "mail.send"]}. Used internally by the MSAL for automatically attaching tokens in webApi calls. This is required only for CORS calls.

My understanding of the given example is:

export const protectedResourceMap:[string, string[]][]=[
    ['your api endpoint',['scope 1', 'scope 2', 'scope n']] // example
    ['https://buildtodoservice.azurewebsites.net/api/todolist',['api://a88bb933-319c-41b5-9f04-eff36d985612/access_as_user']], // api you host
    ['https://graph.microsoft.com/v1.0/me', ['user.read']] // ms graph api - uses short scope names with no uri prefix
];

So when calling the path 'your api endpoint' include the token associated with the scopes 'scope 1', 'scope 2', 'scope n'.

hallz
  • 236
  • 4
  • 6
  • hallz, did you ever get this to work with a api call? I am currently working on attaching token to my api call using `MsalInterceptor` but I am not sure how to do it successfully. I have a open question (https://stackoverflow.com/questions/61048708/understanding-protectedresourcemap-in-msalangularconfiguration-to-pass-token). Any input is really helpful – Maddy Apr 05 '20 at 20:10
  • Maddy, I can't see your question. But I ended up having to use the base/core MSAL.js library as the Angular MSAL.js library does not support silent Token Auth properly (Work is in progress [see roadmap](https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki#roadmap)). – hallz Apr 07 '20 at 00:56
  • For MSAL.js you have to acquire the token first AND for angular to send the token you need to make sure you register the interceptor [as per the ms doco](https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-acquire-token?tabs=angular) – hallz Apr 07 '20 at 01:01
  • @hallz Sorry What are scopes there?? I am new to azure and msal. Is that guids are random generated? – Sandeep Thomas Jul 02 '20 at 05:56
  • 1
    @SandeepThomas If you are using Microsoft Graph API then the scopes are provided (eg. user.read) https://learn.microsoft.com/en-us/graph/permissions-reference. If you create your own scopes in AzureAD then they should have an identifier like 'api://a88bb933-319c-41b5-9f04-eff36d985612/access_as_user' visible in the app registration in Azure AD. – hallz Jul 13 '20 at 04:24
  • 1
    I had to remove the "api://" portion of the identifier for it to work. – Devin Wright Jul 20 '20 at 22:49
0

Devin Wright's comment on this answer worked for me:

I had to remove the "api://" portion of the identifier for it to work.

Wai Ha Lee
  • 8,598
  • 83
  • 57
  • 92
jhhsieh
  • 1
0

For my angular application I'm using this:

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
    const protectedResourceMap = new Map<string, Array<string>>();

    protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);

    protectedResourceMap.set('https://zz-api.azurewebsites.net/api', ['api://2132131-312312-3123-31231-3131/SomeScope']);

    return {
        interactionType: InteractionType.Redirect,
        protectedResourceMap,
    };
}

and then in the providers in the app module registration:

{
        provide: MSAL_INTERCEPTOR_CONFIG,
        useFactory: MSALInterceptorConfigFactory,
    },
Saso
  • 148
  • 10