Az MSAL inicializálása

Az MSAL Browser inicializálása előtt először regisztrálja alkalmazását a Microsoft Entra felügyeleti központban az alkalmazás (ügyfél) azonosítójának megszerzéséhez.

CreatePCA minta

MSAL.js olyan CreatePCA mintát biztosít, amely lehetővé teszi az alkalmazás típusának PublicClientApplication kiválasztását. Az aktuális lehetőségek közé tartoznak Standard és Nestable konfigurációk. A jövőben további konfigurációkat vezetünk be.

Standard konfiguráció

Ha az MSAL.js-t egylapos alkalmazásban használja, importálja az msal-browser csomagot egy IPublicClientApplication példány létrehozásához a(z) createStandardPublicClientApplication használatával. Ez a függvény létrehoz egy standard konfigurációjú példányt PublicClientApplication .

import * as msal from "@azure/msal-browser";

const pca = msal.createStandardPublicClientApplication({
    auth: {
        clientId: "ENTER_CLIENT_ID",
        authority: "https://login.microsoftonline.com/ENTER_TENANT_ID",
    },
});

Beágyazott alkalmazáskonfiguráció

Ha az alkalmazása egy iframe-be ágyazott beágyazott alkalmazás, amely a hitelesítését egy hub SDK-ra bízza (amely vagy egy SPA, vagy a MetaOS keretrendszerben futó asztali alkalmazás), importálja az msal-browser csomagot egy IPublicClientApplication példány létrehozásához a(z) createNestablePublicClientApplication használatával. Ez a függvény a NAA-konfigurációval létrehoz egy PublicClientApplication példányt.

import * as msal from "@azure/msal-browser";

const nestablePca = msal.createNestablePublicClientApplication({
    auth: {
        clientId: "ENTER_CLIENT_ID",
        authority: "https://login.microsoftonline.com/ENTER_TENANT_ID",
    },
});

Important

A beágyazott alkalmazáshitelesítés engedélyezése előtt tekintse át az alábbi útmutatást:

  • createNestablePublicClientApplication visszaesik, createStandardPublicClientApplication ha a beágyazott alkalmazáshíd nem érhető el, vagy a központ nincs konfigurálva a beágyazott alkalmazáshitelesítés támogatására.
  • Ha egy alkalmazásnak nem kell beágyazott alkalmazásnak lennie, inkább azt kell használnia createStandardPublicClientApplication .
  • A NAA-alkalmazások nem támogatnak bizonyos fiókkeresési API-kat. További információ: aktív fiókok.

A PublicClientApplication objektum inicializálása

A MSAL.jshasználatához létre kell hoznunk egy objektumot PublicClientApplication . Meg kell adnia a kérelme client id (appId) adatát.

1. lehetőség

Példányosít egy PublicClientApplication objektumot, majd inicializálja azt. A initialize függvény aszinkron, és más MSAL.js API-k meghívása előtt fel kell oldania.

import { PublicClientApplication } from "@azure/msal-browser";

const msalConfig = {
    auth: {
        clientId: 'your_client_id'
    }
};

const msalInstance = new PublicClientApplication(msalConfig);
await msalInstance.initialize();

2\. lehetőség

createPublicClientApplication Inicializált objektumot visszaadó statikus metódus meghívásaPublicClientApplication. Vegye figyelembe, hogy ez a függvény aszinkron.

import { PublicClientApplication } from "@azure/msal-browser";

const msalConfig = {
    auth: {
        clientId: 'your_client_id'
    }
};

const msalInstance = await PublicClientApplication.createPublicClientApplication(msalConfig);

(Opcionális) Hitelesítésszolgáltató konfigurálása

Az MSAL alapértelmezés szerint a common bérlő használatára van konfigurálva, amelyet több-bérlős alkalmazásokhoz, valamint személyes fiókokat engedélyező alkalmazásokhoz használnak (nem B2C).

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.microsoftonline.com/common/'
    }
};

Ha az alkalmazás célközönsége egyetlen bérlő, az alábbihoz hasonlóan meg kell adnia egy szolgáltatónak a bérlőazonosítóját:

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.microsoftonline.com/{your_tenant_id}'
    }
};

Ha az alkalmazás egy külön OIDC-kompatibilis hitelesítésszolgáltatót használ, például a "https://login.live.com" vagy egy IdentityServer szolgáltatást, akkor azt a knownAuthorities mezőben kell megadnia, és a protocolMode értékét "OIDC" értékre kell állítania.

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.live.com',
        knownAuthorities: ["login.live.com"],
    },
    system: {
        protocolMode: "OIDC",
    }
};

Note

