Szybki start: logowanie użytkowników w aplikacjach jednostronicowych w języku JavaScript - Microsoft identity platform

Artykuł
04/09/2024

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. Przykładowy kod pokazuje również, jak uzyskać token 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

Napiwek

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

Konto platformy Azure z aktywną subskrypcją. Utwórz konto bezpłatnie.
Node.js
Visual Studio Code (aby edytować pliki projektu)

Rejestrowanie i pobieranie aplikacji Szybki start

Aby uruchomić aplikację Szybki start, użyj jednej z następujących opcji.

Opcja 1 (Express): zarejestruj i automatycznie skonfiguruj aplikację, a następnie pobierz przykładowy kod

Zaloguj się do witryny Azure Portal — Rejestracje aplikacji środowisko Szybki start.
Wprowadź nazwę aplikacji.
W obszarze Obsługiwane typy kont wybierz pozycję Konta w dowolnym katalogu organizacyjnym i konta osobiste Microsoft.
Wybierz pozycję Zarejestruj.
Postępuj zgodnie z instrukcjami, aby pobrać i automatycznie skonfigurować nową aplikację.

Opcja 2 (ręczna): zarejestruj i ręcznie skonfiguruj aplikację i przykładowy kod

Krok 1. Rejestrowanie aplikacji

Zaloguj się w witrynie Azure Portal.
Jeśli masz dostęp do wielu dzierżaw, użyj ikony Ustawienia w górnym menu, aby wybrać dzierżawę, w której chcesz zarejestrować aplikację.
Wyszukaj i wybierz pozycję Tożsamość.
W obszarze Zarządzanie wybierz pozycję Rejestracje aplikacji> Nowa rejestracja.
Wprowadź nazwę aplikacji. Użytkownicy aplikacji mogą zobaczyć tę nazwę i możesz ją zmienić później.
W obszarze Obsługiwane typy kont wybierz pozycję Konta w dowolnym katalogu organizacyjnym i konta osobiste Microsoft.
Wybierz pozycję Zarejestruj. Na stronie Przegląd aplikacji zanotuj wartość Identyfikator aplikacji (klienta) do późniejszego użycia.
Ten przewodnik Szybki start wymaga włączenia przepływu niejawnego udzielenia. W obszarze Zarządzanie wybierz pozycję Uwierzytelnianie.
W obszarze Konfiguracje platformy>Dodaj platformę. Wybierz pozycję Sieć.
Ustaw wartość identyfikatora URI przekierowania na http://localhost:3000/.
Wybierz pozycję Tokeny dostępu i tokeny identyfikatorów w obszarze Niejawne udzielanie i przepływy hybrydowe.
Wybierz Konfiguruj.

Krok 1. Konfigurowanie aplikacji w witrynie Azure Portal

Aby przykładowy kod w tym przewodniku Szybki start działał, dodaj identyfikator URIhttp://localhost:3000/ przekierowania i włącz udzielanie niejawne.

Wprowadź zmiany automatycznie

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

Krok 2. Pobieranie projektu

Aby uruchomić projekt z serwerem internetowym przy użyciu Node.js, pobierz podstawowe pliki projektu.

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

Pobieranie przykładu kodu

Krok 3. Konfigurowanie aplikacji JavaScript

W folderze JavaScriptSPA zmodyfikuj authorityclientIDauthConfig.js i ustaw wartości i redirectUri w obszarze .msalConfig


 // Config object to be passed to Msal on creation
 const msalConfig = {
   auth: {
     clientId: "Enter_the_Application_Id_Here",
     authority: "Enter_the_Cloud_Instance_Id_Here/Enter_the_Tenant_Info_Here",
     redirectUri: "Enter_the_Redirect_Uri_Here",
   },
   cache: {
     cacheLocation: "sessionStorage", // This configures where your cache will be stored
     storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
   }
 };

Uwaga

Enter_the_Supported_Account_Info_Here

Gdzie:

Enter_the_Application_Id_Hereto identyfikator aplikacji (klienta) zarejestrowanej aplikacji.

