Logowanie użytkowników w przykładowej aplikacji jednostronicowej języka JavaScript

W tym przewodniku z instrukcjami użyto przykładowej aplikacji jednostronicowej JavaScript (SPA), aby zademonstrować sposób dodawania uwierzytelniania do SPA. SPA umożliwia użytkownikom logowanie się i wylogowywanie przy użyciu własnego identyfikatora Microsoft Entra dla dzierżawy klientów. W przykładzie użyto biblioteki Microsoft Authentication Library for JavaScript (MSAL.js) do obsługi uwierzytelniania.

Wymagania wstępne

• Mimo że można używać dowolnego środowiska IDE obsługującego aplikacje vanilla JS, Visual Studio Code jest zalecane w tym przewodniku. Można go pobrać ze strony Pliki do pobrania .
• Node.js.
• Microsoft Entra identyfikator dzierżawy klientów. Jeśli jeszcze go nie masz, utwórz konto bezpłatnej wersji próbnej.

Rejestrowanie SPA w centrum administracyjnym Microsoft Entra

Aby umożliwić aplikacji logowanie użytkowników przy użyciu Microsoft Entra, Microsoft Entra identyfikator dla klientów musi być świadomy tworzonej aplikacji. Rejestracja aplikacji ustanawia relację zaufania między aplikacją a Microsoft Entra. Podczas rejestrowania aplikacji identyfikator zewnętrzny generuje unikatowy identyfikator znany jako identyfikator aplikacji (klienta) — wartość używana do identyfikowania aplikacji podczas tworzenia żądań uwierzytelniania.

W poniższych krokach pokazano, jak zarejestrować aplikację w centrum administracyjnym Microsoft Entra:

1. Zaloguj się do centrum administracyjnego Microsoft Entra co najmniej jako deweloper aplikacji.

2. Jeśli masz dostęp do wielu dzierżaw, użyj filtru Katalogi i subskrypcje w górnym menu, aby przełączyć się do dzierżawy klienta.

3. Przejdź do aplikacji tożsamości>>Rejestracje aplikacji.

4. Wybierz pozycję + Nowa rejestracja.

5. Na wyświetlonej stronie Rejestrowanie aplikacji ;

   1. Wprowadź zrozumiałą nazwę aplikacji wyświetlaną dla użytkowników aplikacji, na przykład ciam-client-app.
   2. W obszarze Obsługiwane typy kont wybierz pozycję Konta tylko w tym katalogu organizacyjnym.

6. Wybierz pozycję Zarejestruj.

7. Po pomyślnej rejestracji zostanie wyświetlone okienko Przegląd aplikacji. Zapisz identyfikator aplikacji (klienta) do użycia w kodzie źródłowym aplikacji.

Aby określić typ aplikacji do rejestracji aplikacji, wykonaj następujące kroki:

1. W obszarze Zarządzanie wybierz pozycję Uwierzytelnianie.
2. Na stronie Konfiguracje platformy wybierz pozycję Dodaj platformę, a następnie wybierz opcję SPA .
3. W polu Identyfikatory URI przekierowania wprowadź http://localhost:3000/redirect
4. Wybierz pozycję Konfiguruj , aby zapisać zmiany.
5. Po powrocie na stronę Konfiguracje platformy w nowej aplikacji jednostronicowej , która została wyświetlona, wybierz pozycję Dodaj identyfikator URI, a następnie wprowadź http://localhost:3000/
6. Wybierz pozycję Zapisz , aby zapisać zmiany, i upewnij się, że są wyświetlane oba identyfikatory URI.

Udzielanie uprawnień interfejsu API

1. Na stronie Rejestracje aplikacji wybierz utworzoną aplikację (np. ciam-client-app), aby otworzyć stronę Przegląd.

2. W obszarze Zarządzanie wybierz pozycję Uprawnienia interfejsu API.