A protocolMode konfigurációs beállítás, amely azt jelzi, hogy az MSAL engedélyezi-e Microsoft Entra ID-specifikus quirk-eket, a következő viselkedést módosítja:

  • Hitelesítésszolgáltató metaadatai (óta: v2.4.0):
    • Ha a(z) OIDC értékre van állítva, a könyvtár nem foglalja bele a(z) /v2.0/ elemet a hitelesítésszolgáltató elérési útjába a hitelesítésszolgáltató metaadatainak lekérésekor.
    • Ha a(z) AAD van beállítva (ez az alapértelmezett érték), a könyvtár belefoglalja a(z) /v2.0/ elemet az authority elérési útjába a hitelesítésszolgáltató metaadatainak lekérésekor.

(Nem kötelező) Átirányítási URI konfigurálása

Alapértelmezés szerint az MSAL úgy van konfigurálva, hogy az átirányítási URI-t az aktuális lapra állítsa, amelyen fut. Ha az MSAL-t futtatótól eltérő oldalon szeretné megkapni az engedélyezési kódot, ezt a konfigurációban állíthatja be:

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.microsoftonline.com/{your_tenant_id}',
        redirectUri: 'https://contoso.com'
    }
};

A használt átirányítási URI-t konfigurálni kell a portálregisztrációban. Az átirányítási URI kérésenként is beállítható a login és a request API-k használatával.

(Nem kötelező) További konfiguráció

Az MSAL további konfigurációs lehetőségekkel rendelkezik, amelyeket itt tekinthet meg.

Alkalmazásindítás kezelése 0 vagy több elérhető fiókkal

Az alábbi folyamatábra segítségével elkerülheti a szükségtelen hitelesítési kéréseket, ha egy fiók (vagy több fiók) elérhető az egyszeri bejelentkezéshez.

MSAL.js rendszerindítási folyamat diagramja

Interakciótípus kiválasztása

A böngészőben kétféleképpen jelenítheti meg a bejelentkezési képernyőt a felhasználók számára az alkalmazásból:

  • loginPopup
  • acquireTokenPopup

Az előugró API-k olyan ES6-ígéreteket használnak, amelyek feloldják, amikor az előugró ablakban a hitelesítési folyamat befejeződik, és visszatér a megadott átirányítási URI-hoz, vagy elutasítják, ha problémák merülnek fel a kódban, vagy az előugró ablak le van tiltva.

A redirect URI-val kapcsolatos szempontok

Előugró API-k használata esetén az redirectUri MSAL átirányítási hidat megvalósító dedikált lapra kell mutatnia. Ez a lap kezeli a hitelesítési választ, és visszaküldi azt a fő alkalmazásnak.

Az átirányítási oldal beállításával kapcsolatos részletes útmutatásért tekintse meg a RedirectUri-szempontokat.

msalInstance.loginPopup({
    redirectUri: "http://localhost:3000/redirect",
});

Átirányítási API-k

  • loginRedirect
  • acquireTokenRedirect

Megjegyzés: Ha a msal-angular vagy a msal-react elemet használja, az átirányítások kezelése eltérő, ezért további részletekért lásd a msal-angular átirányítási dokumentációt és a msal-react GYIK-et.

Az átirányítási API-k aszinkron (vagyis ígéretes) void függvények, amelyek néhány alapvető információ gyorsítótárazása után átirányítják a böngészőablakot. Ha az átirányítási API-k használata mellett dönt, vegye figyelembe, hogy az API megfelelő kezeléséhez fel kell hívnia a hívásthandleRedirectPromise(). A jogkivonat-csere befejezésekor az alábbi függvény használatával hajthat végre műveletet:

msalInstance.handleRedirectPromise().then((tokenResponse) => {
    // Check if the tokenResponse is null
    // If the tokenResponse !== null, then you are coming back from a successful authentication redirect.
    // If the tokenResponse === null, you are not coming back from an auth redirect.
}).catch((error) => {
    // handle error, either in the library or coming back from the server
});

Ez lehetővé teszi a tokenek lekérését is az oldal újratöltésekor. A használattal kapcsolatos további információkért tekintse meg az onPageLoad mintát .

Nem ajánlott mindkét interakciótípust használni egyetlen alkalmazásban.

Note

handleRedirectPromiseopcionálisan elfogad egy feldolgozandó kivonatértéket, amely alapértelmezés szerint az aktuális érték.window.location.hash Ezt a paramétert csak olyan helyzetekben kell megadni, ahol az aktuális érték window.location.hash nem tartalmazza a feldolgozandó átirányítási választ. Szinte minden forgatókönyv esetében az alkalmazásoknak nem kell explicit módon megadniuk ezt a paramétert.

Következő lépések

Készen áll a bejelentkezésre!