Aby znaleźć wartość identyfikatora aplikacji (klienta), przejdź do strony Przegląd aplikacji w witrynie Azure Portal.
Enter_the_Cloud_Instance_Id_Here jest wystąpieniem chmury platformy Azure. W przypadku głównej lub globalnej chmury platformy Azure po prostu wprowadź wartość https://login.microsoftonline.com/. Aby zapoznać się z chmurami krajowymi (na przykład Chinami), zobacz Chmury narodowe.
Enter_the_Tenant_info_here jest ustawiona na jedną z następujących opcji:
- Jeśli aplikacja obsługuje konta w tym katalogu organizacyjnym, zastąp tę wartość identyfikatoremdzierżawy lub nazwą dzierżawy (na przykład contoso.microsoft.com).
Aby znaleźć wartość identyfikatora katalogu (dzierżawy), przejdź do strony Przegląd rejestracji aplikacji w witrynie Azure Portal.
- Jeśli aplikacja obsługuje konta w dowolnym katalogu organizacyjnym, zastąp tę wartość wartością organizations.
- Jeśli aplikacja obsługuje konta w dowolnym katalogu organizacyjnym i osobistych kontach Microsoft, zastąp tę wartość wartością common. Aby ograniczyć obsługę tylko do osobistych kont Microsoft, zastąp tę wartość wartością consumers.
Aby znaleźć wartość Obsługiwanych typów kont, przejdź do strony Przegląd rejestracji aplikacji w witrynie Azure Portal.
Parametr Enter_the_Redirect_Uri_Here ma wartość http://localhost:3000/.

Krok 3. Aplikacja jest skonfigurowana i gotowa do uruchomienia

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

Następnie w tym samym folderze edytuj plik graphConfig.js, aby ustawić graphMeEndpoint obiekt i graphMeEndpointapiConfig.

  // Add here the endpoints for MS Graph API services you would like to use.
  const graphConfig = {
    graphMeEndpoint: "Enter_the_Graph_Endpoint_Here/v1.0/me",
    graphMailEndpoint: "Enter_the_Graph_Endpoint_Here/v1.0/me/messages"
  };

  // Add here scopes for access token to be used at MS Graph API endpoints.
  const tokenRequest = {
      scopes: ["Mail.Read"]
  };

Gdzie:

<> Enter_the_Graph_Endpoint_Here jest punktem końcowym, względem którego będą wykonywane wywołania interfejsu API. W przypadku głównej lub globalnej usługi interfejsu API programu Microsoft Graph wystarczy wprowadzić wartość https://graph.microsoft.com/. Aby uzyskać więcej informacji, zobacz Wdrażanie chmury krajowej

Krok 4. Uruchamianie projektu

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

Aby uruchomić serwer, uruchom następujące polecenie z katalogu projektu:
```
npm install
npm start
```
Otwórz przeglądarkę internetową i przejdź do http://localhost:3000/witryny .
Wybierz pozycję Zaloguj się , aby rozpocząć logowanie, a następnie wywołaj interfejs API programu Microsoft Graph.

Po załadowaniu aplikacji w przeglądarce wybierz pozycję Zaloguj. Po pierwszym zalogowaniu 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 powinny być wyświetlane na stronie.

Więcej informacji

Jak działa przykład

Jak działa przykładowy SPA JavaScript: 1. SPA inicjuje logowanie. 2. SPA uzyskuje token identyfikatora z Platforma tożsamości Microsoft. 3. SPA wywołuje uzyskiwanie tokenu. 4. Platforma tożsamości Microsoft zwraca token dostępu do SPA. 5. SPA wysyła i HTTP GET żądanie z tokenem dostępu do interfejsu MICROSOFT Graph API. 6. Interfejs API programu Graph zwraca odpowiedź HTTP do SPA.

msal.js

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

<script type="text/javascript" src="https://alcdn.msftauth.net/lib/1.2.1/js/msal.js" integrity="sha384-9TV1245fz+BaI+VvCjMYL0YDMElLBwNS84v3mY57pXNOt6xcUYch2QLImaTahcOP" crossorigin="anonymous"></script>

Poprzednią wersję można zastąpić najnowszą wersją wydaną w MSAL.js wydaniach.

Alternatywnie, jeśli masz zainstalowane Node.js, możesz pobrać najnowszą wersję za pośrednictwem Node.js Menedżer pakietów (npm):

npm install msal

Inicjowanie biblioteki MSAL

Kod szybkiego startu pokazuje również, jak zainicjować bibliotekę MSAL:

  // Config object to be passed to Msal on creation
  const msalConfig = {
    auth: {
      clientId: "00001111-aaaa-2222-bbbb-3333cccc4444", // this is a fake id
      authority: "https://login.microsoftonline.com/common",
      redirectUri: "http://localhost:3000/",
    },
    cache: {
      cacheLocation: "sessionStorage", // This configures where your cache will be stored
      storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    }
  };

const myMSALObj = new Msal.UserAgentApplication(msalConfig);

