Megjegyzés
Az oldalhoz való hozzáféréshez engedély szükséges. Megpróbálhat bejelentkezni vagy módosítani a címtárat.
Az oldalhoz való hozzáféréshez engedély szükséges. Megpróbálhatja módosítani a címtárat.
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:
-
createNestablePublicClientApplicationvisszaesik,createStandardPublicClientApplicationha 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)
AADvan 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.
- Ha a(z)
(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.
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:
- előugró ablak megjelenítése az aktuális oldalról
- a böngészőablak átirányítása a bejelentkezési kiszolgálóra
Előugró API-k
loginPopupacquireTokenPopup
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
loginRedirectacquireTokenRedirect
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!