Udostępnij za pośrednictwem

Szybki start: logowanie użytkowników w przykładowej aplikacji internetowej

  • Artykuł

W tym szybkim starcie użyjesz przykładowej aplikacji internetowej, aby pokazać, jak zalogować użytkowników i wykonywać wywołania do interfejsu API Microsoft Graph w dzierżawie Twojej organizacji. Przykładowa aplikacja używa biblioteki Microsoft Authentication Library do obsługi uwierzytelniania.

Przed rozpoczęciem użyj narzędzia wyboru Wybierz typ najemcy w górnej części tej strony, aby wybrać typ najemcy. Microsoft Entra ID zapewnia dwie konfiguracje dzierżawy, dla pracowników i dla użytkowników zewnętrznych. Konfiguracja działań pracowniczych dotyczy pracowników, aplikacji wewnętrznych i innych zasobów organizacji. Zewnętrzny najemca jest przeznaczony do aplikacji skierowanych do klientów.

Warunki wstępne

  • Konto platformy Azure z aktywną subskrypcją. Jeśli jeszcze go nie masz, Utwórz konto bezpłatnie.
  • To konto platformy Azure musi mieć uprawnienia do zarządzania aplikacjami. Każda z następujących ról firmy Microsoft Entra obejmuje wymagane uprawnienia:
    • Administrator aplikacji
    • Deweloper aplikacji
    • Administrator aplikacji w chmurze
  • Najemca siły roboczej. Możesz użyć katalogu domyślnego lub skonfigurować nowego najemcę .
  • Visual Studio Code lub innego edytora kodu.
  • Zarejestruj nową aplikację w centrum administracyjnym Microsoft Entra przy użyciu następującej konfiguracji. Aby uzyskać więcej informacji, zobacz Rejestrowanie aplikacji.
    • Nazwa: identity-client-web-app
    • Obsługiwane typy kont: Konta w tym katalogu organizacyjnym (Jedna dzierżawa)
    • Konfiguracja platformy: Sieć Web
    • adres przekierowania URI: http://localhost:3000/auth/redirect
    • adres URL wylogowania front-channel : https://localhost:5001/signout-callback-oidc
  • Node.js

Dodawanie klucza tajnego lub certyfikatu klienta aplikacji

Utwórz klucz tajny klienta dla zarejestrowanej aplikacji. Aplikacja wykorzystuje tajny klucz klienta, aby potwierdzić swoją tożsamość, gdy żąda tokenów.

  1. Na stronie Rejestracje aplikacji wybierz utworzoną aplikację (taką jak klient tajny aplikacji webowej), aby otworzyć stronę Przegląd.
  2. W obszarze Zarządzajwybierz Certyfikaty & sekrety>Tajne klienta>Nowy sekret klienta.
  3. W polu Opis wprowadź opis tajnego klucza klienta (na przykład tajny klucz klienta aplikacji internetowej).
  4. W obszarze Wygasawybierz okres, przez który sekret jest ważny (zgodnie z zasadami bezpieczeństwa Twojej organizacji), a następnie wybierz opcję Dodaj.
  5. Zarejestruj wartość sekretu. Ta wartość jest używana do konfiguracji w późniejszym kroku. Wartość tajna nie zostanie ponownie wyświetlona i nie będzie można jej odzyskać w żaden sposób po opuszczeniu sekcji Certyfikaty i tajne wartości. Upewnij się, że został on zarejestrowany.

Podczas tworzenia poświadczeń dla poufnej aplikacji klienckiej:

  • Firma Microsoft zaleca użycie certyfikatu zamiast klucza tajnego klienta przed przeniesieniem aplikacji do środowiska produkcyjnego. Aby uzyskać więcej informacji na temat używania certyfikatu, zapoznaj się z instrukcjami dotyczącymi poświadczeń certyfikatów uwierzytelniania aplikacji na platformie tożsamości Microsoft, które znajdziesz w sekcji .

  • Na potrzeby testowania możesz utworzyć certyfikat z podpisem własnym i skonfigurować aplikacje do uwierzytelniania przy użyciu niego. Jednak w produkcjinależy zakupić certyfikat podpisany przez dobrze znany urząd certyfikacji, a następnie użyć usługi Azure Key Vault do zarządzania dostępem do certyfikatu i czasem ważności.

Klonowanie lub pobieranie przykładowej aplikacji internetowej

Aby uzyskać przykładową aplikację, możesz ją sklonować z usługi GitHub lub pobrać jako plik .zip.

  • Pobierz plik .zip, a następnie wyodrębnij go do ścieżki pliku, w której długość nazwy jest mniejsza niż 260 znaków lub sklonuj repozytorium:

  • Aby sklonować przykład, otwórz wiersz polecenia i przejdź do miejsca, w którym chcesz utworzyć projekt, a następnie wprowadź następujące polecenie:

    git clone https://github.com/Azure-Samples/ms-identity-node.git

Konfigurowanie przykładowej aplikacji internetowej

Aby zalogować użytkowników przy użyciu przykładowej aplikacji, musisz zaktualizować ją, wprowadzając szczegóły swojej aplikacji i dzierżawy.