3. W obszarze Skonfigurowane uprawnienia wybierz pozycję Dodaj uprawnienie.

4. Wybierz kartę Interfejsy API firmy Microsoft .

5. W sekcji Często używane interfejsy API firmy Microsoft wybierz pozycję Microsoft Graph.

6. Wybierz opcję Uprawnienia delegowane .

7. W sekcji Wybieranie uprawnień wyszukaj i wybierz uprawnienia openid i offline_access .

8. Wybierz przycisk Dodaj uprawnienia .

9. W tym momencie uprawnienia zostały przypisane poprawnie. Jednak ponieważ dzierżawa jest dzierżawą klienta, użytkownicy konsumentów sami nie mogą wyrazić zgody na te uprawnienia. Użytkownik jako administrator musi wyrazić zgodę na te uprawnienia w imieniu wszystkich użytkowników w dzierżawie:

   1. Wybierz pozycję Udziel zgody administratora dla <swojej nazwy> dzierżawy, a następnie wybierz pozycję Tak.
   2. Wybierz pozycję Odśwież, a następnie sprawdź, czy w obszarze Stan dla obu zakresów jest wyświetlana wartość Udzielono dla <nazwy> dzierżawy.

Tworzenie przepływu użytkownika

Wykonaj następujące kroki, aby utworzyć przepływ użytkownika, który klient może użyć do zalogowania się lub zarejestrowania aplikacji.

1. Zaloguj się do centrum administracyjnego Microsoft Entra jako co najmniej administrator przepływu użytkownika identyfikatora zewnętrznego.

2. Jeśli masz dostęp do wielu dzierżaw, użyj filtru Katalogi i subskrypcje w górnym menu, aby przełączyć się do dzierżawy klienta.

3. Przejdź do sekcji IdentityExternal IdentitiesUser flows (Przepływy> użytkownika tożsamości zewnętrznych tożsamości>).

4. Wybierz pozycję + Nowy przepływ użytkownika.

5. Na stronie Tworzenie :

   1. Wprowadź nazwę przepływu użytkownika, na przykład SignInSignUpSample.

   2. Na liście Dostawcy tożsamości wybierz pozycję Email Konta. Ten dostawca tożsamości umożliwia użytkownikom logowanie się lub rejestrowanie przy użyciu ich adresu e-mail.

      Uwaga

      Dodatkowi dostawcy tożsamości będą wyświetlani w tym miejscu dopiero po skonfigurowaniu federacji z nimi. Jeśli na przykład skonfigurujesz federację z usługą Google lub Facebook, będzie można wybrać tych dodatkowych dostawców tożsamości tutaj.

   3. W obszarze Email kont możesz wybrać jedną z dwóch opcji. Na potrzeby tego samouczka wybierz pozycję Email z hasłem.

      • Email z hasłem: umożliwia nowym użytkownikom zarejestrowanie się i zalogowanie się przy użyciu adresu e-mail jako nazwy logowania i hasła jako pierwszego poświadczenia czynnika.

      • Email jednorazowego kodu dostępu: umożliwia nowym użytkownikom rejestrację i logowanie się przy użyciu adresu e-mail jako nazwy logowania i jednorazowego kodu dostępu jako pierwszego poświadczenia czynnika.

        Uwaga

        Email jednorazowy kod dostępu musi być włączony na poziomie dzierżawy (Wszyscy dostawcy> tożsamości Email jednorazowy kod dostępu), aby ta opcja została udostępniona na poziomie przepływu użytkownika.

   4. W obszarze Atrybuty użytkownika wybierz atrybuty, które chcesz zebrać od użytkownika podczas rejestracji. Wybierając pozycję Pokaż więcej, możesz wybrać atrybuty i oświadczenia dla kraju/regionu, nazwy wyświetlanej i kodu pocztowego. Wybierz przycisk OK. (Użytkownicy są monitowani tylko o atrybuty podczas rejestracji po raz pierwszy).

