MSAL.js受保护的资源映射 - 解释需要设置什么

Question

我有两个网站，一个是Angular应用程序，另一个是WebAPI。

当我在前端使用MSAL.js调用WebAPI时，没有附加任何令牌（因为CORS）。

我知道我需要设置protectedResourceMap，但我找不到清晰的解释如何设置它。

我可以找到很多示例，但没有一个给出让我能够理解的解释。

请问有人能提供任何建议吗？

- Beakie

Answer 1

我刚开始学习这个，但是在文档中找到了这些信息：

MSAL.js Angular 自述文件：

protectedResourceMap：资源到作用域的映射 {"https://graph.microsoft.com/v1.0/me", ["user.read", "mail.send"]}。MSAL 内部使用此映射表，在 WebApi 调用中自动附加令牌。这仅对 CORS 调用是必需的。

我对给定的示例的理解是：

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
];

因此，在调用路径“你的API端点”时，包括与范围“范围1”，“范围2”，“范围n”相关联的令牌。

- hallz

---

Hallz，你曾经尝试过使用API调用来实现这个功能吗？我目前正在使用MsalInterceptor将令牌附加到我的API调用中，但我不确定如何成功地实现它。我有一个开放性问题（https://stackoverflow.com/questions/61048708/understanding-protectedresourcemap-in-msalangularconfiguration-to-pass-token）。任何意见都非常有帮助。 - Maddy

Maddy，我看不到你的问题。但最终我不得不使用基本/核心MSAL.js库，因为Angular MSAL.js库不支持静默令牌认证（工作正在进行中请参见路线图）。 - hallz

对于MSAL.js，您首先必须获取令牌，并且为了发送令牌到Angular，您需要确保注册拦截器根据MS文档。 - hallz

@hallz 抱歉，请问那些作用域是什么？我对 Azure 和 MSAL 还不熟悉。GUID 是否是随机生成的？ - Sandeep Thomas

如果您正在使用Microsoft Graph API，则提供了范围（例如user.read）https://learn.microsoft.com/en-us/graph/permissions-reference。 如果您在AzureAD中创建自己的范围，则它们应该具有标识符，如“api：//a88bb933-319c-41b5-9f04-eff36d985612/access_as_user”，可在Azure AD中的应用程序注册中看到。 - hallz

我必须删除标识符中的“api：//”部分才能使其正常工作。 - Devin Wright

Answer 2

对于我的Angular应用程序，我正在使用这个：

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,
    };
}

然后在应用程序模块的提供者注册中：

{
        provide: MSAL_INTERCEPTOR_CONFIG,
        useFactory: MSALInterceptorConfigFactory,
    },

- Saso

Answer 3

Devin Wright在这个答案上的评论对我起到了作用：

我不得不删除标识符中的“api：//”部分才能使其起作用。

- jhhsieh