Migrowanie jednostronicowej aplikacji JavaScript z niejawnego udzielenia do przepływu kodu uwierzytelniania

Biblioteka uwierzytelniania firmy Microsoft dla języka JavaScript (MSAL.js) w wersji 2.0 zapewnia obsługę przepływu kodu autoryzacji za pomocą protokołu PKCE i mechanizmu CORS w aplikacjach jednostronicowych w Platforma tożsamości Microsoft. Wykonaj kroki opisane w poniższych sekcjach, aby przeprowadzić migrację aplikacji MSAL.js 1.x przy użyciu niejawnego udzielenia do MSAL.js 2.0 lub nowszej (poniżej 2.x) oraz przepływu kodu uwierzytelniania.

MSAL.js 2.x ulepsza MSAL.js 1.x, obsługując przepływ kodu autoryzacji w przeglądarce zamiast niejawnego przepływu udzielania. MSAL.js 2.x nie obsługuje niejawnego przepływu.

Kroki migracji

Aby zaktualizować aplikację do MSAL.js 2.x i przepływu kodu uwierzytelniania, istnieją trzy podstawowe kroki:

  1. Przełącz identyfikatory URI przekierowania rejestracji aplikacji z platformy internetowej na platformę aplikacji jednostronicowej.
  2. Zaktualizuj kod z MSAL.js 1.x do wersji 2.x.
  3. Wyłącz niejawne udzielanie w rejestracji aplikacji, gdy wszystkie aplikacje udostępniające rejestrację zostały zaktualizowane do MSAL.js 2.x i przepływu kodu uwierzytelniania.

W poniższych sekcjach opisano każdy krok szczegółowo.

Przełączanie identyfikatorów URI przekierowania do platformy SPA

Napiwek

Kroki opisane w tym artykule mogą się nieznacznie różnić w zależności od portalu, od którego zaczynasz.

Jeśli chcesz kontynuować korzystanie z istniejącej rejestracji aplikacji dla aplikacji, użyj centrum administracyjnego firmy Microsoft Entra, aby zaktualizować identyfikatory URI przekierowania rejestracji do platformy SPA. Dzięki temu przepływ kodu autoryzacji z obsługą protokołu PKCE i MECHANIZMU CORS dla aplikacji korzystających z rejestracji (nadal musisz zaktualizować kod aplikacji, aby MSAL.js v2.x).

Wykonaj następujące kroki, aby uzyskać rejestracje aplikacji, które są obecnie skonfigurowane przy użyciu identyfikatorów URI przekierowania platformy sieci Web :

  1. Zaloguj się do centrum administracyjnego usługi Microsoft Entra.

  2. Przejdź do pozycji Aplikacje tożsamości>> Rejestracje aplikacji wybierz aplikację, a następnie pozycję Uwierzytelnianie.

  3. Na kafelku Platforma internetowa w obszarze Identyfikatory URI przekierowania wybierz baner ostrzegawczy wskazujący, że należy przeprowadzić migrację identyfikatorów URI.

    Implicit flow warning banner on web app tile in Azure portal

  4. Wybierz tylko te identyfikatory URI przekierowania, których aplikacje będą używać MSAL.js 2.x, a następnie wybierz pozycję Konfiguruj.

    Select redirect URI pane in SPA pane in Azure portal

Te identyfikatory URI przekierowania powinny być teraz wyświetlane na kafelku platformy aplikacji jednostronicowej, pokazujący, że mechanizm CORS obsługuje przepływ kodu autoryzacji i włączono funkcję PKCE dla tych identyfikatorów URI.

Single-page application tile in app registration in Azure portal

Możesz również utworzyć nową rejestrację aplikacji zamiast aktualizować identyfikatory URI przekierowania w istniejącej rejestracji.

Aktualizowanie kodu do MSAL.js 2.x

W formacie MSAL 1.x utworzono wystąpienie aplikacji, inicjując aplikację UserAgentApplication w następujący sposób:

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

const msalInstance = new msal.UserAgentApplication(config);

W formacie MSAL 2.x zainicjuj zamiast elementu [PublicClientApplication][msal-js-publicclientapplication]:

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

const msalInstance = new msal.PublicClientApplication(config);

Aby zapoznać się z pełnym przewodnikiem dodawania biblioteki MSAL 2.x do aplikacji, zobacz Samouczek: logowanie użytkowników i wywoływanie interfejsu API programu Microsoft Graph z jednostronicowej aplikacji JavaScript (SPA) przy użyciu przepływu kodu uwierzytelniania.

Aby uzyskać dodatkowe zmiany, konieczne może być wprowadzenie do kodu, zobacz przewodnik migracji w witrynie GitHub.

Wyłączanie niejawnych ustawień udzielania

Po zaktualizowaniu wszystkich aplikacji produkcyjnych korzystających z tej rejestracji aplikacji i jej identyfikatora klienta do biblioteki MSAL 2.x i przepływu kodu autoryzacji należy usunąć zaznaczenie niejawnych ustawień udzielania w menu Uwierzytelnianie rejestracji aplikacji.

Po usunięciu zaznaczenia niejawnych ustawień udzielania w rejestracji aplikacji niejawny przepływ jest wyłączony dla wszystkich aplikacji korzystających z rejestracji i identyfikatora klienta.

Nie wyłączaj niejawnego przepływu udzielania przed zaktualizowanym wszystkimi aplikacjami w celu MSAL.js 2.x i [PublicClientApplication][msal-js-publicclientapplication].

Następne kroki

  • Aby dowiedzieć się więcej na temat przepływu kodu autoryzacji, w tym różnic między przepływami kodu niejawnego i uwierzytelniania, zobacz przepływ kodu autoryzacji Platforma tożsamości Microsoft i OAuth 2.0.

  • Dowiedz się więcej, tworząc aplikację jednostronicową React (SPA), która loguje użytkowników w poniższej serii samouczków wieloczęściowych.