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

Platí pro: Tenanti pracovních sil Externí tenanti (další informace)

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

• Úč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.

JavaScript

• 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 platformy jednostránkové aplikace. Další podrobnosti najdete v tématu Jak přidat URI pro přesměrování ve vaší aplikaci.
  • URI přesměrování : http://localhost:3000/
• Node.js

Reagovat

• 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 platformy jednostránkové aplikace. Další podrobnosti najdete v tématu Jak přidat URI pro přesměrování ve vaší aplikaci.
  • URI přesměrování : http://localhost:3000/
• Node.js

Úhlový

• 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)
• Pomocí konfigurace jednostrákové aplikační platformy přidejte následující identifikátor URI přesměrování. Další podrobnosti najdete v tématu Jak přidat URI pro přesměrování ve vaší aplikaci.
  • URI přesměrování : http://localhost:4200/
• Node.js

Blazor

• 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 platformy jednostránkové aplikace. Další podrobnosti najdete v tématu Jak přidat URI pro přesměrování ve vaší aplikaci.
  • URI přesměrování : http://localhost:5000/authentication/login-callback.
• .NET SDK

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.

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

• Stáhnout soubor .zip. Rozbalte to do složky s délkou názvu menší než 260 znaků.

Reagovat

• 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. Rozbalte to do složky s délkou názvu menší než 260 znaků.

Úhlový

• 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. Rozbalte to do složky s délkou názvu 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. Rozbalte to do složky s délkou názvu 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: {
            clientId: "Enter_the_Application_Id_Here",
            // 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
    */
   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,
       };
   }
   

   • 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 – 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.

Reagovat

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

Úhlový

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. 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 – 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 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.
   • 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.

JavaScript

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.

   

Reagovat

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

   

Úhlový

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

• Úč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.

JavaScript

• 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 platformy jednostránkové aplikace. Další podrobnosti najdete v tématu Jak přidat URI pro přesměrování ve vaší aplikaci.
  • URI přesměrování : http://localhost:3000/
• Přidání aplikace do toku uživatele
• Node.js

Reagovat

• 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 platformy jednostránkové aplikace. Další podrobnosti najdete v tématu Jak přidat URI pro přesměrování ve vaší aplikaci.
  • URI přesměrování : http://localhost:3000/
• Přidání aplikace do toku uživatele
• Node.js

Úhlový

• 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 platformy jednostránkové aplikace. Další podrobnosti najdete v tématu Jak přidat URI pro přesměrování ve vaší aplikaci.
  • URI přesměrování : http://localhost:4200/
• Přidání aplikace do toku uživatele
• Node.js

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. Rozbalte to do složky s délkou názvu menší než 260 znaků.

Reagovat

• 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. Rozbalte to do složky s délkou názvu menší než 260 znaků.

Úhlový

• 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. Rozbalte to do složky s délkou názvu menší než 260 znaků.

Nakonfigurujte ukázkovou SPA

JavaScript

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.

Reagovat

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

Úhlový

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), 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.

Spusťte projekt a přihlaste se

JavaScript

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 inkognito relaci 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.

   

Reagovat

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 nebo inkognito relaci 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.

Úhlový

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

   

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.