6. Wybierz przycisk Utwórz. Nowy przepływ użytkownika zostanie wyświetlony na liście Przepływy użytkownika . W razie potrzeby odśwież stronę.

Aby włączyć samoobsługowe resetowanie hasła, wykonaj kroki opisane w artykule Włączanie samoobsługowego resetowania hasła .

Kojarzenie SPA z przepływem użytkownika

Chociaż wiele aplikacji może być skojarzonych z przepływem użytkownika, z jednym przepływem użytkownika może być skojarzona tylko jedna aplikacja. Przepływ użytkownika umożliwia konfigurację środowiska użytkownika dla określonych aplikacji. Można na przykład skonfigurować przepływ użytkownika, który wymaga od użytkowników logowania się lub tworzenia konta przy użyciu numeru telefonu lub adresu e-mail.

1. W menu paska bocznego wybierz pozycję Tożsamość.

2. Wybierz pozycję Tożsamości zewnętrzne, a następnie przepływy użytkownika.

3. Na stronie Przepływy użytkownika wybierz utworzoną wcześniej nazwę przepływu użytkownika , na przykład SignInSignUpSample.

4. W obszarze Użyj wybierz pozycję Aplikacje.

5. Wybierz pozycję Dodaj aplikację.

6. Wybierz aplikację z listy, taką jak ciam-client-app , lub użyj pola wyszukiwania, aby znaleźć aplikację, a następnie wybierz ją.

7. Wybierz pozycję Wybierz.

Klonowanie lub pobieranie przykładowego SPA

Aby uzyskać przykład spa, można wybrać jedną z następujących opcji:

• Sklonuj repozytorium przy użyciu narzędzia Git:

      git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
  

• Pobieranie przykładu

Jeśli zdecydujesz się pobrać .zip plik, wyodrębnij przykładowy plik aplikacji do folderu, w którym całkowita długość ścieżki wynosi 260 lub mniej znaków.

Instalowanie zależności projektu

1. Otwórz okno terminalu w katalogu głównym przykładowego projektu i wprowadź następujący fragment kodu, aby przejść do folderu projektu:

       cd 1-Authentication\0-sign-in-vanillajs\App
   

2. Zainstaluj zależności projektu:

       npm install
   

Konfigurowanie przykładowego SPA

1. Otwórz plik authConfig.js.
2. Znajdź Enter_the_Tenant_Name_Here i zastąp ją nazwą dzierżawy.
3. W obszarze Urząd znajdź Enter_the_Tenant_Subdomain_Here i zastąp ją poddomeną dzierżawy. Jeśli na przykład domena podstawowa dzierżawy to caseyjensen@onmicrosoft.com, należy wprowadzić wartość casyjensen.
4. Zapisz plik.

Uruchamianie projektu i logowanie

1. Otwórz nowy terminal i uruchom następujące polecenie, aby uruchomić ekspresowy serwer internetowy.

   npm start
   

2. Otwórz przeglądarkę internetową i przejdź pod adres http://localhost:3000/.

3. Zaloguj się przy użyciu konta zarejestrowanego w dzierżawie klienta.

4. Po zalogowaniu się w nazwie wyświetlanej obok przycisku Wyloguj się , jak pokazano na poniższym zrzucie ekranu.

5. SPA będzie teraz wyświetlać przycisk z informacją Zażądaj informacji o profilu. Wybierz je, aby wyświetlić dane profilu.

   

Wyloguj się z aplikacji

1. Aby wylogować się z aplikacji, wybierz pozycję Wyloguj się na pasku nawigacyjnym.
2. Zostanie wyświetlone okno z prośbą o wylogowanie się z konta.
3. Po pomyślnym wylogowaniu zostanie wyświetlone ostatnie okno z informacją o zamknięciu wszystkich okien przeglądarki.

Następne kroki

Włączanie samoobsługowego resetowania hasła