Gdzie	opis
`clientId`	Identyfikator aplikacji zarejestrowanej w witrynie Azure Portal.
`authority`	(Opcjonalnie) Adres URL urzędu, który obsługuje typy kont zgodnie z opisem wcześniej w sekcji konfiguracji. Domyślnym urzędem jest `https://login.microsoftonline.com/common`.
`redirectUri`	Skonfigurowany identyfikator reply/redirectUri rejestracji aplikacji. W tym przypadku . `http://localhost:3000/`
`cacheLocation`	(Opcjonalnie) Ustawia magazyn przeglądarki dla stanu uwierzytelniania. Wartość domyślna to sessionStorage.
`storeAuthStateInCookie`	(Opcjonalnie) Biblioteka przechowującą stan żądania uwierzytelniania wymagany do weryfikacji przepływów uwierzytelniania w plikach cookie przeglądarki. Ten plik cookie jest ustawiany dla przeglądarek IE i Edge w celu wyeliminowania niektórych znanych problemów.

Aby uzyskać więcej informacji na temat dostępnych opcji konfigurowalnych, zobacz Inicjowanie aplikacji klienckich.

Poniższy fragment kodu pokazuje, jak logować użytkowników:

// Add scopes for the id token to be used at Microsoft identity platform endpoints.
const loginRequest = {
    scopes: ["openid", "profile", "User.Read"],
};

myMSALObj.loginPopup(loginRequest)
    .then((loginResponse) => {
    //Login Success callback code here
}).catch(function (error) {
    console.log(error);
});

Gdzie	opis
`scopes`	(Opcjonalnie) Zawiera zakresy, które są żądane w celu uzyskania zgody użytkownika w czasie logowania. Na przykład `[ "user.read" ]` w przypadku programu Microsoft Graph lub `[ "<Application ID URL>/scope" ]` niestandardowych internetowych interfejsów API (czyli `api://<Application ID>/access_as_user`).

Alternatywnie możesz użyć loginRedirect metody , aby przekierować bieżącą stronę do strony logowania zamiast okna podręcznego.

Żądanie tokenów

Biblioteka MSAL używa trzech metod do uzyskiwania tokenów: acquireTokenRedirect, acquireTokenPopupi acquireTokenSilent

Dyskretne pobieranie tokenu użytkownika

Metoda acquireTokenSilent obsługuje uzyskiwanie i odnawianie tokenów bez żadnej interakcji z użytkownikiem. Po wykonaniu metody loginRedirect lub loginPopup po raz pierwszy często stosuje się metodę acquireTokenSilent do uzyskiwania tokenów, które są używane w celu uzyskiwania dostępu do chronionych zasobów w kolejnych wywołaniach. Wywołania żądania lub odnowienia tokenów są wykonywane dyskretnie.


const tokenRequest = {
    scopes: ["Mail.Read"]
};

myMSALObj.acquireTokenSilent(tokenRequest)
    .then((tokenResponse) => {
        // Callback code here
        console.log(tokenResponse.accessToken);
    }).catch((error) => {
        console.log(error);
    });

Gdzie	opis
`scopes`	Zawiera zakresy żądane na potrzeby zwracania w tokenie dostępu dla interfejsu API. Na przykład `[ "mail.read" ]` w przypadku programu Microsoft Graph lub `[ "<Application ID URL>/scope" ]` niestandardowych internetowych interfejsów API (czyli `api://<Application ID>/access_as_user`).

Interaktywne pobieranie tokenu użytkownika

Istnieją sytuacje, w których zmuszasz użytkowników do interakcji z Platforma tożsamości Microsoft. Na przykład:

Użytkownicy mogą wymagać ponownego przesyłania poświadczeń, ponieważ hasło wygasło.
Aplikacja żąda dostępu do dodatkowych zakresów zasobów, do których użytkownik musi wyrazić zgodę.
Wymagane jest uwierzytelnianie dwuskładnikowe.

Zwykle zalecanym wzorcem dla większości aplikacji jest wywołanie acquireTokenSilent najpierw, a następnie przechwycenie wyjątku, a następnie wywołanie acquireTokenPopup (lub acquireTokenRedirect) w celu uruchomienia interakcyjnego żądania.

Wywoływanie acquireTokenPopup wyników w oknie podręcznym na potrzeby logowania. (Lub acquireTokenRedirect powoduje przekierowanie użytkowników do Platforma tożsamości Microsoft). W tym oknie użytkownicy muszą wchodzić w interakcje, potwierdzając swoje poświadczenia, wyrażając zgodę na wymagany zasób lub kończąc uwierzytelnianie dwuskładnikowe.

// Add here scopes for access token to be used at MS Graph API endpoints.
const tokenRequest = {
    scopes: ["Mail.Read"]
};

myMSALObj.acquireTokenPopup(requestObj)
    .then((tokenResponse) => {
        // Callback code here
        console.log(tokenResponse.accessToken);
    }).catch((error) => {
        console.log(error);
    });