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

Dotyczy: Dzierżawcy siły roboczej Dzierżawcy zewnętrzni (dowiedz się więcej)

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
• Najemca siły roboczej. Możesz użyć katalogu domyślnego lub skonfigurować nowego najemcę .
• Visual Studio Code lub innego edytora kodu.

Węzeł

• Zarejestruj nową aplikację w centrum administracyjnym usługi Microsoft Entra, skonfigurowaną tylko dla kont w tym katalogu organizacyjnym. Aby uzyskać więcej informacji, zobacz Rejestrowanie aplikacji . Zapisz następujące wartości na stronie Przegląd aplikacji do późniejszego użycia:
  • Identyfikator aplikacji (klienta)
  • Identyfikator katalogu (klienta)
• Dodaj następujące adresy URI przekierowań przy użyciu konfiguracji platformy Web. Więcej informacji znajdziesz w Jak dodać adres URI przekierowania w aplikacji.
  • adres przekierowania URI: http://localhost:3000/auth/redirect
  • adres URL wylogowania front-channel : https://localhost:5001/signout-callback-oidc
• Dodaj sekret klienta do rejestracji aplikacji. Nie używaj tajnych danych klienta w aplikacjach przeznaczonych na produkcję. Zamiast tego użyj certyfikatów lub poświadczeń federacyjnych. Aby uzyskać więcej informacji, zobacz Dodawanie poświadczeń do aplikacji.
• Node.js

ASP.NET Rdzeń

• Zarejestruj nową aplikację w centrum administracyjnym usługi Microsoft Entra, skonfigurowaną tylko dla kont w tym katalogu organizacyjnym. Aby uzyskać więcej informacji, zobacz Rejestrowanie aplikacji . Zapisz następujące wartości na stronie Przegląd aplikacji do późniejszego użycia:
  • Identyfikator aplikacji (klienta)
  • Identyfikator katalogu (klienta)
• Dodaj następujące adresy URI przekierowań przy użyciu konfiguracji platformy Web. Więcej informacji znajdziesz w Jak dodać adres URI przekierowania w aplikacji.
  • adres przekierowania URI: https://localhost:5001/signin-oidc
  • adres URL wylogowania front-channel : https://localhost:5001/signout-callback-oidc
• Dodaj certyfikat z podpisem własnym do rejestracji aplikacji. Nie używaj certyfikatów z podpisem własnym w aplikacjach produkcyjnych. Zamiast tego użyj certyfikatu z zaufanego urzędu certyfikacji lub poświadczeń federacyjnych. Aby uzyskać więcej informacji, zobacz Dodawanie poświadczeń do aplikacji. Utwórz certyfikat przy użyciu następującego polecenia:

  dotnet dev-certs https -ep ./certificate.crt --trust
  

• Minimalnym wymogiem jest .NET 8.0 SDK

Python Flask

• Zarejestruj nową aplikację w centrum administracyjnym usługi Microsoft Entra, skonfigurowaną tylko dla kont w tym katalogu organizacyjnym. Aby uzyskać więcej informacji, zobacz Rejestrowanie aplikacji . Zapisz następujące wartości na stronie Przegląd aplikacji do późniejszego użycia:
  • Identyfikator aplikacji (klienta)
  • Identyfikator katalogu (klienta)
• Dodaj następujące adresy URI przekierowań przy użyciu konfiguracji platformy Web. Więcej informacji znajdziesz w Jak dodać adres URI przekierowania w aplikacji.
  • adres przekierowania URI: http://localhost:5000/getAToken
• python 3 +
• Dodaj sekret klienta do rejestracji aplikacji. Nie używaj tajnych danych klienta w aplikacjach przeznaczonych na produkcję. Zamiast tego użyj certyfikatów lub poświadczeń federacyjnych. Aby uzyskać więcej informacji, zobacz Dodawanie poświadczeń do aplikacji.

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.

Węzeł

• 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
  

