Udostępnij za pośrednictwem

Szybki start: logowanie się i uzyskiwanie tokenu dostępu w aplikacji React SPA przy użyciu przepływu kodu uwierzytelniania

  • Artykuł

Witamy! Prawdopodobnie nie jest to oczekiwana strona. Chociaż pracujemy nad poprawką, ten link powinien podjąć Cię do odpowiedniego artykułu:

Szybki start: logowanie użytkowników w aplikacjach jednostronicowych (SPA) za pośrednictwem przepływu kodu autoryzacji przy użyciu klucza dowodowego dla programu Code Exchange (PKCE) przy użyciu platformy React

Przepraszamy za niedogodności i doceniamy cierpliwość, podczas gdy pracujemy nad rozwiązaniem tego problemu.

W tym przewodniku Szybki start pobierzesz i uruchomisz przykładowy kod, który pokazuje, jak aplikacja jednostronicowa React w języku JavaScript (SPA) może logować użytkowników i wywoływać program Microsoft Graph przy użyciu przepływu kodu autoryzacji. Przykładowy kod przedstawia sposób uzyskiwania tokenu dostępu w celu wywołania interfejsu API programu Microsoft Graph lub dowolnego internetowego interfejsu API.

Zobacz jak działa przykład, aby zobaczyć ilustrację.

Wymagania wstępne

Krok 1. Konfigurowanie aplikacji w witrynie Azure Portal

Ten przykład kodu wymaga URI przekierowaniahttp://localhost:3000/.

Wprowadź te zmiany dla mnie

Już skonfigurowane Aplikacja jest skonfigurowana przy użyciu tych atrybutów.

Krok 2. Pobieranie projektu

Uruchamianie projektu z serwerem internetowym przy użyciu Node.js

Pobieranie przykładu kodu

Uwaga

Enter_the_Supported_Account_Info_Here

Krok 3. Aplikacja jest skonfigurowana i gotowa do uruchomienia

Skonfigurowaliśmy projekt przy użyciu wartości właściwości Twojej aplikacji.

Krok 4. Uruchamianie projektu

Uruchom projekt z serwerem internetowym przy użyciu Node.js:

  1. Aby uruchomić serwer, uruchom następujące polecenia z poziomu katalogu projektu:

    npm install
npm start

  2. Przejdź do http://localhost:3000/.

  3. Wybierz pozycję Zaloguj, aby rozpocząć proces logowania, a następnie wywołaj interfejs API programu Microsoft Graph.

    Przy pierwszym logowaniu zostanie wyświetlony monit o wyrażenie zgody na zezwolenie aplikacji na dostęp do profilu i zalogowanie się. Po pomyślnym zalogowaniu kliknij Żądaj informacji o profilu, aby wyświetlić informacje o profilu na stronie.

Więcej informacji

Jak działa przykład

Diagram przedstawiający przepływ kodu autoryzacji dla aplikacji jednostronicowej.

msal.js

Biblioteka MSAL.js loguje użytkowników i żąda tokenów używanych do uzyskiwania dostępu do interfejsu API chronionego przez Platforma tożsamości Microsoft.

Jeśli masz zainstalowane Node.js, możesz pobrać najnowszą wersję przy użyciu Node.js Menedżer pakietów (npm):

npm install @azure/msal-browser @azure/msal-react

Następne kroki

Aby uzyskać szczegółowy przewodnik krok po kroku dotyczący kompilowania aplikacji przepływu kodu uwierzytelniania przy użyciu platformy React, zobacz następujący samouczek:

Samouczek: jednostronicowa aplikacja React (SPA) - logowanie użytkowników