Logowanie użytkowników w przykładowej aplikacji internetowej Node.js

W tym przewodniku z instrukcjami przedstawiono sposób dodawania uwierzytelniania do aplikacji internetowej przy użyciu przykładowej aplikacji internetowej Node.js. Przykładowa aplikacja umożliwia użytkownikom logowanie się i wylogowywanie. Przykładowa aplikacja internetowa używa biblioteki Microsoft Authentication Library for Node (MSAL Node) dla środowiska Node do obsługi uwierzytelniania.

W tym artykule wykonasz następujące zadania:

• Zarejestruj aplikację internetową w centrum administracyjnym Microsoft Entra.

• Utwórz przepływ logowania i wylogowania użytkownika w centrum administracyjnym Microsoft Entra.

• Skojarz aplikację internetową z przepływem użytkownika.

• Zaktualizuj przykładową aplikację internetową Node.js przy użyciu własnego identyfikatora Microsoft Entra dla szczegółów dzierżawy klientów.

• Uruchom i przetestuj przykładową aplikację internetową.

Wymagania wstępne

• Node.js.

• Visual Studio Code lub inny edytor kodu.

• Microsoft Entra identyfikator dzierżawy klientów. Jeśli jeszcze go nie masz, utwórz konto bezpłatnej wersji próbnej.

Rejestrowanie aplikacji internetowej

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 nazywany identyfikatorem aplikacji (klienta), wartością używaną 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 dewelopera 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ź dosekcji Aplikacje>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. Zarejestruj identyfikator aplikacji (klienta), który ma być używany 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ę Sieć Web .
3. W polu Identyfikatory URI przekierowania wprowadź http://localhost:3000/auth/redirect
4. Wybierz pozycję Konfiguruj , aby zapisać zmiany.
5. Na stronie Konfiguracje platformy w obszarze Sieć Web wybierz pozycję Dodaj identyfikator URI, a następnie wprowadź http://localhost:3000/
6. Wybierz pozycję Zapisz , aby zapisać zmiany, i upewnij się, że oba identyfikatory URI są wyświetlane na liście.

Dodawanie wpisu tajnego klienta aplikacji

Utwórz klucz tajny klienta dla zarejestrowanej aplikacji. Aplikacja używa klucza tajnego klienta, aby udowodnić swoją tożsamość, gdy żąda tokenów.

1. Na stronie Rejestracje aplikacji wybierz utworzoną aplikację (na przykład ciam-client-app), aby otworzyć stronę Przegląd.
2. W obszarze Zarządzanie wybierz pozycję Certyfikaty & tajne.
3. Wybierz pozycję Nowy klucz tajny klienta.
4. W polu Opis wprowadź opis wpisu tajnego klienta (na przykład wpis tajny klienta aplikacji ciam).
5. W obszarze Wygasa wybierz czas trwania, dla którego wpis tajny jest prawidłowy (zgodnie z regułami zabezpieczeń organizacji), a następnie wybierz pozycję Dodaj.
6. Zarejestruj wartość wpisu tajnego. Ta wartość zostanie użyta do konfiguracji w późniejszym kroku.

Uwaga

Wartość wpisu tajnego nie będzie ponownie wyświetlana i nie jest pobierana w żaden sposób, po przejściu z dala od strony Certyfikaty i wpisy tajne , dlatego upewnij się, że je rejestrujesz.
W przypadku zwiększonych zabezpieczeń rozważ użycie certyfikatów zamiast wpisów tajnych klienta.

Udzielanie uprawnień interfejsu API

Ponieważ ta aplikacja loguje użytkowników, dodaj delegowane uprawnienia:

1. Na stronie Rejestracje aplikacji wybierz utworzoną aplikację (na przykład 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 obszarze Wybierz uprawnienia wyszukaj i wybierz zarówno uprawnienia openid , jak 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 nazwa <>dzierżawy jest wyświetlana w obszarze Stan dla obu zakresów.

Tworzenie przepływu użytkownika

Wykonaj następujące kroki, aby utworzyć przepływ użytkownika, za pomocą której klient może zalogować się lub zarejestrować aplikację.

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 Identity External IdentityiesUser flows (Przepływy> użytkownikatoż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 swojego adresu e-mail.

      Uwaga

      Dodatkowi dostawcy tożsamości będą wyświetlani w tym miejscu tylko po skonfigurowaniu federacji z nimi. Jeśli na przykład skonfigurujesz federację z google lub Facebookiem, 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 przy użyciu hasła: umożliwia nowym użytkownikom rejestrowanie się i logowanie przy użyciu adresu e-mail jako nazwy logowania i hasła jako poświadczenia pierwszego czynnika.

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

        Uwaga

        Email jednorazowy kod dostępu musi być włączony na poziomie dzierżawy (Wszyscy dostawcy> tożsamości Email jednorazowego kodu 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 aplikacji internetowej z przepływem użytkownika

Chociaż wiele aplikacji może być skojarzonych z przepływem użytkownika, pojedyncza aplikacja może być skojarzona tylko z jednym przepływem użytkownika. 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 rejestracji 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 pozycję 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ładowej aplikacji internetowej

Aby uzyskać przykładowy kod aplikacji internetowej, możesz wykonać jedno z następujących zadań:

• Pobierz plik .zip lub sklonuj przykładową aplikację internetową z usługi GitHub, uruchamiając następujące polecenie:

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

Jeśli zdecydujesz się pobrać plik .zip , 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 konsoli i przejdź do katalogu zawierającego przykładową aplikację Node.js:

       cd 1-Authentication\5-sign-in-express\App
   

2. Uruchom następujące polecenia, aby zainstalować zależności aplikacji:

       npm install && npm update
   

Konfigurowanie przykładowej aplikacji internetowej

1. W edytorze kodu otwórz plik App\authConfig.js .

2. Znajdź symbol zastępczy:

   1. Enter_the_Application_Id_Here i zastąp ją identyfikatorem aplikacji (klienta) zarejestrowanej wcześniej aplikacji.

   2. Enter_the_Tenant_Subdomain_Here i zastąp ją poddomeną Directory (tenant). Jeśli na przykład domena podstawowa dzierżawy to contoso.onmicrosoft.com, użyj polecenia contoso. Jeśli nie masz nazwy dzierżawy, dowiedz się, jak odczytywać szczegóły dzierżawy.

   3. Enter_the_Client_Secret_Here i zastąp ją skopiowaną wcześniej wartością wpisu tajnego aplikacji.

Uruchamianie i testowanie przykładowej aplikacji internetowej

Teraz możesz przetestować przykładową aplikację internetową Node.js. Musisz uruchomić serwer Node.js i uzyskać do niego dostęp za pośrednictwem przeglądarki pod adresem http://localhost:3000.

1. W terminalu uruchom następujące polecenie:

       npm start 
   

2. Otwórz przeglądarkę, a następnie przejdź do strony http://localhost:3000. Powinna zostać wyświetlona strona podobna do poniższego zrzutu ekranu:

   

3. Po zakończeniu ładowania strony wybierz pozycję Zaloguj się . Zostanie wyświetlony monit o zalogowanie się.

4. Na stronie logowania wpisz adres Email, wybierz pozycję Dalej, wpisz hasło, a następnie wybierz pozycję Zaloguj. Jeśli nie masz konta, wybierz pozycję Nie masz konta? Utwórz jeden link, który uruchamia przepływ rejestracji.

5. Jeśli wybierzesz opcję rejestracji, po wypełnieniu adresu e-mail, jednorazowego kodu dostępu, nowego hasła i dodatkowych szczegółów konta, ukończ cały przepływ rejestracji. Zostanie wyświetlona strona podobna do poniższego zrzutu ekranu. Po wybraniu opcji logowania zostanie wyświetlona podobna strona.

   

6. Wybierz pozycję Wyloguj, aby wylogować użytkownika z aplikacji internetowej, lub wybierz pozycję Wyświetl oświadczenia tokenu identyfikatora, aby wyświetlić oświadczenia tokenu identyfikatora zwrócone przez Microsoft Entra.

Jak to działa

Po wybraniu linku Zaloguj aplikacja inicjuje żądanie uwierzytelniania i przekierowuje użytkowników do Microsoft Entra identyfikatora dla klientów. Na wyświetlonej stronie logowania lub rejestracji po pomyślnym zalogowaniu się użytkownika lub utworzeniu konta Microsoft Entra identyfikatora dla klientów zwraca token identyfikatora do aplikacji. Aplikacja weryfikuje token identyfikatora, odczytuje oświadczenia i zwraca bezpieczną stronę do użytkowników.

Gdy użytkownicy wybiorą link Wyloguj, aplikacja wyczyści jej sesję, przekierowuje użytkownika do Microsoft Entra identyfikatora dla punktu końcowego wylogowania klientów, aby powiadomić go o wylogowaniu użytkownika.

Jeśli chcesz utworzyć aplikację podobną do przykładowej, którą uruchomiono, wykonaj kroki opisane w artykule Logowanie użytkowników we własnym Node.js aplikacji internetowej .

Następne kroki

Możesz chcieć:

• Włączanie resetowania hasła

• Dostosowywanie domyślnego znakowania

• Konfigurowanie logowania przy użyciu usługi Google

• Logowanie użytkowników w aplikacji internetowej Node.js