ASP.NET Rdzeń

• 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-docs-code-dotnet.git
  

Python Flask

• Pobierz przykładowy kod języka Python 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-docs-code-python/

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ęzeł

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

ASP.NET Rdzeń

1. W środowisku IDE otwórz folder projektu, ms-identity-docs-code-dotnet\web-app-aspnet, zawierające przykład.

2. Otwórz appsettings.json i zastąp zawartość pliku następującym fragmentem kodu;

   {
   "AzureAd": {
     "Instance": "https://login.microsoftonline.com/",
     "TenantId": "Enter the tenant ID obtained from the Microsoft Entra admin center",
     "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
     "ClientCredentials": [
       {
         "SourceType": "StoreWithThumbprint",
         "CertificateStorePath": "CurrentUser/My",
         "CertificateThumbprint": "Enter the certificate thumbprint obtained the Microsoft Entra admin center"
       }   
     ],
     "CallbackPath": "/signin-oidc"
   },
     "DownstreamApis": {
       "MicrosoftGraph" :{
         "BaseUrl": "https://graph.microsoft.com/v1.0/",
         "RelativePath": "me",
         "Scopes": [ 
           "user.read" 
         ]
      }
     },
     "Logging": {
       "LogLevel": {
         "Default": "Information",
         "Microsoft.AspNetCore": "Warning"
       }
     },
     "AllowedHosts": "*"
   }
   

   • TenantId — identyfikator najemcy, w którym zarejestrowano aplikację. Zastąp tekst w cudzysłowie Directory (tenant) ID, który został wcześniej zapisany na stronie przeglądu zarejestrowanej aplikacji.
   • ClientId — identyfikator aplikacji, nazywany również klientem. Zastąp tekst w cudzysłowach wartością Application (client) ID zarejestrowaną wcześniej na stronie przeglądu zarejestrowanej aplikacji.
   • ClientCertificates — certyfikat z podpisem własnym jest używany do uwierzytelniania w aplikacji. Zastąp tekst CertificateThumbprint odciskiem palca certyfikatu, który został wcześniej zarejestrowany.

Python Flask

1. Otwórz aplikację pobraną w środowisku IDE i przejdź do folderu głównego przykładowej aplikacji.

   cd flask-web-app
   

2. Utwórz plik .env w folderze głównym projektu, używając .env.sample.entra-id jako wzorca.

   # The following variables are required for the app to run.
   CLIENT_ID=<Enter_your_client_id>
   CLIENT_SECRET=<Enter_your_client_secret>
   AUTHORITY=<Enter_your_authority_url>
   

   • Ustaw wartość CLIENT_ID na identyfikator aplikacji (klienta) dla zarejestrowanej aplikacji, który jest dostępny na stronie głównej.
   • Ustaw wartość CLIENT_SECRET na tajemnicę klienta utworzoną w Certyfikaty &, Sekrety, dla zarejestrowanej aplikacji.
   • Ustaw wartość AUTHORITY na wartość https://login.microsoftonline.com/<TENANT_GUID>. Identyfikator katalogu (dzierżawy) jest dostępny na stronie głównej rejestracji aplikacji.

   Zmienne środowiskowe są przywołyane w app_config.pyi są przechowywane w osobnym pliku .env, aby zachować je poza kontrolą źródła. Udostępniony plik .gitignore uniemożliwia zaewidencjonowanie pliku .env.

Uruchamianie i testowanie przykładowej aplikacji internetowej

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

Węzeł

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.

ASP.NET Rdzeń

1. W katalogu projektu użyj terminalu, aby wprowadzić następujące polecenia:

   cd ms-identity-docs-code-dotnet/web-app-aspnet
   dotnet run
   

2. Skopiuj adres URL https wyświetlany w terminalu, na przykład https://localhost:5001i wklej go w przeglądarce. Zalecamy używanie prywatnej lub incognito sesji przeglądarki.

