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

V tomto rychlém startu se pomocí ukázkové jednostránkové aplikace React (SPA) dozvíte, jak se přihlásit uživatele pomocí toku autorizačního kódu s ověřovacím klíčem pro výměnu kódu (PKCE). Ukázka používá k zpracování ověřování knihovnu Microsoft Authentication Library pro JavaScript.

Požadavky

• Účet Azure s aktivním předplatným. Pokud ho ještě nemáte, vytvořte zdarma účet.
• Node.js
• 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 aplikace podokno Přehled 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, do kterého chcete aplikaci zaregistrovat, z nabídky Adresáře a předplatná .

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

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

5. U podporovaných typů účtůvyberte Účty v tomto organizačním adresáři pouze. Pokud chcete získat informace o různých typech účtů, vyberte možnost Pomozte mi zvolit možnost.

6. Vyberte Zaregistrovat.

   

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

   

   Poznámka

   Podporované typy účtů mohou být změněny odkazem na Upravit účty podporované aplikací.

Přidejte identifikátor URI přesměrování platformy

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

1. V části Spravovatvyberte Ověřování.
2. Na stránce konfigurace platformy vyberte Přidat platformua pak vyberte možnost SPA.
3. Pro URI přesměrování zadejte http://localhost:3000.
4. Výběrem 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-javascript.git
  

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

Konfigurace projektu

1. V integrovaném vývojovém prostředí otevřete složku projektu ms-identity-docs-code-javascript/react-spaobsahující ukázku.

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

   /*
    * Copyright (c) Microsoft Corporation. All rights reserved.
    * Licensed under the MIT License.
    */
   
   import { LogLevel } from "@azure/msal-browser";
   
   /**
    * Configuration object to be passed to MSAL instance on creation. 
    * For a full list of MSAL.js configuration parameters, visit:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
    */
   
   export const msalConfig = {
       auth: {
           clientId: "Enter_the_Application_Id_Here",
           authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
           redirectUri: "http://localhost:3000",
       },
       cache: {
           cacheLocation: "sessionStorage", // This configures where your cache will be stored
           storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
       },
       system: {	
           loggerOptions: {	
               loggerCallback: (level, message, containsPii) => {	
                   if (containsPii) {		
                       return;		
                   }		
                   switch (level) {
                       case LogLevel.Error:
                           console.error(message);
                           return;
                       case LogLevel.Info:
                           console.info(message);
                           return;
                       case LogLevel.Verbose:
                           console.debug(message);
                           return;
                       case LogLevel.Warning:
                           console.warn(message);
                           return;
                       default:
                           return;
                   }	
               }	
           }	
       }
   };
   
   /**
    * Scopes you add here will be prompted for user consent during sign-in.
    * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
    * For more information about OIDC scopes, visit: 
    * https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
    */
   export const loginRequest = {
       scopes: ["User.Read"]
   };
   
   /**
    * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
    */
   export const graphConfig = {
       graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
   };
   

   • clientId – identifikátor aplikace, označovaný také jako klient. Nahraďte text v uvozovkách hodnotou z ID aplikace (klienta) , která byla zaznamenána dříve.
   • authority – autorita je URL, která označuje adresář, ze kterého může MSAL požadovat tokeny. Nahraďte Enter_the_Tenant_Info_Here hodnotou ID adresáře (tenanta), která byla zaznamenána dříve.
   • redirectUri – přesměrovací URI této aplikace. V případě potřeby nahraďte text v uvozovkách identifikátorem URI přesměrování, který byl zaznamenán dříve.

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

Spuštění projektu s webovým serverem pomocí Node.js:

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

   npm install
   npm start
   

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

3. Postupujte podle pokynů a zadejte potřebné podrobnosti pro přihlášení pomocí účtu Microsoft. Požadujete 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, 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ém 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.

Související obsah

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

• Další informace získáte vytvořením této služby React SPA od začátku pomocí následující řady – kurz : Přihlášení uživatelů a volání Microsoft Graphu