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

V tomto rychlém průvodci použijete ukázkovou jednostránkovou aplikaci (SPA), která vám ukáže, jak přihlásit uživatele pomocí toku autorizačního kódu s klíčem k prokázání pro výměnu kódu (PKCE) a využít rozhraní Microsoft Graph API. Ukázka používá Microsoft Authentication Library pro zpracování autentizace.

Požadavky

JavaScript

• Úč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í
  • Správce cloudových aplikací.
• Node.js.
• Visual Studio Code nebo jiného editoru kódu.

React

• Účet Azure s aktivním předplatným. Pokud ho ještě nemáte, vytvořte si účet zdarma.
• Tento účet Azure musí mít oprávnění ke správě aplikací. Požadovaná oprávnění jsou součástí kterékoliv z následujících rolí Microsoft Entra:
  • Správce aplikace
  • Vývojář aplikací
  • Správce cloudových aplikací.
• Node.js.
• editoru Visual Studio Code nebo jiného editoru kódu.

Angular

• Účet Azure s aktivním předplatným. Pokud ještě nemáte, vytvořte účet zdarma.
• Tento účet Azure musí mít oprávnění ke správě aplikací. Mezi následující role Microsoft Entra patří požadovaná oprávnění:
  • Správce aplikace
  • Vývojář aplikací
  • Správce cloudových aplikací.
• Node.js.
• Visual Studio Code nebo jiný editor kódu.

Blazor

• Úč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í. Mezi následující role Microsoft Entra patří požadovaná oprávnění:
  • Správce aplikace
  • Vývojář aplikací
  • Správce cloudových aplikací.
• .NET SDK.
• Visual Studio Code nebo jiný editor.

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, použijte v horní nabídce ikonu Nastavení pro přepnutí na tenanta, ve kterém chcete aplikaci zaregistrovat, a to z nabídky Adresáře a předplatná.

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

4. Zadejte název pro aplikaci, 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

   Typy podporovaných účtů lze změnit odkazem na Upravit účty podporované aplikací.

---

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

JavaScriptu

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

1. V části Správavyberte Autentizace.
2. Na stránce konfigurací platformy vyberte Přidat platformua pak vyberte možnost SPA.
3. Pro URI adresy přesměrování zadejte http://localhost:3000.
4. Vyberte Konfigurovat pro uložení změn.

React

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

1. V části Správavyberte Ověřování.
2. Na stránce konfigurace platformy vyberte Přidat platformua pak vyberte možnost SPA.
3. Pro přesměrovací identifikátory URI zadejte http://localhost:3000.
4. Výběrem Konfigurovat uložte změny.

Angular

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. Do polí pro URI přesměrování zadejte http://localhost:4200.
4. Vyberte Konfigurovat a uložte změny.

Blazor

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 přesměrování URI zadejte http://localhost:5000/authentication/login-callback.
4. Výběrem Konfigurace 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.

JavaScriptu

• 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 ho do cesty k souboru, kde délka názvu je menší než 260 znaků.

React

• 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 ho do cesty k souboru, kde délka názvu je menší než 260 znaků.

Angular

• 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 ho do cesty k souboru, kde délka názvu je menší než 260 znaků.

Blazor

• 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
  

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

Konfigurace projektu

JavaScript

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