3. Wykonaj kroki i wprowadź niezbędne szczegóły, aby zalogować się przy użyciu konta Microsoft. Poprosisz o podanie adresu e-mail, aby można było wysłać do Ciebie jednorazowy kod dostępu. Wprowadź kod po wyświetleniu monitu.

4. Aplikacja żąda uprawnień do utrzymania dostępu do danych, do których udzielono mu dostępu, oraz do zalogowania się i odczytania profilu. Wybierz pozycję Zaakceptuj. Zostanie wyświetlony poniższy zrzut ekranu. Oznacza to, że logujesz się do aplikacji i wyświetlasz szczegóły profilu z interfejsu API programu Microsoft Graph.

   

Wyloguj się z aplikacji

1. Znajdź link Wyloguj się w prawym górnym rogu strony i wybierz go.
2. Zostanie wyświetlony monit o wybranie konta do wylogowania. Wybierz konto użyte do zalogowania się.
3. Zostanie wyświetlony komunikat z informacją o wylogowaniach. Teraz możesz zamknąć okno przeglądarki.

Python Flask

1. Utwórz środowisko wirtualne dla aplikacji:

   • W przypadku Windowsuruchom następujące polecenia:

   py -m venv .venv
   .venv\scripts\activate
   

   • Uruchom następujące polecenia dla systemu macOS/Linux .

   python3 -m venv .venv
   source .venv/bin/activate
   

2. Zainstaluj wymagania przy użyciu pip:

   pip install -r requirements.txt
   

3. Uruchom aplikację z wiersza polecenia. Upewnij się, że aplikacja działa na tym samym porcie, co skonfigurowany wcześniej identyfikator URI przekierowania.

   flask run --debug --host=localhost --port=5000
   

4. Skopiuj adres URL https wyświetlany w terminalu, na przykład https://localhost:5000i wklej go w przeglądarce. Zalecamy używanie prywatnej lub incognito sesji przeglądarki.

5. Wykonaj kroki i wprowadź niezbędne szczegóły, aby zalogować się przy użyciu konta Microsoft. Użytkownik jest proszony o podanie adresu e-mail i hasła w celu zalogowania się.

6. Aplikacja żąda uprawnień do utrzymania dostępu do danych, do których zezwolisz na dostęp, oraz do zalogowania się, a następnie odczytania profilu, jak pokazano na zrzucie ekranu. Wybierz pozycję Zaakceptuj.

   

7. Zostanie wyświetlony poniższy zrzut ekranu, który wskazuje, że pomyślnie zalogowaliśmy się do aplikacji.

Jak działa aplikacja

Na poniższym diagramie pokazano, jak działa przykładowa aplikacja:

1. Aplikacja używa pakietu identity, aby uzyskać token dostępu z platformy tożsamości Microsoft. Ten pakiet jest oparty na bibliotece Microsoft Authentication Library (MSAL) dla języka Python w celu uproszczenia uwierzytelniania i autoryzacji w aplikacjach internetowych.

2. Token dostępu uzyskany w poprzednim kroku jest używany jako token uwierzytelniający do uwierzytelniania użytkownika podczas wywoływania interfejsu API Microsoft Graph.

Powiązana zawartość

Węzeł

• Dowiedz się, jak utworzyć aplikację internetową Node.js, która loguje użytkowników i wywołuje interfejs API programu Microsoft Graph w Samouczek: logowanie użytkowników i uzyskiwanie tokenu dla programu Microsoft Graph w aplikacji internetowej Node.js & Express.

ASP.NET Rdzeń

• Dowiedz się, jak zbudować tę aplikację internetową ASP.NET za pomocą samouczka serii : rejestrowanie aplikacji przy użyciu platformy tożsamości firmy Microsoft.
• Szybki start: ochrona internetowego interfejsu API platformy ASP.NET Core przy użyciu platformy tożsamości firmy Microsoft.
• Szybki start: wdrażanie aplikacji internetowej ASP.NET w usłudze Azure App Service

