Rychlý start: Přihlášení uživatelů do ukázkové webové aplikace

platí pro: zaměstnanečtí nájemníci externí nájemníci (další informace)

V tomto úvodu použijete ukázkovou webovou aplikaci, abyste se naučili, jak přihlásit uživatele a použít rozhraní Microsoft Graph API ve vašem podnikovém tenantovi. Ukázková aplikace používá knihovnu Microsoft Authentication Library ke zpracování autentizace.

Než začnete, pomocí výběru Zvolte typ nájemce v horní části této stránky vyberte typ nájemce. Microsoft Entra ID poskytuje dvě konfigurace tenantů, zaměstnanců a externí. Konfigurace tenanta pracovních sil je určená pro zaměstnance, interní aplikace a další organizační prostředky. Externí tenant je určený pro vaše aplikace určené pro zákazníky.

Požadavky

• Účet Azure s aktivním předplatným. Pokud ho ještě nemáte, Vytvořte účet zdarma.
• Tento účet Azure musí mít oprávnění ke správě aplikací. Kterákoli z následujících rolí Microsoft Entra zahrnuje potřebná oprávnění:
  • Správce aplikace
  • Vývojář aplikací
• Tenant pracovní síly. Můžete použít výchozí adresář nebo nastavit nového nájemníka.
• Visual Studio Code nebo jiného editoru kódu.

uzel

• Zaregistrujte novou aplikaci v Centru pro správu Microsoft Entra, která je nakonfigurovaná jenom pro účty v tomto organizačním adresáři. Další podrobnosti najdete v tématu Registrace aplikace . Na stránce Přehled aplikace si poznamenejte následující hodnoty pro pozdější použití:
  • ID aplikace (klienta)
  • ID adresáře (klienta)
• Přidejte následující identifikátory URI přesměrování pomocí konfigurace webové platformy. Další podrobnosti najdete v tématu Jak přidat přesměrovací URI do vaší aplikace.
  • Přesměrování URI:
  • URL odhlášení předního kanálu: https://localhost:5001/signout-callback-oidc
• Přidejte do registrace aplikace tajný klíč klienta. Nepoužívejte tajné kódy klienta v produkčních aplikacích. Místo toho použijte certifikáty nebo federované přihlašovací údaje. Další informace najdete v tématu přidání přihlašovacích údajů do aplikace.
• Node.js

ASP.NET Core

• Zaregistrujte novou aplikaci v Centru pro správu Microsoft Entra, která je nakonfigurovaná jenom pro účty v tomto organizačním adresáři. Další podrobnosti najdete v tématu Registrace aplikace . Na stránce Přehled aplikace si poznamenejte následující hodnoty pro pozdější použití:
  • ID aplikace (klienta)
  • ID adresáře (klienta)
• Přidejte následující identifikátory URI přesměrování pomocí konfigurace webové platformy. Další podrobnosti najdete v tématu Jak přidat přesměrovací URI do vaší aplikace.
  • Přesměrování URI:
  • URL odhlášení předního kanálu: https://localhost:5001/signout-callback-oidc
• Přidejte do registrace aplikace certifikát podepsaný svým držitelem. Nepoužívejte certifikáty podepsané svým držitelem v produkčních aplikacích. Místo toho použijte certifikát od důvěryhodné certifikační autority nebo federovaných přihlašovacích údajů. Další informace najdete v tématu přidání přihlašovacích údajů do aplikace. Vytvořte certifikát pomocí následujícího příkazu:

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

• Minimální požadavek sady SDK .NET 8.0

Python Flask

• Zaregistrujte novou aplikaci v Centru pro správu Microsoft Entra, která je nakonfigurovaná jenom pro účty v tomto organizačním adresáři. Další podrobnosti najdete v tématu Registrace aplikace . Na stránce Přehled aplikace si poznamenejte následující hodnoty pro pozdější použití:
  • ID aplikace (klienta)
  • ID adresáře (klienta)
• Přidejte následující identifikátory URI přesměrování pomocí konfigurace webové platformy. Další podrobnosti najdete v tématu Jak přidat přesměrovací URI do vaší aplikace.
  • Přesměrování URI:
• Python 3 +
• Přidejte do registrace aplikace tajný klíč klienta. Nepoužívejte tajné kódy klienta v produkčních aplikacích. Místo toho použijte certifikáty nebo federované přihlašovací údaje. Další informace najdete v tématu přidání přihlašovacích údajů do aplikace.

