Clienttoepassingen initialiseren met MSAL.js

Artikel
02/27/2024

In dit artikel wordt beschreven hoe u de Microsoft Authentication Library for JavaScript (MSAL.js) initialiseert met een exemplaar van een toepassing voor een gebruikersagent.

De toepassing voor gebruikersagenten is een vorm van openbare clienttoepassing waarin de clientcode wordt uitgevoerd in een gebruikersagent, zoals een webbrowser. Clients zoals deze slaan geen geheimen op omdat de browsercontext open toegankelijk is.

Zie Openbare en vertrouwelijke client-apps in MSAL voor meer informatie over de typen clienttoepassingen en opties voor toepassingsconfiguraties.

Vereisten

Voordat u een toepassing initialiseert, moet u deze eerst registreren in het Microsoft Entra-beheercentrum om een vertrouwensrelatie tot stand te brengen tussen uw toepassing en het Microsoft Identity Platform.

Nadat u uw app hebt geregistreerd, hebt u enkele of alle volgende waarden nodig die u kunt vinden in het Microsoft Entra-beheercentrum.

Weergegeven als	Vereist	Beschrijving
Client-id van toepassing	Vereist	Een GUID die uw toepassing uniek identificeert in het Microsoft Identity-platform.
Instantie	Optioneel	De URL van de id-provider (het exemplaar) en de doelgroep voor aanmelding voor uw toepassing. Het exemplaar en de doelgroep voor aanmelding vormen de instantie wanneer deze worden samengevoegd.
Id van directory (tenant)	Optioneel	Geef de map-id (tenant) op als u alleen een Line-Of-Business-toepassing bouwt voor uw organisatie. Dit wordt ook wel een toepassing met één tenant genoemd.
Omleidings-URI	Optioneel	Als u een web-app bouwt, geeft u `redirectUri` aan waar de id-provider (het Microsoft Identity-platform) de beveiligingstokens moet retourneren die zijn uitgegeven.

MSAL.js 2.x-apps initialiseren

Initialiseer de verificatiecontext van de MSAL.js door een PublicClientApplication te instantiëren met een configuratieobject. De minimaal vereiste configuratie-eigenschap is de clientID toepassing, die wordt weergegeven als toepassings-id (client) op de pagina Overzicht van de app-registratie in het Microsoft Entra-beheercentrum.

Hier volgt een voorbeeld van een configuratieobject en een instantie van een 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`

Roep handleRedirectPromise aan wanneer de toepassing omleidingsstromen gebruikt. Wanneer u omleidingsstromen gebruikt, handleRedirectPromise moet elke pagina worden geladen.

Er zijn drie resultaten mogelijk van de belofte:

.then wordt aangeroepen en tokenResponse is waarheid: de toepassing wordt geretourneerd vanuit een bewerking voor omleiding die is geslaagd.
.then wordt aangeroepen en tokenResponse is onwaar (null): de toepassing wordt niet geretourneerd door een bewerking voor omleiding.
.catch wordt aangeroepen: de toepassing wordt geretourneerd vanuit een bewerking voor omleiding en er is een fout opgetreden.

MSAL.js 1.x-apps initialiseren

Initialiseer de MSAL 1.x-verificatiecontext door een UserAgentApplication te instantiëren met een configuratieobject. De minimaal vereiste configuratie-eigenschap is de clientID toepassing die wordt weergegeven als toepassings-id (client) op de pagina Overzicht van de app-registratie in het Microsoft Entra-beheercentrum.

Voor verificatiemethoden met omleidingsstromen (loginRedirect en acquireTokenRedirect) in MSAL.js 1.2.x of eerder, moet u expliciet een callback registreren voor succes of fout via de handleRedirectCallback() methode. Het expliciet registreren van de callback is vereist in MSAL.js 1.2.x en eerder, omdat stromen voor omleiding geen beloftes retourneren zoals de methoden met een pop-upervaring. Het registreren van de callback is optioneel in MSAL.js versie 1.3.x en hoger.

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

Enkel exemplaar en configuratie

MSAL.js 1.x en 2.x zijn ontworpen voor één exemplaar en configuratie van respectievelijk de UserAgentApplication of PublicClientApplication om één verificatiecontext aan te geven.

Meerdere exemplaren van UserAgentApplication of PublicClientApplication worden niet aanbevolen omdat ze conflicterende cachevermeldingen en -gedrag in de browser kunnen veroorzaken.

Volgende stappen

Het codevoorbeeld MSAL.js 2.x op GitHub toont de start aan van een PublicClientApplication met een configuratieobject :

Delen via