Python Flask

• Dowiedz się, jak zbudować aplikację internetową w Pythonie, która loguje użytkowników i wywołuje chronione API internetowe w Samouczek: aplikacja internetowa, która loguje użytkowników.

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

• 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
• Zewnętrzny dzierżawca. Aby go utworzyć, wybierz jedną z następujących metod:
  • Użyj rozszerzenia Microsoft Entra External ID , aby skonfigurować dzierżawcę zewnętrznego bezpośrednio w programie Visual Studio Code. (zalecane)
  • Utwórz nowego zewnętrznego dzierżawcę w centrum administracyjnym Microsoft Entra.
• Przepływ użytkownika. Aby uzyskać bardziej szczegółowe informacje, odnieś się do tworzenie przepływów użytkowników rejestracji samoobsługowej dla aplikacji w dzierżawach zewnętrznych. Ten przepływ użytkownika może być używany dla wielu aplikacji.
• Visual Studio Code lub innego edytora kodu.

Węzeł

• Zarejestruj nową aplikację w centrum administracyjnym usługi Microsoft Entra, skonfigurowaną tylko dla kont w tym katalogu organizacyjnym. Aby uzyskać więcej informacji, zobacz Rejestrowanie aplikacji . Zapisz następujące wartości na stronie Przegląd aplikacji do późniejszego użycia:
  • Identyfikator aplikacji (klienta)
  • Identyfikator katalogu (klienta)
• Dodaj następujące adresy URI przekierowań przy użyciu konfiguracji platformy Web. Więcej informacji znajdziesz w Jak dodać adres URI przekierowania w aplikacji.
  • adres przekierowania URI: http://localhost:3000/auth/redirect
  • adres URL wylogowania front-channel : https://localhost:5001/signout-callback-oidc
• Dodaj sekret klienta do rejestracji aplikacji. Nie używaj tajnych danych klienta w aplikacjach przeznaczonych na produkcję. Zamiast tego użyj certyfikatów lub poświadczeń federacyjnych. Aby uzyskać więcej informacji, zobacz Dodawanie poświadczeń do aplikacji.
• Dodaj swoją aplikację do przepływu użytkownika
• Node.js

ASP.NET Rdzeń

• Zarejestruj nową aplikację w centrum administracyjnym usługi Microsoft Entra, skonfigurowaną tylko dla kont w tym katalogu organizacyjnym. Aby uzyskać więcej informacji, zobacz Rejestrowanie aplikacji . Zapisz następujące wartości na stronie Przegląd aplikacji do późniejszego użycia:
  • Identyfikator aplikacji (klienta)
  • Identyfikator katalogu (klienta)
• Dodaj następujące adresy URI przekierowań przy użyciu konfiguracji platformy Web. Więcej informacji znajdziesz w Jak dodać adres URI przekierowania w aplikacji.
  • adres przekierowania URI: https://localhost:5001/signin-oidc
  • adres URL wylogowania front-channel : https://localhost:5001/signout-callback-oidc
• Dodaj sekret klienta do rejestracji aplikacji. Nie używaj tajnych danych klienta w aplikacjach przeznaczonych na produkcję. Zamiast tego użyj certyfikatów lub poświadczeń federacyjnych. Aby uzyskać więcej informacji, zobacz Dodawanie poświadczeń do aplikacji.
• Dodaj swoją aplikację do przepływu użytkownika
• Minimalna wersja zestawu SDK platformy .NET 8.0: .

python Django

• Zarejestruj nową aplikację w centrum administracyjnym usługi Microsoft Entra, skonfigurowaną tylko dla kont w tym katalogu organizacyjnym. Aby uzyskać więcej informacji, zobacz Rejestrowanie aplikacji . Zapisz następujące wartości na stronie Przegląd aplikacji do późniejszego użycia:
  • Identyfikator aplikacji (klienta)
  • Identyfikator katalogu (klienta)