Klonování nebo stažení ukázkové webové aplikace

Pokud chcete získat ukázkovou aplikaci, můžete ji buď naklonovat z GitHubu, nebo si ji stáhnout jako soubor .zip.

uzel

• stáhněte soubor .zip, a pak ho extrahujte do cesty k souboru, kde délka názvu je menší než 260 znaků, nebo naklonujte úložiště:

• Pokud chcete ukázku naklonovat, otevřete příkazový řádek a přejděte do umístění, kam chcete projekt vytvořit, a zadejte následující příkaz:

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

ASP.NET Core

• stáhněte soubor .zip, a pak ho extrahujte do cesty k souboru, kde délka názvu je menší než 260 znaků, nebo naklonujte úložiště:

• Pokud chcete ukázku naklonovat, otevřete příkazový řádek a přejděte do umístění, kam chcete projekt vytvořit, a zadejte následující příkaz:

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-dotnet.git
  

Python Flask

• Stáhněte si vzorový kód Pythonu a pak ho extrahujte do cesty k souboru, kde délka názvu je menší než 260 znaků, nebo klonujte úložiště:

• Pokud chcete ukázku naklonovat, otevřete příkazový řádek a přejděte do umístění, kam chcete projekt vytvořit, a zadejte následující příkaz:

git clone https://github.com/Azure-Samples/ms-identity-docs-code-python/

Konfigurace ukázkové webové aplikace

Abyste mohli přihlásit uživatele pomocí ukázkové aplikace, musíte ji aktualizovat pomocí podrobností o aplikaci a tenantovi:

uzel

Ve složce ms-identity-node otevřete soubor App/.env a nahraďte následující zástupné symboly:

Proměnná	Popis	Příklady
Enter_the_Cloud_Instance_Id_Here	Cloudová instance Azure, ve které je vaše aplikace zaregistrovaná	https://login.microsoftonline.com/ (včetně koncového lomítka)
Enter_the_Tenant_Info_here	ID tenanta nebo primární doména	contoso.microsoft.com nebo aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here	ID klienta aplikace, kterou jste zaregistrovali	00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Client_Secret_Here	Tajný klíč klienta aplikace, kterou jste zaregistrovali	A1b-C2d_E3f.H4i,J5k?L6m!N7o-P8q_R9s.T0u
Enter_the_Graph_Endpoint_Here	Cloudová instance rozhraní Microsoft Graph API, kterou vaše aplikace volá	https://graph.microsoft.com/ (včetně koncového lomítka)
Enter_the_Express_Session_Secret_Here	Náhodný řetězec znaků pro podepsání cookie relace Express	A1b-C2d_E3f.H4...

Po provedení změn by měl soubor vypadat podobně jako následující fragment kódu:

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 Core

1. V integrovaném vývojovém prostředí otevřete složku projektu ms-identity-docs-code-dotnet\web-app-aspnetobsahující ukázku.

