Migrera en ensidesapp i JavaScript från implicit beviljande till auth-kodflöde

Microsoft Authentication Library för JavaScript (MSAL.js) v2.0 har stöd för auktoriseringskodflödet med PKCE och CORS för ensidesprogram på Microsofts identitetsplattform. Följ stegen i avsnitten nedan för att migrera ditt MSAL.js 1.x-program med det implicita beviljandet till MSAL.js 2.0+ (härefter 2.x) och auth-kodflö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.

Migreringsanvisningar

Om du vill uppdatera programmet till MSAL.js 2.x och auth-kodflödet finns det tre huvudsakliga steg:

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

I följande avsnitt beskrivs varje steg i detalj.

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

Om du vill fortsätta att använda din befintliga appregistrering för dina program använder du Azure Portal för att uppdatera registreringens omdirigerings-URI:er till SPA-plattformen. Om du gör det aktiveras auktoriseringskodflödet med PKCE- och CORS-stöd för appar som använder registreringen (du måste 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 webbplattformen:

  1. Logga in på Azure Portal och välj din Azure Active Directory klientorganisation.

  2. I Appregistreringarväljer du ditt program och sedan Autentisering.

  3. I panelen Webbplattform under Omdirigerings-URI:erväljer du varningsbanderollen som anger att du bör 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 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 för ensidesapplikationens plattform, som visar att CORS stöder med auktoriseringskodflödet och PKCE har aktiverats 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:er i din befintliga registrering.

Uppdatera koden till MSAL.js 2.x

I MSAL 1.x skapade du en programinstans genom att initiera en UserAgentApplication enligt följande:

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

const msalInstance = new msal.UserAgentApplication(config);

I MSAL 2.x initierar du i stället en 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 Tutorial: Sign in users and call the Microsoft Graph API from a JavaScript single-page app (SPA) using auth code flow (Självstudie: Logga in användare och anropa Microsoft Graph API från en JavaScript-ensidesapp (SPA) med auth-kodflö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 inställningarna för implicit beviljande 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.

Nästa steg

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

Om du vill fördjupa dig i javaScript-utveckling av ensidesbaserade program på Microsofts identitetsplattform kan scenariot scenario: ensidesserie med program med en sida hjälpa dig att komma igång.