• Dodaj następujące adresy URI przekierowań przy użyciu konfiguracji platformy Web. Więcej informacji znajdziesz w Jak dodać adres URI przekierowania w aplikacji.
  • adres przekierowania URI: http://localhost:5000/getAToken
• Dodaj swoją aplikację do przepływu użytkownika
• python 3 +
• Dodaj sekret klienta do rejestracji aplikacji. Nie używaj tajnych danych klienta w aplikacjach przeznaczonych na produkcję. Zamiast tego użyj certyfikatów lub poświadczeń federacyjnych. Aby uzyskać więcej informacji, zobacz Dodawanie poświadczeń do aplikacji.

Python Flask

• Zarejestruj nową aplikację w centrum administracyjnym usługi Microsoft Entra, skonfigurowaną tylko dla kont w tym katalogu organizacyjnym. Aby uzyskać więcej informacji, zobacz Rejestrowanie aplikacji . Zapisz następujące wartości na stronie Przegląd aplikacji do późniejszego użycia:
  • Identyfikator aplikacji (klienta)
  • Identyfikator katalogu (klienta)
• Dodaj następujące adresy URI przekierowań przy użyciu konfiguracji platformy Web. Więcej informacji znajdziesz w Jak dodać adres URI przekierowania w aplikacji.
  • adres przekierowania URI: http://localhost:5000/getAToken
• Dodaj swoją aplikację do przepływu użytkownika
• python 3 +
• Dodaj sekret klienta do rejestracji aplikacji. Nie używaj tajnych danych klienta w aplikacjach przeznaczonych na produkcję. Zamiast tego użyj certyfikatów lub poświadczeń federacyjnych. Aby uzyskać więcej informacji, zobacz Dodawanie poświadczeń do aplikacji.

Klonowanie lub pobieranie przykładowej aplikacji internetowej

Węzeł

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
   

ASP.NET Rdzeń

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-dotnet-tutorial.git
  

• pobierz plik .zip. Wyodrębnij go do ścieżki pliku, w której długość nazwy jest mniejsza niż 260 znaków.

python Django

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-docs-code-python.git
  

• pobierz plik .zip. Wyodrębnij go do ścieżki pliku, w której 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ę internetową platformy Flask:

   cd django-web-app
   

2. Konfigurowanie środowiska wirtualnego:

   • W przypadku Windowsuruchom następujące polecenia:

   py -m venv .venv
   .venv\scripts\activate
   

   • Uruchom następujące polecenia dla systemu macOS/Linux .

   python3 -m venv .venv
   source .venv/bin/activate
   

3. Aby zainstalować zależności aplikacji, uruchom następujące polecenia:

   python3 -m pip install -r requirements.txt
   

Python Flask

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-docs-code-python.git
  

• pobierz plik .zip. Wyodrębnij go do ścieżki pliku, w której 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ę internetową platformy Flask:

   cd flask-web-app
   

2. Konfigurowanie środowiska wirtualnego:

   • W przypadku Windowsuruchom następujące polecenia:

   py -m venv .venv
   .venv\scripts\activate
   

   • Uruchom następujące polecenia dla systemu macOS/Linux .

   python3 -m venv .venv
   source .venv/bin/activate
   

3. Aby zainstalować zależności aplikacji, uruchom następujące polecenia:

   python3 -m pip install -r requirements.txt
   

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ęzeł

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.

ASP.NET Rdzeń

1. Przejdź do katalogu głównego zawierającego przykładową aplikację platformy ASP.NET Core:

   cd 1-Authentication\1-sign-in-aspnet-core-mvc
   

2. Otwórz plik appsettings.json.

3. W Authorityznajdź Enter_the_Tenant_Subdomain_Here i zastąp go poddomeną najemcy. Jeśli na przykład główna domena najemcy to caseyjensen@onmicrosoft.com, wówczas wartość, którą należy wprowadzić, to casyjensen.

