Dela via

Migrera en JavaScript-ensidesapp från implicit beviljande till autentiseringskodflöde

  • Artikel

Microsoft Authentication Library for JavaScript (MSAL.js) v2.0 ger stöd för auktoriseringskodflödet med PKCE och CORS till ensidesprogram på Microsofts identitetsplattform. Följ stegen i avsnitten nedan för att migrera ditt MSAL.js 1.x-program med hjälp av implicit beviljande till MSAL.js 2.0+ (nedan 2.x) och autentiseringskodflödet.

MSAL.js 2.x förbättrar MSAL.js 1.x genom att stödja auktoriseringskodflödet i webbläsaren i stället för det implicita beviljandeflödet. MSAL.js 2.x stöder INTE det implicita flödet.

Migreringssteg

Det finns tre primära steg för att uppdatera programmet till MSAL.js 2.x och autentiseringskodflödet:

  1. Växla omdirigerings-URI :er för din appregistrering från webbplattformen till ensidesappplattform .
  2. Uppdatera koden från MSAL.js 1.x till 2.x.
  3. Inaktivera implicit beviljande i din appregistrering när alla program som delar registreringen har uppdaterats till MSAL.js 2.x och autentiseringskodflödet.

I följande avsnitt beskrivs varje steg i detalj.

Växla omdirigerings-URI:er till SPA-plattformen

Dricks

Stegen i den här artikeln kan variera något beroende på vilken portal du börjar från.

Om du vill fortsätta använda din befintliga appregistrering för dina program använder du administrationscentret för Microsoft Entra för att uppdatera registreringens omdirigerings-URI:er till SPA-plattformen. På så sätt kan auktoriseringskodflödet med PKCE- och CORS-stöd för appar som använder registreringen (du behöver fortfarande uppdatera programmets kod till MSAL.js v2.x).

Följ dessa steg för appregistreringar som för närvarande är konfigurerade med omdirigerings-URI:er för webbplattform :

  1. Logga in på administrationscentret för Microsoft Entra.

  2. Bläddra till Identitetsprogram>> Appregistreringar, välj ditt program och sedan Autentisering.

  3. I panelen Webbplattform under Omdirigerings-URI:er väljer du varningsbanderollen som anger att du ska migrera dina URI:er.

    Implicit flow warning banner on web app tile in Azure portal

  4. Välj endast de omdirigerings-URI:er vars program ska använda MSAL.js 2.x och välj sedan Konfigurera.

    Select redirect URI pane in SPA pane in Azure portal

Dessa omdirigerings-URI:er bör nu visas i panelen Plattform för enkelsidiga program , som visar att CORS-stöd med auktoriseringskodflödet och PKCE är aktiverat för dessa URI:er.

Single-page application tile in app registration in Azure portal

Du kan också skapa en ny appregistrering i stället för att uppdatera omdirigerings-URI:erna i din befintliga registrering.

Uppdatera koden till MSAL.js 2.x

I MSAL 1.x skapade du en programinstans genom att initiera en UserAgentApplication på följande sätt:

// MSAL 1.x
import * as msal from "msal";

const msalInstance = new msal.UserAgentApplication(config);

I MSAL 2.x initierar du i stället [PublicClientApplication][msal-js-publicclientapplication]:

// MSAL 2.x
import * as msal from "@azure/msal-browser";

const msalInstance = new msal.PublicClientApplication(config);

En fullständig genomgång av hur du lägger till MSAL 2.x i ditt program finns i Självstudie: Logga in användare och anropa Microsoft Graph API från en JavaScript-enkelsidig app (SPA) med hjälp av autentiseringskodflöde.

Ytterligare ändringar som du kan behöva göra i koden finns i migreringsguiden på GitHub.

Inaktivera inställningar för implicit beviljande

När du har uppdaterat alla dina produktionsprogram som använder den här appregistreringen och dess klient-ID till MSAL 2.x och auktoriseringskodflödet bör du avmarkera de implicita inställningarna för beviljande under autentiseringsmenyn i appregistreringen.

När du avmarkerar inställningarna för implicit beviljande i appregistreringen inaktiveras det implicita flödet för alla program som använder registrering och dess klient-ID.

Inaktivera inte det implicita beviljandeflödet innan du har uppdaterat alla dina program till MSAL.js 2.x och [PublicClientApplication][msal-js-publicclientapplication].

Nästa steg

  • Mer information om auktoriseringskodflödet, inklusive skillnaderna mellan implicita kodflöden och autentiseringskodflöden, finns i auktoriseringskodflödet Microsofts identitetsplattform och OAuth 2.0.

  • Läs mer genom att skapa ett React-program med en sida (SPA) som loggar in användare i följande självstudieserie i flera delar.