Inicializace MSAL

Před inicializací MSAL Browser začněte tím, že zaregistrujete svou aplikaci v centru pro správu Microsoft Entra, abyste získali ID aplikace (klienta).

Vzor CreatePCA

MSAL.js nabízí vzor CreatePCA, který vám umožňuje zvolit typ PublicClientApplication pro vaši aplikaci. Aktuální možnosti zahrnují Standard a Nestable konfigurace. V budoucnu bude zavedeno více konfigurací.

Standardní konfigurace

Pokud používáte MSAL.js v jednostránkové aplikaci, importujte msal-browser a vytvořte instanci IPublicClientApplication pomocí createStandardPublicClientApplication. Tato funkce vytvoří PublicClientApplication instanci se standardní konfigurací.

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

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

Vnořená konfigurace aplikace

Pokud je vaše aplikace vnořená aplikace v rámci iframe, která deleguje své ověřování na SDK centra (což je buď SPA, nebo desktopová aplikace spuštěná ve frameworku MetaOS), importujte msal-browser a vytvořte instanci IPublicClientApplication pomocí createNestablePublicClientApplication. Tato funkce vytvoří PublicClientApplication instanci s konfigurací NAA.

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

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

Inicializace objektu PublicClientApplication

Pokud chcete použít MSAL.js, musíte vytvořit instanci objektu PublicClientApplication . Musíte zadat client id (appId) vaší aplikace.

Možnost 1

Vytvořte instanci objektu PublicClientApplication a potom ho inicializujete. Funkce initialize je asynchronní a musí se vyřešit před vyvoláním jiných rozhraní API MSAL.js.

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

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

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

Možnost 2

Vyvolá statickou metodu createPublicClientApplication , která vrátí inicializovaný PublicClientApplication objekt. Všimněte si, že tato funkce je asynchronní.

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

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

const msalInstance = await PublicClientApplication.createPublicClientApplication(msalConfig);

(Volitelné) Konfigurace autority

Ve výchozím nastavení je služba MSAL nakonfigurovaná s tenantem common , který se používá pro aplikace a aplikace s více tenanty, které povolují osobní účty (ne B2C).

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

Pokud je cílová skupina vaší aplikace jedním tenantem, musíte zadat autoritu s ID vašeho tenanta, například níže:

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

Pokud vaše aplikace používá samostatnou autoritu kompatibilní s OIDC, například "https://login.live.com" nebo IdentityServer, budete ji muset uvést v poli knownAuthorities a nastavit protocolMode na "OIDC".

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

(Volitelné) Nakonfigurujte identifikátor URI pro přesměrování

Ve výchozím nastavení je knihovna MSAL nakonfigurovaná tak, aby nastavila identifikátor URI přesměrování na aktuální stránku, na které je spuštěná. Pokud chcete autorizační kód získat na jiné stránce, než na které běží MSAL, můžete ho nastavit v konfiguraci:

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

Použitý identifikátor URI přesměrování musí být nakonfigurovaný v registraci portálu. Pomocí rozhraní API login a request můžete také nastavit identifikátor URI přesměrování pro každý požadavek.

(Volitelné) Další konfigurace

MSAL nabízí další možnosti konfigurace, které najdete zde.

Zpracování spuštění aplikace s 0 nebo více dostupnými účty

Následující diagram postupu vám může pomoci vyhnout se zbytečným výzvám k ověření, když je pro jednotné přihlašování k dispozici účet (nebo více účtů).

Volba typu interakce

V prohlížeči můžete uživatelům prezentovat přihlašovací obrazovku dvěma způsoby:

• zobrazení vyskakovacího okna z aktuální stránky
• přesměrování okna prohlížeče na přihlašovací server

Rozhraní API pro vyskakovací okna

• loginPopup
• acquireTokenPopup

Rozhraní API pro místní okno používají ES6 Promise, které se splní, když se tok ověřování v místním okně dokončí a vrátí na zadaný identifikátor URI přesměrování, nebo se zamítnou, pokud dojde k problémům v kódu nebo je místní okno zablokováno.

Důležité informace o identifikátorech RedirectUri

Při použití automaticky otevíraných rozhraní API redirectUri musí odkazovat na vyhrazenou stránku, která implementuje most přesměrování MSAL. Tato stránka zpracovává odpověď na ověření a komunikuje zpět s hlavní aplikací.

Podrobné pokyny k nastavení stránky přesměrování najdete v části Aspekty RedirectUri.

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

API pro přesměrování

• loginRedirect
• acquireTokenRedirect

Poznámka: Pokud používáte msal-angular nebo msal-react, přesměrování se zpracovává jinak a více podrobností najdete v msal-angular dokumentaci k přesměrování a v msal-react FAQ.

Rozhraní API pro přesměrování jsou asynchronní (tj. vrací příslib), void které po uložení některých základních informací do mezipaměti přesměrují okno prohlížeče. Pokud se rozhodnete používat rozhraní API pro přesměrování, mějte na paměti, že musíte volat handleRedirectPromise() , aby rozhraní API správně zvládlo. K provedení akce při dokončení výměny tokenů můžete použít následující funkci:

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
});

To vám také umožní načíst tokeny při znovunačtení stránky. Další informace o použití najdete v ukázce onPageLoad.

Nedoporučujeme používat oba typy interakcí v jedné aplikaci.

Další kroky

Jste připraveni provést přihlášení!