2. Otevřete appsettings.json a nahraďte obsah souboru následujícím fragmentem kódu;

   {
   "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 – identifikátor tenanta, ve kterém je aplikace zaregistrovaná. Nahraďte text v uvozovkách Directory (tenant) ID, který byl zaznamenán dříve ze stránky přehledu registrované aplikace.
   • ClientId – identifikátor aplikace, označovaný také jako klient. Nahraďte text v uvozovkách hodnotou Application (client) ID, která byla zaznamenána dříve ze stránky přehledu registrované aplikace.
   • ClientCertificates – Certifikát podepsaný svým držitelem se používá k ověřování v aplikaci. Nahraďte text CertificateThumbprint kryptografickým otiskem certifikátu, který byl dříve zaznamenán.

Python Flask

1. Otevřete aplikaci, kterou jste stáhli v integrovaném vývojovém prostředí , a přejděte do kořenové složky ukázkové aplikace.

   cd flask-web-app
   

2. Vytvořte soubor .env v kořenové složce projektu pomocí .env.sample.entra-id jako podklad.

   # 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>
   

   • Nastavte hodnotu CLIENT_ID na ID aplikace (klienta) pro zaregistrovanou aplikaci, která je k dispozici na přehledové stránce.
   • Nastavte hodnotu CLIENT_SECRET na tajný klíč klienta, který jste vytvořili v Certifikáty & tajných kódů pro zaregistrovanou aplikaci.
   • Nastavte hodnotu AUTHORITY na https://login.microsoftonline.com/<TENANT_GUID>. ID adresáře (tenanta) je k dispozici na stránce s přehledem registrace aplikace.

   Proměnné prostředí jsou odkazovány v app_config.pya jsou uloženy v samostatném souboru .env, aby nebyly součástí správy zdrojového kódu. Zadaný soubor .gitignore zabraňuje tomu, aby byl soubor .env nahrán do úložiště.

Spuštění a testování ukázkové webové aplikace

Nakonfigurovali jste ukázkovou aplikaci. Můžete pokračovat spuštěním a otestováním.

uzel

1. Pokud chcete spustit server, spusťte v adresáři projektu následující příkazy:

   cd App
   npm install
   npm start
   

2. Přejděte na http://localhost:3000/.

3. Vyberte Přihlásit se pro zahájení procesu přihlášení.

Při prvním přihlášení se zobrazí výzva k zadání souhlasu, abyste aplikaci povolili přihlášení a přístup k vašemu profilu. Po úspěšném přihlášení budete přesměrováni zpět na domovskou stránku aplikace.

Jak aplikace funguje

Ukázka hostuje webový server na localhostu, port 3000. Když webový prohlížeč přistupuje k této adrese, aplikace vykreslí domovskou stránku. Jakmile uživatel vybere Přihlásit se, aplikace přesměruje prohlížeč na přihlašovací obrazovku Microsoft Entra přes adresu URL vygenerovanou knihovnou uzlů MSAL. Po vyjádření souhlasu uživatele prohlížeč přesměruje uživatele zpět na domovskou stránku aplikace spolu s ID a přístupovým tokenem.

ASP.NET Core

1. V adresáři projektu pomocí terminálu zadejte následující příkazy:

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

2. Zkopírujte https adresu URL, která se zobrazí v terminálu, například https://localhost:5001a vložte ji do prohlížeče. Doporučujeme použít prohlížeč v soukromém nebo anonymním režimu.

3. Postupujte podle pokynů a zadejte potřebné podrobnosti pro přihlášení pomocí účtu Microsoft. Požadujete, abyste zadali e-mailovou adresu, aby vám bylo možné poslat jednorázové heslo. Po zobrazení výzvy zadejte kód.

4. Aplikace požaduje oprávnění k údržbě přístupu k datům, ke kterým jste jim udělili přístup, a k přihlášení a čtení profilu. Vyberte Přijmout. Zobrazí se následující snímek obrazovky. Označuje, že jste přihlášení k aplikaci a zobrazujete si podrobnosti profilu z rozhraní Microsoft Graph API.

   

Odhlásit se z aplikace

1. Najděte odkaz Odhlásit se v pravém horním rohu stránky a poté ho vyberte.
2. Zobrazí se výzva k výběru účtu, ze kterém se chcete odhlásit. Vyberte účet, který jste použili k přihlášení.
3. Zobrazí se zpráva s oznámením, že jste se odhlásili. Teď můžete okno prohlížeče zavřít.

Python Flask

1. Vytvořte pro aplikaci virtuální prostředí:

   • Pro Windowsspusťte následující příkazy:

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

   • Pro macOS/Linuxspusťte následující příkazy:

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

2. Nainstalujte požadavky pomocí pip:

   pip install -r requirements.txt
   

3. Spusťte aplikaci z příkazového řádku. Ujistěte se, že vaše aplikace běží na stejném portu jako identifikátor URI přesměrování, který jste nakonfigurovali dříve.

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

4. Zkopírujte adresu URL https, která se zobrazí v terminálu, například https://localhost:5000a vložte ji do prohlížeče. Doporučujeme použít prohlížeč v soukromém nebo anonymním režimu.

5. Postupujte podle pokynů a zadejte potřebné podrobnosti pro přihlášení pomocí účtu Microsoft. Budete požádáni, abyste zadali e-mailovou adresu a heslo pro přihlášení.

6. Aplikace požaduje oprávnění k údržbě přístupu k datům, ke které povolíte přístup, a k přihlášení a následnému čtení profilu, jak je znázorněno na snímku obrazovky. Vyberte Přijmout.

   

7. Zobrazí se následující snímek obrazovky, který značí, že jste se k aplikaci úspěšně přihlásili.

Jak aplikace funguje

Následující diagram ukazuje, jak ukázková aplikace funguje:

1. Aplikace používá balíček identity k získání přístupového tokenu z platformy Microsoft Identity Platform. Tento balíček je založený na knihovně Microsoft Authentication Library (MSAL) pro Python, která zjednodušuje ověřování a autorizaci ve webových aplikacích.

2. Přístupový token, který získáte v předchozím kroku, se použije jako nosný token k ověření uživatele při volání rozhraní Microsoft Graph API.

Související obsah

uzel

• Naučte se, jak vytvořit Node.js webovou aplikaci, která přihlašuje uživatele a volá rozhraní Microsoft Graph API v Kurzu: Přihlášení uživatelů a získání tokenu pro Microsoft Graph ve Node.js & Express webové aplikaci.

ASP.NET Core

• Naučte se vytvářet webovou aplikaci ASP.NET v rámci série Tutoriál: Registrace aplikace s platformou identity Microsoft.
• Rychlý start : Ochrana webového rozhraní API ASP.NET Core pomocí platformy Microsoft Identity.
• Rychlý start : Nasazení webové aplikace ASP.NET do služby Azure App Service

Python Flask

• Naučte se vytvořit webovou aplikaci v Pythonu, která přihlašuje uživatele a volá chráněné webové rozhraní API v Kurz: Webová aplikace, která přihlašuje uživatele.

V tomto rychlém startu použijete ukázkovou webovou aplikaci, která vám ukáže, jak přihlásit uživatele ve vašem externím tenantovi. Ukázková aplikace používá knihovnu Microsoft Authentication Library ke zpracování autentizace.

Než začnete, pomocí výběru Zvolte typ nájemce v horní části této stránky vyberte typ nájemce. Microsoft Entra ID poskytuje dvě konfigurace tenantů, zaměstnanců a externí. Konfigurace tenanta pracovních sil je určená pro zaměstnance, interní aplikace a další organizační prostředky. Externí tenant je určený pro vaše aplikace určené pro zákazníky.

Požadavky

• Účet Azure s aktivním předplatným. Pokud ho ještě nemáte, Vytvořte účet zdarma.
• Tento účet Azure musí mít oprávnění ke správě aplikací. Kterákoli z následujících rolí Microsoft Entra zahrnuje potřebná oprávnění:
  • Správce aplikace
  • Vývojář aplikací
• Externí nájemce. Pokud ho chcete vytvořit, zvolte některou z následujících metod:
  • Pomocí rozšíření Microsoft Entra External ID, nastavte externího tenanta přímo v editoru Visual Studio Code. (Doporučeno)
  • Vytvoření nového externího tenanta v Centru pro správu Microsoft Entra.
• Tok uživatele. Další informace najdete v tématu vytvoření uživatelských toků samoobslužné registrace pro aplikace v externích tenantech. Tento tok uživatele lze použít pro více aplikací.
• Visual Studio Code nebo jiného editoru kódu.

uzel

• Zaregistrujte novou aplikaci v Centru pro správu Microsoft Entra, která je nakonfigurovaná jenom pro účty v tomto organizačním adresáři. Další podrobnosti najdete v tématu Registrace aplikace . Na stránce Přehled aplikace si poznamenejte následující hodnoty pro pozdější použití:
  • ID aplikace (klienta)
  • ID adresáře (klienta)
• Přidejte následující identifikátory URI přesměrování pomocí konfigurace webové platformy. Další podrobnosti najdete v tématu Jak přidat přesměrovací URI do vaší aplikace.
  • Přesměrování URI:
  • URL odhlášení předního kanálu: https://localhost:5001/signout-callback-oidc
• Přidejte do registrace aplikace tajný klíč klienta. Nepoužívejte tajné kódy klienta v produkčních aplikacích. Místo toho použijte certifikáty nebo federované přihlašovací údaje. Další informace najdete v tématu přidání přihlašovacích údajů do aplikace.
• Přidání aplikace do toku uživatele
• Node.js

ASP.NET Core

• Zaregistrujte novou aplikaci v Centru pro správu Microsoft Entra, která je nakonfigurovaná jenom pro účty v tomto organizačním adresáři. Další podrobnosti najdete v tématu Registrace aplikace . Na stránce Přehled aplikace si poznamenejte následující hodnoty pro pozdější použití:
  • ID aplikace (klienta)
  • ID adresáře (klienta)
• Přidejte následující identifikátory URI přesměrování pomocí konfigurace webové platformy. Další podrobnosti najdete v tématu Jak přidat přesměrovací URI do vaší aplikace.
  • Přesměrování URI:
  • URL odhlášení předního kanálu: https://localhost:5001/signout-callback-oidc
• Přidejte do registrace aplikace tajný klíč klienta. Nepoužívejte tajné kódy klienta v produkčních aplikacích. Místo toho použijte certifikáty nebo federované přihlašovací údaje. Další informace najdete v tématu přidání přihlašovacích údajů do aplikace.
• Přidání aplikace do toku uživatele
• Minimální verze .NET 8.0 SDK.

• Zaregistrujte novou aplikaci v Centru pro správu Microsoft Entra, která je nakonfigurovaná jenom pro účty v tomto organizačním adresáři. Další podrobnosti najdete v tématu Registrace aplikace . Na stránce Přehled aplikace si poznamenejte následující hodnoty pro pozdější použití:
  • ID aplikace (klienta)
  • ID adresáře (klienta)
• Přidejte následující identifikátory URI přesměrování pomocí konfigurace webové platformy. Další podrobnosti najdete v tématu Jak přidat přesměrovací URI do vaší aplikace.
  • Přesměrování URI:
• Přidání aplikace do toku uživatele
• Python 3 +
• Přidejte do registrace aplikace tajný klíč klienta. Nepoužívejte tajné kódy klienta v produkčních aplikacích. Místo toho použijte certifikáty nebo federované přihlašovací údaje. Další informace najdete v tématu přidání přihlašovacích údajů do aplikace.

Python Flask

• Zaregistrujte novou aplikaci v Centru pro správu Microsoft Entra, která je nakonfigurovaná jenom pro účty v tomto organizačním adresáři. Další podrobnosti najdete v tématu Registrace aplikace . Na stránce Přehled aplikace si poznamenejte následující hodnoty pro pozdější použití:
  • ID aplikace (klienta)
  • ID adresáře (klienta)
• Přidejte následující identifikátory URI přesměrování pomocí konfigurace webové platformy. Další podrobnosti najdete v tématu Jak přidat přesměrovací URI do vaší aplikace.
  • Přesměrování URI:
• Přidání aplikace do toku uživatele
• Python 3 +
• Přidejte do registrace aplikace tajný klíč klienta. Nepoužívejte tajné kódy klienta v produkčních aplikacích. Místo toho použijte certifikáty nebo federované přihlašovací údaje. Další informace najdete v tématu přidání přihlašovacích údajů do aplikace.

Klonování nebo stažení ukázkové webové aplikace

uzel

Pokud chcete získat ukázkovou aplikaci, můžete ji buď naklonovat z GitHubu, nebo si ji stáhnout jako soubor .zip:

• Pokud chcete ukázku naklonovat, otevřete příkazový řádek a přejděte do umístění, kam chcete projekt vytvořit, a zadejte následující příkaz:

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

• Případně stáhněte ukázkový soubor .zip, a poté ho extrahujte do cesty k souboru, kde je název kratší než 260 znaků.

Nainstalujte závislosti projektu

1. Otevřete okno konzoly a přejděte do adresáře, který obsahuje ukázkovou aplikaci Node.js:

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

2. Spuštěním následujících příkazů nainstalujte závislosti aplikací:

   npm install
   

ASP.NET Core

Pokud chcete získat ukázkovou aplikaci, můžete ji buď naklonovat z GitHubu, nebo si ji stáhnout jako soubor .zip.

• Pokud chcete ukázku naklonovat, otevřete příkazový řádek a přejděte do umístění, kam chcete projekt vytvořit, a zadejte následující příkaz:

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

• Stáhnout soubor .zip. Extrahujte jej do umístění, kde délka názvu je menší než 260 znaků.

Pokud chcete získat ukázkovou aplikaci, můžete ji buď naklonovat z GitHubu, nebo si ji stáhnout jako soubor .zip.

• Pokud chcete ukázku naklonovat, otevřete příkazový řádek a přejděte do umístění, kam chcete projekt vytvořit, a zadejte následující příkaz:

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-python.git
  

• Stáhnout soubor .zip. Extrahujte jej do umístění, kde délka názvu je menší než 260 znaků.

Nainstalujte závislosti projektu

1. Otevřete okno konzoly a přejděte do adresáře, který obsahuje ukázkovou webovou aplikaci Flask:

   cd django-web-app
   

2. Nastavení virtuálního prostředí:

   • Pro Windowsspusťte následující příkazy:

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

   • Pro macOS/Linuxspusťte následující příkazy:

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

3. Pokud chcete nainstalovat závislosti aplikací, spusťte následující příkazy:

   python3 -m pip install -r requirements.txt
   

Python Flask

Pokud chcete získat ukázkovou aplikaci, můžete ji buď naklonovat z GitHubu, nebo si ji stáhnout jako soubor .zip.

• Pokud chcete ukázku naklonovat, otevřete příkazový řádek a přejděte do umístění, kam chcete projekt vytvořit, a zadejte následující příkaz:

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-python.git
  

• Stáhnout soubor .zip. Extrahujte jej do umístění, kde délka názvu je menší než 260 znaků.

Nainstalujte závislosti projektu

1. Otevřete okno konzoly a přejděte do adresáře, který obsahuje ukázkovou webovou aplikaci Flask:

   cd flask-web-app
   

2. Nastavení virtuálního prostředí:

   • Pro Windowsspusťte následující příkazy:

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

   • Pro macOS/Linuxspusťte následující příkazy:

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

3. Pokud chcete nainstalovat závislosti aplikací, spusťte následující příkazy:

   python3 -m pip install -r requirements.txt
   

Konfigurace ukázkové webové aplikace

Abyste mohli přihlásit uživatele pomocí ukázkové aplikace, musíte ji aktualizovat pomocí podrobností o aplikaci a tenantovi:

uzel

1. V editoru kódu otevřete soubor App\authConfig.js.

2. Vyhledejte zástupný symbol:

   • Enter_the_Application_Id_Here a nahraďte ho ID aplikace (klienta), kterou jste zaregistrovali dříve.
   • Nahraďte Enter_the_Tenant_Subdomain_Here subdoménou Adresář (tenanta). Pokud je například primární doména vašeho tenanta contoso.onmicrosoft.com, použijte contoso. Pokud nemáte název tenanta, zjistěte, jak zjistit podrobnosti o tenantovi.
   • Enter_the_Client_Secret_Here a nahraďte ji hodnotou tajného kódu aplikace, kterou jste zkopírovali dříve.

ASP.NET Core

1. Přejděte do kořenového adresáře, který obsahuje ukázkovou aplikaci ASP.NET Core:

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

2. Otevřete soubor appsettings.json.

3. V Autoritavyhledejte Enter_the_Tenant_Subdomain_Here a nahraďte ji subdoménou vašeho tenanta. Pokud je například primární doména vašeho tenanta caseyjensen@onmicrosoft.com, hodnota, kterou byste měli zadat, je casyjensen.

4. Najděte hodnotu Enter_the_Application_Id_Here a nahraďte ji ID aplikace (clientId), kterou jste zaregistrovali v Centru pro správu Microsoft Entra.

5. Nahraďte Enter_the_Client_Secret_Here hodnotou tajného klíče klienta, kterou jste nastavili.

1. Otevřete soubory projektu v editoru Visual Studio Code nebo editoru, který používáte.

2. Vytvořte soubor .env v kořenové složce projektu pomocí souboru .env.sample.external-id jako průvodce.

3. V souboru .env zadejte následující proměnné prostředí:

   1. CLIENT_ID což je ID aplikace (klienta) aplikace, kterou jste zaregistrovali dříve.
   2. CLIENT_SECRET, což je hodnota tajného kódu aplikace, kterou jste zkopírovali dříve.
   3. AUTHORITY což je adresa URL, která identifikuje autoritu tokenu. Měla by mít formát https://{subdoména}.ciamlogin.com/{subdoména}.onmicrosoft.com. Nahraďte subdoménu subdoménou adresáře (tenanta). Pokud je například primární doména vašeho tenanta contoso.onmicrosoft.com, použijte contoso. Pokud nemáte subdoménu tenanta, zjistěte, jak zjistit podrobnosti o tenantovi.
   4. REDIRECT_URI by měl odpovídat URI přesměrování, který jste zaregistrovali dříve, a shodovat se s vaší konfigurací.

Python Flask

1. Otevřete soubory projektu v editoru Visual Studio Code nebo editoru, který používáte.

2. Vytvořte soubor .env v kořenové složce projektu pomocí souboru .env.sample.external-id jako průvodce.

3. V souboru .env zadejte následující proměnné prostředí:

   • CLIENT_ID což je ID aplikace (klienta) aplikace, kterou jste zaregistrovali dříve.
   • CLIENT_SECRET, což je hodnota tajného kódu aplikace, kterou jste zkopírovali dříve.
   • AUTHORITY což je adresa URL, která identifikuje autoritu tokenu. Měla by mít formát https://{subdoména}.ciamlogin.com/{subdoména}.onmicrosoft.com. Nahraďte subdoménu subdoménou adresáře (tenanta). Pokud je například primární doména vašeho tenanta contoso.onmicrosoft.com, použijte contoso. Pokud nemáte subdoménu tenanta, zjistěte, jak zjistit podrobnosti o tenantovi.

4. Ověřte, že je URI přesměrování správně nakonfigurované. Identifikátor URI přesměrování, který jste zaregistrovali dříve, by měl odpovídat vaší konfiguraci. Tato ukázka ve výchozím nastavení nastaví cestu přesměrovacího URI na /getAToken. Tato konfigurace je v souboru app_config.py jako REDIRECT_PATH.

Spuštění a testování ukázkové webové aplikace

uzel

Ukázkovou Node.js webovou aplikaci teď můžete otestovat. Musíte spustit Node.js server a přistupovat k němu prostřednictvím prohlížeče v http://localhost:3000.

1. V terminálu spusťte následující příkaz:

   npm start 
   

2. Otevřete prohlížeč a přejděte na http://localhost:3000. Měla by se zobrazit stránka podobná následujícímu snímku obrazovky:

   

3. Po dokončení načítání stránky vyberte po zobrazení výzvy Přihlásit se.

4. Na přihlašovací stránce zadejte e-mailovou adresu, vyberte Další, zadejte Hesloa pak vyberte Přihlásit se. Pokud účet nemáte, vyberte Žádný účet? Vytvořte jeden odkaz, který spustí tok registrace.

5. Pokud zvolíte možnost registrace, po vyplnění e-mailu, jednorázového hesla, nového hesla a dalších podrobností účtu dokončíte celý tok registrace. Zobrazí se stránka podobná následujícímu snímku obrazovky. Pokud zvolíte možnost přihlášení, zobrazí se podobná stránka.

   

6. Vyberte Odhlásit se, pokud chcete uživatele odhlásit z webové aplikace, nebo vyberte Zobrazit deklarace identity tokenu ID k zobrazení deklarací identity tokenů ID vrácených microsoftem Entra.

Jak to funguje

Když uživatelé vyberou odkaz Přihlášení, aplikace zahájí žádost o ověření a přesměruje uživatele na externí ID Microsoft Entra. Na přihlašovací nebo registrační stránce, která se objeví, když se uživatel úspěšně přihlásí nebo vytvoří účet, vrátí Microsoft Entra External ID token ID do aplikace. Aplikace ověří token ID, přečte deklarace identity a vrátí uživatelům zabezpečenou stránku.

Když uživatelé vyberou odkaz Odhlásit se, aplikace vymaže svoji relaci a pak přesměruje uživatele na koncový bod odhlášení Microsoft Entra External ID, aby ho informovala, že uživatel byl odhlášen.

Pokud chcete vytvořit aplikaci podobnou vzorové, kterou jste spustili, dokončete kroky v článku " Přihlášení uživatelů ve vaší vlastní webové aplikaci Node.js".

ASP.NET Core

1. V prostředí příkazového řádku spusťte následující příkazy:

   dotnet run
   

2. Otevřete webový prohlížeč a přejděte na https://localhost:7274.

3. Přihlaste se pomocí účtu zaregistrovaného u externího tenanta.

4. Po přihlášení se zobrazované jméno zobrazí vedle tlačítka Odhlásit se, jak je znázorněno na následujícím snímku obrazovky.

   aplikaci ASP.NET Core

5. Pokud se chcete z aplikace odhlásit, vyberte tlačítko Odhlásit se.

Spusťte aplikaci, abyste viděli přihlašovací proces v akci.

1. V terminálu spusťte následující příkaz:

   python manage.py runserver localhost:5000                                             
   

   Můžete použít číslo portu podle svého výběru.

2. Otevřete prohlížeč a přejděte na http://localhost:5000. Měla by se zobrazit stránka podobná následujícímu snímku obrazovky:

   

3. Po dokončení načítání stránky vyberte odkaz Přihlásit se. Zobrazí se výzva k přihlášení.

4. Na přihlašovací stránce zadejte e-mailovou adresu, vyberte Další, zadejte Hesloa pak vyberte Přihlásit se. Pokud účet nemáte, vyberte Žádný účet? Vytvořte jeden odkaz, který spustí tok registrace.

5. Pokud zvolíte možnost registrace, projdete procesem registrace. Vyplňte svůj e-mail, jednorázové heslo, nové heslo a další podrobnosti o účtu a dokončete celý tok registrace.

6. Po přihlášení nebo registraci budete přesměrováni zpět na webovou aplikaci. Zobrazí se stránka, která vypadá podobně jako na následujícím snímku obrazovky:

   

7. Vyberte Odhlášení, pokud chcete uživatele odhlásit z webové aplikace, nebo vyberte Využít podřízené rozhraní API k provedení volání na koncový bod Microsoft Graphu.

Jak to funguje

Když uživatelé vyberou odkaz Přihlášení, aplikace zahájí žádost o ověření a přesměruje uživatele na externí ID Microsoft Entra. Uživatel se pak přihlásí nebo zaregistruje stránku na stránce, která se zobrazí. Po zadání požadovaných přihlašovacích údajů a vyjádření souhlasu s požadovanými obory přesměruje Microsoft Entra External ID uživatele zpět na webovou aplikaci s autorizačním kódem. Webová aplikace pak pomocí tohoto autorizačního kódu získá token z externího ID Microsoft Entra.

Když uživatelé vyberou odkaz odhlášení, aplikace vymaže svoji relaci, přesměruje uživatele do koncového bodu odhlášení externího ID Microsoft Entra a upozorní ho, že se uživatel odhlásil. Uživatel se pak přesměruje zpět do webové aplikace.

Python Flask

Spusťte aplikaci, abyste viděli přihlašovací proces v akci.

1. V terminálu spusťte následující příkaz:

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

   Můžete použít port podle svého výběru. Měl by být podobný portu identifikátoru URI přesměrování, který jste registrovali dříve.

2. Otevřete prohlížeč a přejděte na http://localhost:3000. Měla by se zobrazit stránka podobná následujícímu snímku obrazovky:

   

3. Po dokončení načítání stránky vyberte odkaz Přihlásit se. Zobrazí se výzva k přihlášení.

4. Na přihlašovací stránce zadejte e-mailovou adresu, vyberte Další, zadejte Hesloa pak vyberte Přihlásit se. Pokud účet nemáte, vyberte Žádný účet? Vytvořte jeden odkaz, který spustí tok registrace.

5. Pokud zvolíte možnost registrace, projdete procesem registrace. Vyplňte svůj e-mail, jednorázové heslo, nové heslo a další podrobnosti o účtu a dokončete celý tok registrace.

6. Po přihlášení nebo registraci budete přesměrováni zpět na webovou aplikaci. Zobrazí se stránka, která vypadá podobně jako na následujícím snímku obrazovky:

   

7. Vyberte Odhlášení, pokud chcete uživatele odhlásit z webové aplikace, nebo vyberte Využít podřízené rozhraní API k provedení volání na koncový bod Microsoft Graphu.

Jak to funguje

Když uživatelé vyberou odkaz Přihlášení, aplikace zahájí žádost o ověření a přesměruje uživatele na externí ID Microsoft Entra. Uživatel se pak přihlásí nebo zaregistruje stránku na stránce, která se zobrazí. Po zadání požadovaných přihlašovacích údajů a vyjádření souhlasu s požadovanými obory přesměruje Microsoft Entra External ID uživatele zpět na webovou aplikaci s autorizačním kódem. Webová aplikace pak pomocí tohoto autorizačního kódu získá token z externího ID Microsoft Entra.

Když uživatelé vyberou odkaz odhlášení, aplikace vymaže svoji relaci, přesměruje uživatele do koncového bodu odhlášení externího ID Microsoft Entra a upozorní ho, že se uživatel odhlásil. Uživatel se pak přesměruje zpět do webové aplikace.

Související obsah

uzel

• Přihlaste uživatele ve vaší webové aplikaci Node.js
• rychlý start – Přihlášení uživatelů a volání webového rozhraní API v ukázkové webové aplikaci Node.js
• Rychlý úvod – Úprava profilu v ukázkové Node.js webové aplikaci

ASP.NET Core

• Použití naší vícedílné série kurzů k vytvoření této ASP.NET webové aplikace od nuly
• Povolit resetování hesla
• Přizpůsobení výchozího brandingu

• přihlášení uživatelů pomocí ukázkové webové aplikace Flask
• Povolit resetování hesla
• Přizpůsobení výchozího brandingu

Python Flask

• Povolit resetování hesla
• Přizpůsobení výchozího brandingu