如何获取自定义 Azure App API 的有效访问令牌？ (MSAL.js)答案

【问题标题】：How to get a valid access token for a custom Azure App API? (MSAL.js)如何获取自定义 Azure App API 的有效访问令牌？ (MSAL.js)
【发布时间】：2021-12-02 07:51:40
【问题描述】：

我正在尝试构建一个小型网络应用程序，它可以显示我的姓名、日程安排和学校成绩。

我的学校主要使用 Microsoft 的服务，这让我想到在我的项目中使用他们的 Azure API 端点（用于时间表和成绩）。

我有权在 Azure 门户中创建应用注册，所以我这样做了，并让它使用我的学生电子邮件登录。我还尝试获取 Microsoft Graph API，效果非常好。

但是，当我尝试获取 Grades 端点时，它会返回 401 Unauthorized 错误。我猜这与范围有关，但我不确定。事实证明，我的访问令牌对那些 API 端点无效。

所以我的问题是，我如何获得对这些 API 有效的访问令牌？或者甚至有可能吗？ 请记住，它们是 Azure 门户中的单独应用注册，我只能编辑自己的应用，而不能编辑我学校的应用。

这是我的 JavaScript 文件，带有一些 cmets：

const config = {
    auth: {
        clientId: "my_client_id_is_here",
        authority: "https://login.microsoftonline.com/my_tenant_id_is_here",
        redirectUri: "localhost"
    }
};

async function login() {

    console.log("Started..")

    var client = new Msal.UserAgentApplication(config);

    var request = {
        scopes: [ 'User.Read' ]
    };

    let loginResponse = await client.loginPopup(request);
    console.dir(loginResponse);

    let tokenResponse = await client.acquireTokenSilent(request);
    console.dir(tokenResponse);

    // User REQUEST - Here I fetch the Graph API for some profile information, which works fine and writes it to the HTML perfectly.

    let req = await fetch("https://graph.microsoft.com/v1.0/me/", {
        headers: {
            "Authorization": "Bearer " + tokenResponse.accessToken
        }
    });

    let json = await req.json();

    console.log(json);

    document.write("Logged in as " + json.displayName);
    document.write("<br>" + json.mail);
    document.write("<br>" + json.jobTitle + " " + json.officeLocation);

    // School Grades REQUEST - this is the part where I'm trying to fetch my School Grades, but it's not working since it gives me a 401 error..
    
    let gradesReq = await fetch("https://myschool.azurewebsites.net/API/Grades/GetGrades", {
        "headers": {
          "authorization": "Bearer " + tokenResponse.accessToken
        }
    });

    try {
        let gradesJson = await gradesReq.json();
        console.log(gradesJson);
    } catch (err) {
        document.write("An error occured while trying to get the school grades..")
    }
}```

【问题讨论】：

标签： javascript azure msal msal.js

【解决方案1】：

你的想法是正确的。您收到此错误的原因是您的 API 使用了为不同范围 (User.Read) 获取的访问令牌。

修复相当简单。

您必须首先使用 Azure AD 保护您的 API。您可能会发现此链接有助于实现此功能：https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-protected-web-api-overview。

完成此操作后，您需要做的就是为您的 API 获取令牌。在这种情况下，您的作用域代码将类似于以下内容：

var request = {
    scopes: [ 'api://<your-application-id>/.default' ]
};

一旦您获得此范围的令牌并将其与您的 API 一起使用，您应该不会收到您所获得的 401 异常。

【讨论】：