W folderze ms-identity-node otwórz plik App/.env, a następnie zastąp następujące symbole zastępcze:

Zmienna Opis Przykłady
Enter_the_Cloud_Instance_Id_Here Instancja chmury Azure, w której zarejestrowano aplikację https://login.microsoftonline.com/ (włączając ukośnik końcowy)
Enter_the_Tenant_Info_here Identyfikator dzierżawy lub domena podstawowa contoso.microsoft.com lub aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here Identyfikator klienta zarejestrowanej aplikacji 00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Client_Secret_Here Tajny klucz klienta aplikacji, którą zarejestrowałeś A1b-C2d_E3f.H4i,J5k?L6m!N7o-P8q_R9s.T0u
Enter_the_Graph_Endpoint_Here Wystąpienie usługi chmurowej API Microsoft Graph, które jest wywoływane przez Twoją aplikację. https://graph.microsoft.com/ (włączając ukośnik końcowy)
Enter_the_Express_Session_Secret_Here Losowy ciąg znaków używany do podpisywania ciasteczka sesji Express A1b-C2d_E3f.H4...

Po wprowadzeniu zmian plik powinien wyglądać podobnie do poniższego fragmentu kodu:

CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=aaaabbbb-0000-cccc-1111-dddd2222eeee
CLIENT_ID=00001111-aaaa-2222-bbbb-3333cccc4444
CLIENT_SECRET=A1b-C2d_E3f.H4...

REDIRECT_URI=http://localhost:3000/auth/redirect
POST_LOGOUT_REDIRECT_URI=http://localhost:3000

GRAPH_API_ENDPOINT=https://graph.microsoft.com/

EXPRESS_SESSION_SECRET=6DP6v09eLiW7f1E65B8k

Uruchamianie i testowanie przykładowej aplikacji internetowej

Skonfigurowano przykładową aplikację. Możesz kontynuować uruchamianie i testowanie.

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

    cd App
npm install
npm start

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

  3. Wybierz pozycję Zaloguj się, aby rozpocząć proces logowania.

Przy pierwszym logowaniu zostanie wyświetlony monit o wyrażenie zgody, aby zezwolić aplikacji na logowanie się i uzyskiwanie dostępu do profilu. Po pomyślnym zalogowaniu nastąpi przekierowanie z powrotem do strony głównej aplikacji.

Jak działa aplikacja

Przykład hostuje serwer internetowy na hoście lokalnym, porcie 3000. Gdy przeglądarka internetowa uzyskuje dostęp do tego adresu, aplikacja renderuje stronę główną. Gdy użytkownik wybierze pozycję Zaloguj się, aplikacja przekierowuje przeglądarkę do ekranu logowania Microsoft Entra za pośrednictwem adresu URL wygenerowanego przez bibliotekę MSAL Node. Gdy użytkownik wyrazi zgodę, przeglądarka przekierowuje użytkownika z powrotem na stronę główną aplikacji wraz z identyfikatorem i tokenem dostępu.

Powiązana zawartość

W tym szybkim starcie użyjesz przykładowej aplikacji internetowej, aby pokazać, jak zalogować użytkowników w zewnętrznym kliencie. Przykładowa aplikacja używa biblioteki Microsoft Authentication Library do obsługi uwierzytelniania.

Przed rozpoczęciem użyj narzędzia wyboru Wybierz typ najemcy w górnej części tej strony, aby wybrać typ najemcy. Microsoft Entra ID zapewnia dwie konfiguracje dzierżawy, dla pracowników i dla użytkowników zewnętrznych. Konfiguracja działań pracowniczych dotyczy pracowników, aplikacji wewnętrznych i innych zasobów organizacji. Zewnętrzny najemca jest przeznaczony do aplikacji skierowanych do klientów.

Warunki wstępne

  • Zarejestruj nową aplikację w centrum administracyjnym Microsoft Entra, korzystając z następującej konfiguracji, i zanotuj jej identyfikatory ze strony Przegląd aplikacji. Aby uzyskać więcej informacji, zobacz Rejestrowanie aplikacji.
    • Nazwa: identity-client-web-app
    • Obsługiwane typy kont: Konta w tym katalogu organizacyjnym (Jedna dzierżawa)
    • Konfiguracja platformy: Sieć Web
    • adres przekierowania URI: http://localhost:3000/auth/redirect
  • Dodaj swoją aplikację do przepływu użytkownika
  • Node.js.

Dodaj tajny klucz klienta aplikacji

Utwórz klucz tajny klienta dla zarejestrowanej aplikacji. Aplikacja wykorzystuje tajny klucz klienta, aby potwierdzić swoją tożsamość, gdy żąda tokenów.

  1. Na stronie Rejestracje aplikacji wybierz utworzoną aplikację (taką jak klient tajny aplikacji webowej), aby otworzyć stronę Przegląd.
  2. W obszarze Zarządzajwybierz Certyfikaty & sekrety>Tajne klienta>Nowy sekret klienta.
  3. W polu Opis wprowadź opis tajnego klucza klienta (na przykład tajny klucz klienta aplikacji internetowej).
  4. W obszarze Wygasawybierz okres, przez który sekret jest ważny (zgodnie z zasadami bezpieczeństwa Twojej organizacji), a następnie wybierz opcję Dodaj.
  5. Zarejestruj wartość sekretu. Ta wartość jest używana do konfiguracji w późniejszym kroku. Wartość tajna nie zostanie ponownie wyświetlona i nie można jej odzyskać w żaden sposób po przejściu z Certyfikaty i sekrety. Upewnij się, że został on zarejestrowany.

