Блог

Я пытаюсь создать небольшое веб-приложение, которое показывает мне мое имя, мое расписание и мои оценки в школе.

Моя школа в основном использует сервисы Microsoft, что натолкнуло меня на идею использовать их конечные точки Azure API (для расписаний и оценок) в моем проекте.

У меня есть доступ к регистрации приложения в Azure-portal, поэтому я сделал это и заставил его работать для входа в систему с помощью моей студенческой электронной почты. Также я попытался получить Microsoft Graph API, и это работает просто отлично.

Однако, когда я пытаюсь получить конечную точку Grades, она возвращает несанкционированную ошибку 401. Я предполагаю, что это связано с областями, но я не уверен. Оказывается, что мой токен доступа недействителен для этих конечных точек API.

Итак, мой вопрос в том, как мне получить токен доступа, который действителен для этих API? Или это вообще возможно? Имейте в виду, что это отдельные регистрации приложений на Azure-portal, и я могу редактировать только свою собственную, а не ту, которая принадлежит моей школе.

Вот мой файл JavaScript с некоторыми комментариями:

 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..")
    }
}```
 

Вы правы в своем мышлении. Причина, по которой вы получаете эту ошибку, заключается в том, что вы используете токен доступа, полученный для другой области видимости ( User.Read ) с вашим API.

Исправить довольно просто.

Что вам нужно сделать, так это сначала защитить свой API с помощью Azure AD. Вы можете найти эту ссылку полезной для реализации этой функции: 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, которое вы получаете.