Rychlý start: Přihlášení uživatelů do jednostránkové aplikace (SPA) a volání rozhraní Microsoft Graph API pomocí Blazor WebAssembly

V tomto rychlém startu se pomocí ukázkové jednostránkové aplikace (SPA) Blazor WebAssembly (WASM) dozvíte, jak se přihlásit uživatele pomocí toku autorizačního kódu s ověřovacím klíčem pro exchange kódu (PKCE) a volat rozhraní Microsoft Graph API. Ukázka používá microsoft.Authentication.WebAssembly.MSAL ke zpracování ověřování.

Požadavky

• Účet Azure s aktivním předplatným. Pokud ho ještě nemáte, vytvořte si účet zdarma.
• .NET SDK
• Visual Studio 2022 nebo Visual Studio Code

Registrace identifikátorů aplikace a záznamů

K dokončení registrace zadejte název aplikace, zadejte podporované typy účtů a přidejte identifikátor URI přesměrování. Po registraci se v podokně Přehled aplikace zobrazí identifikátory potřebné ve zdrojovém kódu aplikace.

1. Přihlaste se do Centra pro správu Microsoft Entra.

2. Pokud máte přístup k více tenantům, pomocí ikony Nastavení v horní nabídce přepněte na tenanta, ve kterém chcete aplikaci zaregistrovat z nabídky Adresáře a předplatná.

3. Přejděte na Aplikace> identit>Registrace aplikací vyberte Nová registrace.

4. Zadejte název aplikace, například identity-client-spa.

5. U podporovaných typů účtů vyberte Pouze účty v tomto organizačním adresáři. Pokud chcete získat informace o různých typech účtů, vyberte možnost Nápověda pro výběr .

6. Vyberte Zaregistrovat.

   

7. Po dokončení registrace se zobrazí podokno Přehled aplikace. Poznamenejte si ID adresáře (tenanta) a ID aplikace (klienta), které se má použít ve zdrojovém kódu aplikace.

   

   Poznámka:

   Podporované typy účtů je možné změnit odkazem na úpravu účtů podporovaných aplikací.

Přidání identifikátoru URI přesměrování platformy

Pokud chcete zadat typ aplikace pro registraci aplikace, postupujte takto:

1. V části Spravovat vyberte Ověřování.
2. Na stránce Konfigurace platformy vyberte Přidat platformu a pak vyberte možnost SPA.
3. Pro identifikátory URI přesměrování zadejte http://localhost:5000/authentication/login-callback.
4. Výběrem možnosti Konfigurovat uložte změny.

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

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

• Stáhněte soubor .zip. Extrahujte ho do cesty k souboru, kde délka názvu je menší než 260 znaků.

Konfigurace projektu

1. V integrovaném vývojovém prostředí otevřete složku projektu ms-identity-docs-code-dotnet/spa-blazor-wasm obsahující ukázku.

2. Otevřete wwwroot/appsettings.json a aktualizujte následující hodnoty s informacemi zaznamenanými dříve v Centru pro správu.

   {
     "AzureAd": {
       "Authority": "https://login.microsoftonline.com/<Enter the tenant ID obtained from the Microsoft Entra admin center>",
       "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
       "ValidateAuthority": true
     }
   }
   

   • Authority – Autorita je adresa URL, která označuje adresář, ze kterého může knihovna MSAL požadovat tokeny. Nahraďte Enter_the_Tenant_Info_Herehodnotou ID adresáře (tenanta), která byla zaznamenána dříve.
   • ClientId – Identifikátor aplikace, označovaný také jako klient. Nahraďte text v uvozovkách hodnotou ID aplikace (klienta), která byla zaznamenána dříve.

Spuštění aplikace a přihlášení

Spusťte projekt s webovým serverem pomocí .NET:

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

   dotnet run
   

2. http Zkopírujte adresu URL, která se zobrazí v terminálu, http://localhost:5000například a vložte ji do prohlížeče. Doporučujeme použít soukromou nebo anonymní relaci prohlížeče.

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

4. Aplikace požádá o 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í vašeho profilu. Zvolte Přijmout. Zobrazí se následující snímek obrazovky, který označuje, že jste se přihlásili k aplikaci a že jste z rozhraní Microsoft Graph API přistupovali k podrobnostem profilu.

   

Odhlásit se z aplikace

1. Najděte tlačítko Odhlásit se v pravém horním rohu stránky a vyberte ho.
2. Zobrazí se výzva k výběru účtu, ze který se chcete odhlásit. Vyberte účet, který jste použili k přihlášení.

Zobrazí se zpráva s oznámením, že jste se odhlásili. Teď můžete okno prohlížeče zavřít.

Viz také

• Rychlý start: Ochrana webového rozhraní API ASP.NET Core pomocí platformy Microsoft Identity Platform

• Další informace o vytvoření služby React SPA od začátku pomocí následující řady : Kurz: Přihlášení uživatelů a volání Microsoft Graphu