Podczas tworzenia poświadczeń dla poufnej aplikacji klienckiej:

  • Firma Microsoft zaleca użycie certyfikatu zamiast klucza tajnego klienta przed przeniesieniem aplikacji do środowiska produkcyjnego. Aby uzyskać więcej informacji na temat używania certyfikatu, zapoznaj się z instrukcjami dotyczącymi poświadczeń certyfikatów uwierzytelniania aplikacji na platformie tożsamości Microsoft, które znajdziesz w sekcji .

  • Na potrzeby testowania możesz utworzyć certyfikat z podpisem własnym i skonfigurować aplikacje do uwierzytelniania przy użyciu niego. Jednak w produkcjinależy zakupić certyfikat podpisany przez dobrze znany urząd certyfikacji, a następnie użyć usługi Azure Key Vault do zarządzania dostępem do certyfikatu i czasem ważności.

Po zarejestrowaniu aplikacji zostanie przypisane uprawnienie User.Read. Jednak ponieważ najemca jest najemcą zewnętrznym, użytkownicy-klienci sami nie mogą wyrazić zgody na to uprawnienie. Ty jako administrator dzierżawy musisz wyrazić zgodę na to uprawnienie w imieniu wszystkich użytkowników w dzierżawie.

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

  2. W obszarze Zarządzaj, wybierz uprawnienia API.

    1. Wybierz pozycję Udziel zgody administratora dla <nazwy dzierżawy>, a następnie wybierz pozycję Tak.
    2. Wybierz Odśwież, a następnie sprawdź, czy pod Stan dla uprawnienia pojawia się Udzielono dla <nazwy twojej dzierżawy>.

Klonowanie lub pobieranie przykładowej aplikacji internetowej

Aby uzyskać przykładową aplikację, możesz ją sklonować z usługi GitHub lub pobrać jako plik .zip:

  • Aby sklonować przykład, otwórz wiersz polecenia i przejdź do miejsca, w którym chcesz utworzyć projekt, a następnie wprowadź następujące polecenie:

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

  • Alternatywnie pobierz przykładowy plik .zip, a następnie wyodrębnij go do ścieżki pliku, tam, gdzie długość nazwy jest mniejsza niż 260 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

Konfigurowanie przykładowej aplikacji internetowej

Aby zalogować użytkowników przy użyciu przykładowej aplikacji, musisz zaktualizować ją, wprowadzając szczegóły swojej aplikacji i dzierżawy.

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

  2. Znajdź symbol zastępczy:

    • Enter_the_Application_Id_Here i zastąp go identyfikatorem aplikacji (klienta) zarejestrowanej wcześniej.
    • Enter_the_Tenant_Subdomain_Here i zastąp ją poddomeną Katalog (dzierżawa). Jeśli na przykład domena podstawowa dzierżawy jest contoso.onmicrosoft.com, użyj contoso. Jeśli nie masz nazwy najemcy, dowiedz się, jak odczytywać szczegóły dzierżawy.
    • Enter_the_Client_Secret_Here i zastąp ją wartością sekretną aplikacji, którą skopiowałeś wcześniej.

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 http://localhost:3000. Powinna zostać wyświetlona strona podobna do poniższego zrzutu ekranu:

    Zrzut ekranu przedstawiający logowanie się do aplikacji internetowej węzła.

  3. Po zakończeniu ładowania strony wybierz pozycję Zaloguj się, gdy pojawi się monit.

  4. Na stronie logowania wpisz adres e-mail , wybierz pozycję Dalej, wpisz hasło , a następnie wybierz pozycję Zaloguj się. 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.

    Zrzut ekranu przedstawiający roszczenia dotyczące tokenu identyfikacyjnego.

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

Jak to działa

Gdy użytkownicy wybierają link Zaloguj się, aplikacja inicjuje żądanie uwierzytelniania i przekierowuje użytkowników do zewnętrznego identyfikatora firmy Microsoft Entra. Na stronie logowania lub rejestracji, która się pojawi, gdy użytkownik pomyślnie się zaloguje lub utworzy konto, Microsoft Entra External ID zwraca token identyfikatora do aplikacji. Aplikacja weryfikuje token identyfikatora, odczytuje oświadczenia i zwraca bezpieczną stronę do użytkowników.

Po wybraniu linku Wyloguj się aplikacja wyczyści sesję, a następnie przekierowuje użytkownika do punktu końcowego wylogowania Microsoft Entra External ID, aby powiadomić go, że użytkownik się wylogował.

Jeśli chcesz utworzyć aplikację podobną do przykładu, który uruchomiłeś, wykonaj kroki opisane w artykule Logowanie użytkowników we własnej aplikacji internetowej Node.js.

Powiązana zawartość