4. Znajdź wartość Enter_the_Application_Id_Here i zastąp ją identyfikatorem aplikacji (clientId) aplikacji zarejestrowanej w centrum administracyjnym firmy Microsoft Entra.

5. Zastąp Enter_the_Client_Secret_Here tajną wartością klienta, którą ustawiłeś.

python Django

1. Otwórz pliki projektu w programie Visual Studio Code lub edytorze, którego używasz.

2. Utwórz plik .env w folderze głównym projektu przy użyciu pliku .env.sample.external-id jako przewodnika.

3. W pliku .env podaj następujące zmienne środowiskowe:

   1. CLIENT_ID, który jest identyfikatorem aplikacji (klienta) zarejestrowanej wcześniej.
   2. CLIENT_SECRET, która jest wartością tajną aplikacji skopiowaną wcześniej.
   3. AUTHORITY to adres URL, który identyfikuje autorytet tokenu. Powinien on mieć format https://{poddomena}.ciamlogin.com/{poddomena}.onmicrosoft.com. Zastąp poddomenę poddomeną Directory (tenant). Jeśli na przykład domena podstawowa dzierżawy jest contoso.onmicrosoft.com, użyj contoso. Jeśli nie masz poddomeny dzierżawy, dowiedz się, jak sprawdzić szczegóły dzierżawy.
   4. REDIRECT_URI, który powinien przypominać wcześniej zarejestrowany identyfikator URI przekierowania, musi zgadzać się z konfiguracją.

Python Flask

1. Otwórz pliki projektu w programie Visual Studio Code lub edytorze, którego używasz.

2. Utwórz plik .env w folderze głównym projektu przy użyciu pliku .env.sample.external-id jako przewodnika.

3. W pliku .env podaj następujące zmienne środowiskowe:

   • CLIENT_ID, który jest identyfikatorem aplikacji (klienta) zarejestrowanej wcześniej.
   • CLIENT_SECRET, która jest wartością tajną aplikacji skopiowaną wcześniej.
   • AUTHORITY to adres URL, który identyfikuje autorytet tokenu. Powinien on mieć format https://{poddomena}.ciamlogin.com/{poddomena}.onmicrosoft.com. Zastąp poddomenę poddomeną Directory (tenant). Jeśli na przykład domena podstawowa dzierżawy jest contoso.onmicrosoft.com, użyj contoso. Jeśli nie masz poddomeny dzierżawy, dowiedz się, jak sprawdzić szczegóły dzierżawy.

4. Upewnij się, że URI przekierowania jest prawidłowo skonfigurowany. Identyfikator URI przekierowania, który zarejestrowałeś wcześniej, powinien być zgodny z konfiguracją. Domyślnie ten przykład ustawia ścieżkę przekierowania URI na /getAToken. Ta konfiguracja znajduje się w pliku app_config.py jako REDIRECT_PATH.

Uruchamianie i testowanie przykładowej aplikacji internetowej

Węzeł

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:

   

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.

   

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.

ASP.NET Rdzeń

1. W terminalu wykonaj następujące polecenia:

   dotnet run
   

2. Otwórz przeglądarkę internetową i przejdź do https://localhost:7274.

3. Zaloguj się, używając konta zarejestrowanego u zewnętrznego najemcy.

4. Po zalogowaniu nazwa użytkownika jest wyświetlana obok przycisku Wyloguj się, jak pokazano na poniższym zrzucie ekranu.

   

5. Aby wylogować się z aplikacji, wybierz przycisk Wyloguj się.

python Django

Uruchom aplikację, aby zobaczyć działanie procesu logowania.

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

   python manage.py runserver localhost:5000                                             
   

   Możesz użyć wybranego numeru portu.

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

   

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

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, przejdziesz przez przepływ rejestracji. Wypełnij swój adres e-mail, jednorazowy kod dostępu, nowe hasło i więcej szczegółów konta, aby ukończyć cały przepływ rejestracji.

