Вирішення проблеми з аутентифікацією MSAL для M365: Як уникнути помилки "Failed to construct 'URL': Invalid URL"

Вирішення проблеми з аутентифікацією MSAL для M365: Як уникнути помилки “Failed to construct ‘URL’: Invalid URL”

8 Березня 2024 в 21:25 49

У світі сучасних програм і сервісів використання безпечної та ефективної аутентифікації важливо як ніколи. Зокрема, в розробці додатків, що взаємодіють з різними сервісами, часто виникає потреба у забезпеченні аутентифікації користувачів через різні платформи та API. Одним зі широко використовуваних інструментів для цього є MSAL (Microsoft Authentication Library) для M365 (Microsoft 365).

Проте, під час розробки інтеграції MSAL для аутентифікації в M365, можуть виникати різні проблеми. Одна з найпоширеніших помилок, з якою можуть стикнутися розробники, це “Failed to construct ‘URL’: Invalid URL”. Ця помилка може виникати з різних причин і в цій статті ми розглянемо одну з можливих причин та шляхи її вирішення.

Почнемо з того, що детальніше проаналізуємо саму проблему та її можливі причини. У вас може бути код, схожий на наступний:

const msalConfig = {
    auth: {
        clientId: '@Model.M365ClientId',
        authority: '@Model.Authority'
    },
    cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: true,
        secureCookies: true
    }
};
const msalInstance = new msal.PublicClientApplication(msalConfig);
var loginRequest = {
    scopes: ["user.read", "offline_access"],
    prompt: 'select_account',
    redirectUri: window.location.origin + '/blank.html'
};
try {
    await msalInstance.initialize();
    await msalInstance.handleRedirectPromise();
    const loginResponse = await msalInstance.loginPopup(loginRequest);
}
catch (error) {
    console.error(error);
}

const msalConfig = {

auth: {

clientId: '@Model.M365ClientId',

authority: '@Model.Authority'

cache: {

cacheLocation: "localStorage",

storeAuthStateInCookie: true,

secureCookies: true

}

};

const msalInstance = new msal.PublicClientApplication(msalConfig);

var loginRequest = {

scopes: ["user.read", "offline_access"],

prompt: 'select_account',

redirectUri: window.location.origin + '/blank.html'

};

try {

await msalInstance.initialize();

await msalInstance.handleRedirectPromise();

const loginResponse = await msalInstance.loginPopup(loginRequest);

}

catch (error) {

console.error(error);

}

Під час використання цього коду ви отримали помилку “Failed to construct ‘URL’: Invalid URL”. Ця помилка, як правило, виникає через некоректне формування URL або передачу невірних параметрів. У даному випадку, основна причина цієї помилки полягає в тому, що значення, яке ви передаєте у параметрі redirectUri, є неправильним URL.

Щоб зрозуміти, як вирішити цю проблему, необхідно ретельно перевірити значення параметра redirectUri. Ви можете перевірити, яке значення ви отримуєте у виразі window.location.origin + '/blank.html'. Помилка може виникати, наприклад, через неправильне форматування URL або невідповідність цього URL очікуваному формату для параметра redirectUri в MSAL.

Є кілька можливих рішень для виправлення цієї проблеми. Перш за все, переконайтеся, що значення redirectUri формується коректно та відповідає очікуваному формату URL для MSAL. Ви також можете спробувати використати абсолютний шлях для redirectUri, щоб уникнути будь-яких можливих непорозумінь при формуванні URL.

Ще одним можливим рішенням є перевірка прав доступу для вашого додатку в межах M365. Переконайтеся, що додаток має належні дозволи для доступу до ресурсів, які ви намагаєтеся отримати. Неправильні налаштування дозволів можуть також спричиняти проблеми з аутентифікацією через MSAL.

Якщо ви все ще зіткнулися з проблемою після перевірки та корекції значень redirectUri та дозволів додатку, варто перевірити, чи не маєте ви інших помилок у вашому коді або налаштуваннях середовища.

Усунення помилки “Failed to construct ‘URL’: Invalid URL” може виявитися важливим завданням для успішної інтеграції MSAL для аутентифікації в M365. З ретельним аналізом та правильними корекціями ви зможете подолати цю перешкоду і забезпечити безперебійну аутентифікацію для вашого додатку або сервісу.