Een JavaScript-app met één pagina migreren van impliciete toekenning naar autorisatiecodestroom

Artikel
02/14/2024

De Microsoft Authentication Library voor JavaScript (MSAL.js) v2.0 biedt ondersteuning voor de autorisatiecodestroom met PKCE en CORS voor toepassingen met één pagina op het Microsoft identity platform. Volg de stappen in de onderstaande secties om de MSAL.js 1.x-toepassing met impliciete toekenning te migreren naar MSAL.js 2.0+ (hierna 2. x) en de authenticatiecodestroom.

MSAL.js 2.x verbetert MSAL.js 1.x door de autorisatiecodestroom in de browser te ondersteunen in plaats van de impliciete toekenningsstroom. MSAL.js 2.x biedt GEEN ondersteuning voor de impliciete stroom.

Migratiestappen

Als u uw toepassing wilt bijwerken naar MSAL.js 2.x en de authenticatiecodestroom, moet u drie primaire stappen uitvoeren:

Wijzig de omleidings-URL(s) van uw app-registratie van Web-platform naar SPA-platform.
Werk de code bij van MSAL.js 1.x naar 2.x.
Schakel de impliciete toekenning in de app-registratie uit wanneer alle toepassingen die de registratie delen, zijn bijgewerkt naar MSAL.js 2.x en de authenticatiecodestroom.

In de volgende secties wordt elke stap uitgebreid beschreven.

Omleidings-URL's naar SPA-platform doorschakelen

Tip

Stappen in dit artikel kunnen enigszins variëren op basis van de portal waaruit u begint.

Als u uw bestaande app-registratie voor uw toepassingen wilt blijven gebruiken, gebruikt u het Microsoft Entra-beheercentrum om de omleidings-URI's van de registratie bij te werken naar het beveiligd-WACHTWOORDVERIFICATIE-platform. Hierdoor wordt de autorisatiecodestroom met PKCE- en CORS-ondersteuning ingeschakeld voor apps die gebruikmaken van de registratie (de code van uw toepassing moet nog wel worden bijgewerkt naar MSAL.js v2.x).

Volg deze stappen voor app-registraties die momenteel zijn geconfigureerd met omleidings-URL’s voor het Web-platform:

Meld u aan bij het Microsoft Entra-beheercentrum.
Blader naar Identiteitstoepassingen>> App-registraties, selecteer uw toepassing en vervolgens Verificatie.
Selecteer in de tegel Web-platform onder Omleidings-URL's de waarschuwingsbanner die aangeeft dat u de URLS's moet migreren.
Selecteer alleen de omleidings-URL's waarvan de toepassingen MSAL.js 2.x gebruiken en selecteer vervolgens Configureren.

De omleidings-URLS's zouden nu moeten worden weergegeven in de SPA-platformtegel, wat betekent dat CORS-ondersteuning met de autorisatiecodestroom en PKCE is ingeschakeld voor deze URL's.

Single-page application tile in app registration in Azure portal

U kunt ook een nieuwe app-registratie maken in plaats van de omleidings-URL's in uw bestaande registratie bij te werken.

Werk uw code bij naar MSAL.js 2.x

In MSAL 1.x hebt u een toepassingsexemplaren gemaakt door een UserAgentApplication als volgt te initialiseren:

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

const msalInstance = new msal.UserAgentApplication(config);

Initialiseer in MSAL 2.x in plaats daarvan een [PublicClientApplication][msal-js-publicclientapplication]:

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

const msalInstance = new msal.PublicClientApplication(config);

Zie Zelfstudie: Gebruikers aanmelden en de Microsoft Graph API aanroepen vanuit een JavaScript-app met één pagina (SPA) met behulp van een verificatiecodestroom voor een volledige procedure voor het toevoegen van MSAL 2.x aan uw toepassing.

Zie de migratiehandleiding op GitHub voor aanvullende wijzigingen die u mogelijk in uw code moet aanbrengen.

Impliciete toekenningsinstellingen uitschakelen

Nadat u de productietoepassingen die deze app-registratie en de bijbehorende client-ID gebruiken, hebt bijgewerkt naar MSAL 2.x en de autorisatiecodestroom, moet u de impliciete toekenningsinstellingen onder het menu Verificatie in de app-registratie uitschakelen.

Wanneer u de impliciete toekenningsinstellingen in de app-registratie uitschakelt, wordt de impliciete stroom uitgeschakeld voor alle toepassingen die de registratie en de bijbehorende client-ID gebruiken.

Schakel de impliciete toekenningsstroom niet uit voordat u al uw toepassingen hebt bijgewerkt naar MSAL.js 2.x en [PublicClientApplication][msal-js-publicclientapplication].

Volgende stappen

Raadpleeg het Microsoft identity platform en de OAuth 2.0-autorisatiecodestroom voor meer informatie over de autorisatiecodestroom, met inbegrip van de verschillen tussen de impliciete en autorisatiecodestromen.
Meer informatie vindt u door een React-toepassing met één pagina (SPA) te bouwen waarmee gebruikers worden aangemeld in de volgende reeks meerdelige zelfstudies.

Delen via