6. Po zalogowaniu się lub utworzeniu konta nastąpi przekierowanie z powrotem do aplikacji internetowej. Zostanie wyświetlona strona podobna do poniższego zrzutu ekranu:

   

7. Wybierz pozycję Wyloguj, aby wylogować użytkownika z aplikacji internetowej lub wybierz pozycję Wywołaj podrzędny interfejs API, aby wykonać wywołanie punktu końcowego programu Microsoft Graph.

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. Następnie użytkownik loguje się lub rejestruje na wyświetlonej stronie. Po podaniu wymaganych poświadczeń i wyrażaniu zgody na wymagane zakresy identyfikator zewnętrzny firmy Microsoft przekierowuje użytkownika z powrotem do aplikacji internetowej za pomocą kodu autoryzacji. Następnie aplikacja internetowa używa tego kodu autoryzacji do uzyskania tokenu z zewnętrznego identyfikatora firmy Microsoft Entra.

Gdy użytkownicy wybierają link Wyloguj się, aplikacja czyści swoją sesję i przekierowuje użytkownika do punktu końcowego wylogowania zewnętrznego identyfikatora Microsoft Entra, aby powiadomić o wylogowaniu użytkownika. Następnie użytkownik jest przekierowywany z powrotem do aplikacji internetowej.

Python Flask

Uruchom aplikację, aby zobaczyć działanie procesu logowania.

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

   python3 -m flask run --debug --host=localhost --port=3000
   

   Możesz użyć wybranego portu. To powinno być podobne do portu, którego użyłeś przy rejestracji identyfikatora URI przekierowania.

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

   

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

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, przejdziesz przez proces rejestracji. Wypełnij swój adres e-mail, jednorazowy kod dostępu, nowe hasło i więcej szczegółów konta, aby ukończyć cały przepływ rejestracji.

6. Po zalogowaniu się lub utworzeniu konta nastąpi przekierowanie z powrotem do aplikacji internetowej. Zostanie wyświetlona strona podobna do poniższego zrzutu ekranu:

   

7. Wybierz pozycję Wyloguj, aby wylogować użytkownika z aplikacji internetowej lub wybierz pozycję Wywołaj podrzędny interfejs API, aby wykonać wywołanie punktu końcowego programu Microsoft Graph.

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. Następnie użytkownik loguje się lub rejestruje na wyświetlonej stronie. Po podaniu wymaganych poświadczeń i wyrażaniu zgody na wymagane zakresy identyfikator zewnętrzny firmy Microsoft przekierowuje użytkownika z powrotem do aplikacji internetowej za pomocą kodu autoryzacji. Następnie aplikacja internetowa używa tego kodu autoryzacji do uzyskania tokenu z zewnętrznego identyfikatora firmy Microsoft Entra.

Gdy użytkownicy wybierają link Wyloguj się, aplikacja czyści swoją sesję i przekierowuje użytkownika do punktu końcowego wylogowania zewnętrznego identyfikatora Microsoft Entra, aby powiadomić o wylogowaniu użytkownika. Następnie użytkownik jest przekierowywany z powrotem do aplikacji internetowej.

Powiązana zawartość

Węzeł

• Logowanie użytkowników w aplikacji internetowej Node.js
• Szybki start — logowanie użytkowników i wywoływanie internetowego interfejsu API w przykładowej aplikacji internetowej Node.js
• szybki start — edytowanie profilu w przykładowej aplikacji internetowej Node.js

ASP.NET Rdzeń

• Użyj naszej wieloczęściowej serii samouczków, aby utworzyć tę aplikację internetową ASP.NET od podstaw
• Włączanie resetowania haseł
• Dostosowywanie domyślnego znakowania

python Django

• Zaloguj użytkowników za pomocą przykładowej aplikacji webowej Flask
• Włączanie resetowania haseł
• Dostosowywanie domyślnego znakowania

Python Flask

• Włączanie resetowania haseł
• Dostosowywanie domyślnego znakowania