Szybki start: logowanie użytkowników i uzyskiwanie tokenu dostępu w spa w języku JavaScript przy użyciu przepływu kodu uwierzytelniania za pomocą protokołu PKCE

  • 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 języka JavaScript

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 jednostronicowa aplikacja JavaScript (SPA) może logować użytkowników i wywoływać program Microsoft Graph przy użyciu przepływu kodu autoryzacji z kluczem weryfikacji dla wymiany kodu (PKCE). 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 zapoznać się z ilustracją.

Wymagania wstępne

Krok 1. Konfigurowanie aplikacji w witrynie Azure Portal

Aby przykładowy kod w tym przewodniku Szybki start działał, dodaj identyfikator URI przekierowania .http://localhost:3000/

Wprowadź zmiany automatycznie

Already configured 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 aplikacji.

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 informacje o profilu użytkownika są wyświetlane na stronie.

Więcej informacji

Jak działa przykład

Diagram showing the authorization code flow for a single-page application.

MSAL.js

Biblioteka MSAL.js loguje użytkowników i żąda tokenów używanych do uzyskiwania dostępu do interfejsu API chronionego przez platformę tożsamości firmy Microsoft > . Plik index.html przykładu zawiera odwołanie do biblioteki:

<script type="text/javascript" src="https://alcdn.msauth.net/browser/2.0.0-beta.0/js/msal-browser.js" integrity=
"sha384-r7Qxfs6PYHyfoBR6zG62DGzptfLBxnREThAlcJyEfzJ4dq5rqExc1Xj3TPFE/9TH" crossorigin="anonymous"></script>

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

Następne kroki

Aby uzyskać bardziej szczegółowy przewodnik krok po kroku dotyczący kompilowania aplikacji używanej w tym przewodniku Szybki start, zobacz następujący samouczek:

Samouczek dotyczący logowania się i wywoływania programu MS Graph