2. Otevřete vanillajs-spa/App/public/authConfig.js a aktualizujte následující hodnoty s informacemi zaznamenanými v Centru pro správu.

   /**
    * 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 
    */
   const msalConfig = {
       auth: {
   
            // WORKFORCE TENANT
            authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here", //  Replace the placeholder with your tenant info
            // EXTERNAL TENANT
            // authority: "https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/", // Replace the placeholder with your tenant subdomain
           redirectUri: '/', // You must register this URI on App Registration. Defaults to window.location.href e.g. http://localhost:3000/
           navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
       },
       cache: {
           cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO.
           storeAuthStateInCookie: false, // set this to true if you have to support IE
       },
       system: {
           loggerOptions: {
               loggerCallback: (level, message, containsPii) => {
                   if (containsPii) {
                       return;
                   }
                   switch (level) {
                       case msal.LogLevel.Error:
                           console.error(message);
                           return;
                       case msal.LogLevel.Info:
                           console.info(message);
                           return;
                       case msal.LogLevel.Verbose:
                           console.debug(message);
                           return;
                       case msal.LogLevel.Warning:
                           console.warn(message);
                           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://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
    * https://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
    */
   const loginRequest = {
       scopes: ["User.Read"],
   };
   
   /**
    * An optional silentRequest object can be used to achieve silent SSO
    * between applications by providing a "login_hint" property.
    */
   
   // const silentRequest = {
   //   scopes: ["openid", "profile"],
   //   loginHint: "example@domain.net"
   // };
   
   // exporting config object for jest
   if (typeof exports !== 'undefined') {
       module.exports = {
           msalConfig: msalConfig,
           loginRequest: loginRequest,
       };
       module.exports = {
           msalConfig: msalConfig,
           loginRequest: loginRequest,
       };
   }
   

   • 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.
   • authority – autorita je URL, která označuje umístění adresáře, ze kterého může MSAL požadovat tokeny. Nahraďte hodnotu Enter_the_Tenant_Info_Here hodnotou ID adresáře (tenanta), která byla dříve zaznamenána.
   • redirectUri – identifikátor URI přesměrování 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.

React

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 react-spa/src/authConfig.js a aktualizujte následující hodnoty s informacemi zaznamenanými 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. Text v uvozovkách nahradit hodnotou ID aplikace (klienta) , která byla zaznamenána dříve.
   • 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_Here id adresáře (tenanta) hodnotu, která byla zaznamenána dříve.
   • redirectUri – Přesměrovací URI 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.

Angular

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

2. Otevřete angular-spa/src/app/app.module.ts a aktualizujte následující hodnoty s informacemi zaznamenanými v Centru pro správu.

   // Required for Angular multi-browser support
   import { BrowserModule } from '@angular/platform-browser';
   
   // Required for Angular
   import { NgModule } from '@angular/core';
   
   // Required modules and components for this application
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { ProfileComponent } from './profile/profile.component';
   import { HomeComponent } from './home/home.component';
   
   // HTTP modules required by MSAL
   import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
   
   // Required for MSAL
   import { IPublicClientApplication, PublicClientApplication, InteractionType, BrowserCacheLocation, LogLevel } from '@azure/msal-browser';
   import { MsalGuard, MsalInterceptor, MsalBroadcastService, MsalInterceptorConfiguration, MsalModule, MsalService, MSAL_GUARD_CONFIG, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG, MsalGuardConfiguration, MsalRedirectComponent } from '@azure/msal-angular';
   
   const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;
   
   export function MSALInstanceFactory(): IPublicClientApplication {
     return new PublicClientApplication({
       auth: {
         // 'Application (client) ID' of app registration in the Microsoft Entra admin center - this value is a GUID
         clientId: "Enter_the_Application_Id_Here",
         // Full directory URL, in the form of https://login.microsoftonline.com/<tenant>
         authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
         // Must be the same redirectUri as what was provided in your app registration.
         redirectUri: "http://localhost:4200",
       },
       cache: {
         cacheLocation: BrowserCacheLocation.LocalStorage,
         storeAuthStateInCookie: isIE
       }
     });
   }
   
   // MSAL Interceptor is required to request access tokens in order to access the protected resource (Graph)
   export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
     const protectedResourceMap = new Map<string, Array<string>>();
     protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);
   
     return {
       interactionType: InteractionType.Redirect,
       protectedResourceMap
     };
   }
   
   // MSAL Guard is required to protect routes and require authentication before accessing protected routes
   export function MSALGuardConfigFactory(): MsalGuardConfiguration {
     return { 
       interactionType: InteractionType.Redirect,
       authRequest: {
         scopes: ['user.read']
       }
     };
   }
   
   // Create an NgModule that contains the routes and MSAL configurations
   @NgModule({
     declarations: [
       AppComponent,
       HomeComponent,
       ProfileComponent
     ],
     imports: [
       BrowserModule,
       AppRoutingModule,
       HttpClientModule,
       MsalModule
     ],
     providers: [
       {
         provide: HTTP_INTERCEPTORS,
         useClass: MsalInterceptor,
         multi: true
       },
       {
         provide: MSAL_INSTANCE,
         useFactory: MSALInstanceFactory
       },
       {
         provide: MSAL_GUARD_CONFIG,
         useFactory: MSALGuardConfigFactory
       },
       {
         provide: MSAL_INTERCEPTOR_CONFIG,
         useFactory: MSALInterceptorConfigFactory
       },
       MsalService,
       MsalGuard,
       MsalBroadcastService
     ],
     bootstrap: [AppComponent, MsalRedirectComponent]
   })
   export class AppModule { }
   

   • clientId – identifikátor aplikace, označovaný také jako klient. Text v uvozovkách nahraďte hodnotou ID aplikace (klienta) , která byla zaznamenána dříve.
   • authority – autorita je URL adresa, která označuje adresář, ze kterého může knihovna MSAL získat tokeny. Nahraďte Enter_the_Tenant_Info_Here id adresáře (tenanta) hodnotu, která byla zaznamenána dříve.
   • redirectUri – Přesměrovací URI 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.

Blazor

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

2. Otevřete spa-blazor-wasm/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 URL označuje adresář, ze kterého může MSAL požadovat tokeny. Nahraďte Enter_the_Tenant_Info_Here id adresáře (tenanta) hodnotu, 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.

Spusťte aplikaci a přihlaste se a odhlaste se.

JavaScriptu

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:

   cd vanillajs-spa/App
   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 inkognito 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. 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.

   

React

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:

   cd react-spa/App
   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 anonymní okno prohlížeče.

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.

   

Angular

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:

   cd angular-spa/App
   npm install
   npm start
   

2. Zkopírujte adresu URL https, která se zobrazí v terminálu, například https://localhost:4200, a vložte ji do adresního řádku prohlížeče. Doporučujeme použít soukromou nebo inkognito 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. 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.

   

Blazor

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

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

   cd spa-blazor-wasm
   dotnet workload install wasm-tools
   dotnet run
   

2. Zkopírujte http adresu URL, která se zobrazí v terminálu, například http://localhost:5000a vložte ji do prohlížeče. Doporučujeme použít soukromou nebo inkognito 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. 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.

   

Požadavky

JavaScriptu

• 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.
• Tento účet Azure musí mít oprávnění ke správě aplikací. Mezi následující role Microsoft Entra, které zahrnují požadovaná oprávnění, patří:
  • Správce aplikace
  • Vývojář aplikací
  • Správce cloudových aplikací.
• Node.js.
• editoru Visual Studio Code nebo jiného editoru kódu.

React

• Externí tenant. Pokud ho chcete vytvořit, zvolte některou z následujících metod:
  • Pomocí rozšíření Microsoft Entra External ID nastavíte externího tenanta přímo ve Visual Studio Code. (doporučeno)
  • Vytvoření nového externího tenanta v Centru pro správu Microsoft Entra.
• Tento účet Azure musí mít oprávnění ke správě aplikací. Kterákoliv z následujících rolí Microsoft Entra obsahuje požadovaná oprávnění:
  • Správce aplikace
  • Vývojář aplikací
  • Správce cloudových aplikací.
• Node.js.
• Visual Studio Code nebo jiného editoru kódu.

Angular

• Externí nájemník. Pokud ho chcete vytvořit, zvolte některou z následujících metod:
  • Pomocí rozšíření Microsoft Entra External ID můžete nastavit 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.
• Tento účet Azure musí mít oprávnění ke správě aplikací. Mezi následující role Microsoft Entra patří potřebná přístupová práva:
  • Správce aplikace
  • Vývojář aplikací
  • Správce cloudových aplikací.
• Node.js.
• Visual Studio Code nebo jiném editoru kódu.

Registrace identifikátorů aplikace a záznamů

Aby vaše aplikace mohla přihlašovat uživatele pomocí Microsoft Entra, musí být Microsoft Entra External ID obeznámeno s aplikací, kterou vytvoříte. Registrace aplikace vytvoří vztah důvěryhodnosti mezi aplikací a Microsoft Entra. Když zaregistrujete aplikaci, externí ID vygeneruje jedinečný identifikátor označovaný jako ID aplikace (klient), což je hodnota použitá k identifikaci aplikace při vytváření žádostí o ověření.

Následující kroky ukazují, jak zaregistrovat aplikaci v Centru pro správu Microsoft Entra:

1. Přihlaste se do centra pro správu Microsoft Entra alespoň jako Vývojář aplikací.

2. Pokud máte přístup k více tenantům, použijte ikonu Nastavení v horní nabídce pro přepnutí na externího tenanta z nabídky Adresáře a předplatná.

3. Přejděte na Identity>Aplikace>Registrace aplikací.

4. Vyberte + Nová registrace.

5. Na stránce Zaregistrujte aplikaci, která se zobrazí;

   1. Zadejte smysluplnou aplikaci Název, která se zobrazí uživatelům aplikace, například ciam-client-app .
   2. V části Podporované typy účtůvyberte Účty pouze v tomto organizačním adresáři.

6. Vyberte Zaregistrovat.

7. Po úspěšné registraci se zobrazí podokno Přehled aplikace . Poznamenejte si ID aplikace (klienta), které se má použít ve zdrojovém kódu aplikace.

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

JavaScriptu

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

1. V části Spravovatvyberte Ověřování.
2. Na stránce konfigurace platformy vyberte možnost Přidat platformua pak vyberte možnost SPA.
3. Pro identifikátory URI přesměrování zadejte http://localhost:3000.
4. Výběrem Konfigurovat uložte změny.

React

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 pro přesměrování do zadejte http://localhost:3000.
4. Pro uložení změn zvolte možnost Konfigurovat.

Angular

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 identifikátory URI přesměrování zadejte http://localhost:4200.
4. Výběrem Konfigurovat uložte změny.

Udělení souhlasu správce

Po registraci aplikace se přiřadí oprávnění User.Read. Vzhledem k tomu, že je tenant externím tenantem, nemohou uživatelé zákazníka sami s tímto oprávněním souhlasit. Jako správce tenanta musíte souhlasit s tímto oprávněním jménem všech uživatelů v tenantovi:

1. Na stránce Registrace aplikací vyberte aplikaci, kterou jste vytvořili (například ciam-client-app), a otevřete tak její stránku Přehled.

2. V části Spravovatvyberte oprávnění rozhraní API.

   1. Vyberte Udělit souhlas správce pro <název vašeho tenanta>a poté vyberte Ano.
   2. Vyberte Aktualizovata ověřte, že uděleno <název vašeho tenanta> se zobrazí v části Stav oprávnění.

Vytvořte tok uživatele

Aby zákazníci viděli zkušenost registrace nebo přihlašování, když používají vaši aplikaci, musíte aplikaci přidružit k uživatelskému toku. I když k toku uživatele může být přidruženo mnoho aplikací, jedna aplikace může být přidružena pouze k jednomu toku uživatele.

1. V nabídce bočního panelu vyberte Identity.

2. Vyberte Externí identity, pak uživatelské toky.

3. Na stránce Toky uživatelů vyberte název toku uživatele, který jste vytvořili dříve, například SignInSignUpSample.

4. V části Použitívyberte Aplikace.

5. Vyberte Přidataplikace .

6. Vyberte aplikaci ze seznamu, například ciam-client-app nebo pomocí vyhledávacího pole vyhledejte aplikaci a pak ji vyberte.

7. Zvolte Vybrat.

Jakmile aplikaci přidružíte k toku uživatele, můžete tok uživatele otestovat simulací registrace nebo přihlašování uživatele k aplikaci z Centra pro správu Microsoft Entra. Chcete-li to provést, použijte postupy v otestujte tok uživatelské registrace a přihlášení.

Přiřaďte SPA k uživatelskému toku

Aby zákazníci viděli prostředí registrace nebo přihlášení při použití vaší aplikace, musíte aplikaci přidružit k uživatelskému toku. I když k toku uživatele může být přidruženo mnoho aplikací, jedna aplikace může být přidružena pouze k jednomu toku uživatele.

1. V nabídce bočního panelu vyberte Identity.

2. Vyberte Externí identity, potom Toky uživatelů.

3. Na stránce Toky uživatelů vyberte název toku uživatele, který jste vytvořili dříve, například SignInSignUpSample.

4. V části Pomocívyberte Aplikace.

5. Vyberte Přidat aplikaci.

6. Vyberte aplikaci ze seznamu, například ciam-client-app nebo pomocí vyhledávacího pole vyhledejte aplikaci a pak ji vyberte.

7. Zvolte Vybrat.

Jakmile aplikaci přidružíte k toku uživatele, můžete tok uživatele otestovat simulací registrace nebo přihlašování uživatele k aplikaci z Centra pro správu Microsoft Entra. Použijte postup uvedený v k otestování toku registrace a přihlášení.

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

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

JavaScript

• 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
  

• Stáhnout ukázkovou verzi. Extrahujte ho do cesty k souboru, kde délka názvu je menší než 260 znaků.

React

• 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
  

• Stáhnout ukázku. Extrahujte ho do cesty k souboru, kde délka názvu je menší než 260 znaků.

Angular

• 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
  

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

Nakonfigurujte ukázkovou SPA

JavaScriptu

1. Otevřete App/public/authConfig.js a nahraďte následující hodnoty hodnotami získanými z Centra pro správu Microsoft Entra:

   • Enter_the_Application_Id_Here a nahraďte ho ID aplikace (klienta), kterou jste zaregistrovali dříve.
   • Enter_the_Tenant_Subdomain_Here a nahraďte ji subdoménou Directory (tenant). Pokud je například primární doména vašeho tenanta contoso.onmicrosoft.com, použijte contoso. Pokud nemáte název nájemce, zjistěte, jak si zobrazit podrobnosti o nájemci.

2. Uložte soubor.

React

1. Otevřete SPA\src\authConfig.js a nahraďte následující hodnoty hodnotami získanými z Centra pro správu Microsoft Entra:

   • Enter_the_Application_Id_Here, a nahraďte ho ID aplikace (klienta), kterou jste zaregistrovali dříve.
   • Enter_the_Tenant_Subdomain_Here a nahraďte tuto hodnotu subdoménou adresáře (nájemce). Pokud je například primární doména vašeho tenanta contoso.onmicrosoft.com, použijte contoso. Pokud nemáte název tenanta, přečtěte si, jak přečíst podrobnosti o tenantovi.

2. Uložte soubor.

Angular

1. Otevřete SPA/src/app/auth-config.ts a nahraďte následující hodnoty hodnotami získanými z Centra pro správu Microsoft Entra:

   • Enter_the_Application_Id_Here a nahraďte ho ID aplikace (klienta) té aplikace, kterou jste zaregistrovali dříve.
   • Enter_the_Tenant_Subdomain_Here a nahraďte ji subdoménou nájemce (adresáře). Pokud je například primární doména vašeho tenanta contoso.onmicrosoft.com, použijte contoso. Pokud nemáte jméno tenanta, zjistěte, jak získat podrobnosti o tenantovi .

2. Uložte soubor.

Spusťte projekt a přihlaste se

JavaScriptu

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

   cd 1-Authentication\0-sign-in-vanillajs\App
   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 anonymní relaci (režim) prohlížeče.

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

4. 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.

   

React

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

   cd 1-Authentication\1-sign-in-react\SPA
   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 relaci nebo anonymní režim prohlížeče.

3. Přihlaste se s pomocí účtu zaregistrovaného u externího nájemce.

4. 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.

Angular

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

   cd 1-Authentication\2-sign-in-angular\SPA
   npm install
   npm start
   

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

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

4. 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 na stránce tlačítko Odhlásit se 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.

Související obsah

• rychlý start : Ochrana webového rozhraní API ASP.NET Core pomocí platformy Microsoft Identity Platform.
• Získejte více informací tím, že vytvoříte React SPA, které přihlašuje uživatele v kurzech v následující vícedílné sérii.
• Povolitresetování hesla .
• Přizpůsobit výchozí značku.
• Konfigurace přihlášení pomocí Google.