Dela via


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

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

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 flödesvarningsbanderoll på webbappspanelen i Azure Portal

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

    Välj omdirigerings-URI-fönstret i SPA-fönstret i 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.

Panel för ensidesprogram i appregistrering i 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);

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.