Inicializace klientských aplikací pomocí MSAL.js

Článek
02/27/2024

Tento článek popisuje inicializaci knihovny Microsoft Authentication Library pro JavaScript (MSAL.js) s instancí aplikace uživatelského agenta.

Aplikace uživatelského agenta je forma veřejné klientské aplikace, ve které se kód klienta spouští v uživatelském agentu, jako je webový prohlížeč. Klienti, jako jsou tyto, neukládají tajné kódy, protože kontext prohlížeče je otevřený.

Další informace o typech klientských aplikací a možnostech konfigurace aplikací najdete v tématu Veřejné a důvěrné klientské aplikace v knihovně MSAL.

Požadavky

Před inicializací aplikace ji nejprve musíte zaregistrovat v Centru pro správu Microsoft Entra a vytvořit vztah důvěryhodnosti mezi vaší aplikací a platformou Microsoft Identity Platform.

Po registraci aplikace budete potřebovat některé nebo všechny následující hodnoty, které najdete v Centru pro správu Microsoft Entra.

Hodnota	Požadováno	Popis
ID aplikace (klienta)	Požaduje se	Identifikátor GUID, který jednoznačně identifikuje vaši aplikaci na platformě Microsoft Identity Platform.
Autorita	Volitelné	Adresa URL zprostředkovatele identity ( instance) a cílová skupina přihlašování pro vaši aplikaci. Instance a cílová skupina přihlašování při zřetězení tvoří autoritu.
ID adresáře (klienta)	Volitelné	Zadejte ID adresáře (tenanta), pokud vytváříte obchodní aplikaci výhradně pro vaši organizaci, často označovanou jako aplikace s jedním tenantem.
URI pro přesměrování	Volitelné	Pokud vytváříte webovou aplikaci, určuje, `redirectUri` kde má zprostředkovatel identity (platforma Microsoft Identity Platform) vrátit tokeny zabezpečení, které vydala.

Inicializace aplikací MSAL.js 2.x

Inicializace kontextu ověřování MSAL.js vytvořením instance PublicClientApplication s objektem Konfigurace . Minimální požadovaná vlastnost konfigurace je aplikace, která se clientID zobrazuje jako ID aplikace (klienta) na stránce Přehled registrace aplikace v Centru pro správu Microsoft Entra.

Tady je příklad objektu konfigurace a vytvoření instance objektu PublicClientApplication:

const msalConfig = {
  auth: {
    clientId: "Enter_the_Application_Id_Here",
    authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
    knownAuthorities: [],
    redirectUri: "https://localhost:{port}/redirect",
    postLogoutRedirectUri: "https://localhost:{port}/redirect",
    navigateToLoginRequestUrl: true,
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false,
  },
  system: {
    loggerOptions: {
      loggerCallback: (
        level: LogLevel,
        message: string,
        containsPii: boolean
      ): void => {
        if (containsPii) {
          return;
        }
        switch (level) {
          case LogLevel.Error:
            console.error(message);
            return;
          case LogLevel.Info:
            console.info(message);
            return;
          case LogLevel.Verbose:
            console.debug(message);
            return;
          case LogLevel.Warning:
            console.warn(message);
            return;
        }
      },
      piiLoggingEnabled: false,
    },
    windowHashTimeout: 60000,
    iframeHashTimeout: 6000,
    loadFrameTimeout: 0,
  },
};

// Create an instance of PublicClientApplication
const msalInstance = new PublicClientApplication(msalConfig);

// Handle the redirect flows
msalInstance
  .handleRedirectPromise()
  .then((tokenResponse) => {
    // Handle redirect response
  })
  .catch((error) => {
    // Handle redirect error
  });

`handleRedirectPromise`

Vyvolání handleRedirectPromise , když aplikace používá toky přesměrování. Při použití toků handleRedirectPromise přesměrování by se mělo spouštět při každém načtení stránky.

Ze slibu jsou možné tři výsledky:

.then je vyvolána a tokenResponse je pravdivá: Aplikace se vrací z operace přesměrování, která byla úspěšná.
.then je vyvolán a tokenResponse je falsy (null): Aplikace se nevrací z operace přesměrování.
.catch Vyvolá se: Aplikace se vrací z operace přesměrování a došlo k chybě.

Inicializace aplikací MSAL.js 1.x

Inicializace kontextu ověřování MSAL 1.x vytvořením instance UserAgentApplication s objektem konfigurace. Minimální požadovaná vlastnost konfigurace je vaše aplikace, která se clientID zobrazuje jako ID aplikace (klienta) na stránce Přehled registrace aplikace v Centru pro správu Microsoft Entra.

Pro metody ověřování s toky přesměrování (loginRedirect a acquireTokenRedirect) v MSAL.js 1.2.x nebo starší je nutné explicitně zaregistrovat zpětné volání pro úspěch nebo chybu prostřednictvím handleRedirectCallback() metody. Explicitní registrace zpětného volání se vyžaduje v MSAL.js 1.2.x a starších verzích, protože toky přesměrování nevrací přísliby, jako jsou metody s automaticky otevíraným prostředím. Registrace zpětného volání je volitelná v MSAL.js verze 1.3.x a novější.

// Configuration object constructed
const msalConfig = {
  auth: {
    clientId: "Enter_the_Application_Id_Here",
  },
};

// Create UserAgentApplication instance
const msalInstance = new UserAgentApplication(msalConfig);

function authCallback(error, response) {
  // Handle redirect response
}

// Register a redirect callback for Success or Error (when using redirect methods)
// **REQUIRED** in MSAL.js 1.2.x and earlier
// **OPTIONAL** in MSAL.js 1.3.x and later
msalInstance.handleRedirectCallback(authCallback);

Jedna instance a konfigurace

Oba MSAL.js 1.x a 2.x jsou navrženy tak, aby měly jednu instanci a konfiguraci UserAgentApplication nebo PublicClientApplication, v uvedeném pořadí, aby představovaly jeden kontext ověřování.

Více instancí UserAgentApplication nebo PublicClientApplication se nedoporučuje, protože můžou způsobit konfliktní položky mezipaměti a chování v prohlížeči.

Další kroky

Ukázka kódu MSAL.js 2.x na GitHubu ukazuje vytvoření instance PublicClientApplication s objektem Konfigurace :

Sdílet prostřednictvím