Rövid útmutató: Jelentkezzen be felhasználóként egyetlen oldalas alkalmazásban (SPA), és használja a Microsoft Graph API-t.

A következőkre vonatkozik:Munkaerő-bérlők Külső bérlők (további információ)

Ebben a gyorsútmutatóban bemutatjuk, hogyan lehet bejelentkeztetni a felhasználókat egy minta egyoldalas alkalmazás (SPA) segítségével a engedélyezési kódfolyamat és a Kódcseréhez használt hitelesítési kulcs (PKCE) alkalmazásával, valamint hogyan érhető el a Microsoft Graph API. A minta a Microsoft Authentication Library használatával kezeli a hitelesítést.

Előfeltételek

• Aktív előfizetéssel rendelkező Azure-fiók. Ha még nem rendelkezik ilyen fiókkal, hozzon létre egy fiókot ingyenes.
• Ennek az Azure-fióknak rendelkeznie kell az alkalmazások kezeléséhez szükséges engedélyekkel. Az alábbi Microsoft Entra-szerepkörök bármelyike tartalmazza a szükséges engedélyeket:
  • Alkalmazásadminisztrátor
  • Alkalmazásfejlesztő
• Munkaerőt igénybe vevő. Használhatja az alapértelmezett címtárat, vagy beállíthat egy új bérlőt.
• Visual Studio Code vagy más kódszerkesztő.

JavaScript

• Regisztráljon egy új alkalmazást a Microsoft Entra felügyeleti központban, amely csak ebben a szervezeti címtárban lévő fiókokhoz van konfigurálva. További részletekért tekintse meg az alkalmazás regisztrálását . Jegyezze fel a következő értékeket az alkalmazás áttekintési oldaláról későbbi használatra:
  • Alkalmazás (ügyfél) azonosítója
  • Címtár (ügyfél) azonosítója
• Adja hozzá az alábbi átirányítási URI-kat az egyoldalas alkalmazásplatform konfigurációjának használatával. Tekintse meg a Hogyan adható hozzá egy átirányítási URI az alkalmazásban című részt további részletekért.
  • Átirányítási URI: http://localhost:3000/
• Node.js

Reagál

• Regisztráljon egy új alkalmazást a Microsoft Entra felügyeleti központban, amely csak ebben a szervezeti címtárban lévő fiókokhoz van konfigurálva. További részletekért tekintse meg az alkalmazás regisztrálását . Jegyezze fel a következő értékeket az alkalmazás áttekintési oldaláról későbbi használatra:
  • Alkalmazás (ügyfél) azonosítója
  • Címtár (ügyfél) azonosítója
• Adja hozzá az alábbi átirányítási URI-kat az egyoldalas alkalmazásplatform konfigurációjának használatával. Tekintse meg a Hogyan adható hozzá egy átirányítási URI az alkalmazásban című részt további részletekért.
  • Átirányítási URI: http://localhost:3000/
• Node.js

Szögletes

• Regisztráljon egy új alkalmazást a Microsoft Entra felügyeleti központban, amely csak ebben a szervezeti címtárban lévő fiókokhoz van konfigurálva. További részletekért tekintse meg az alkalmazás regisztrálását . Jegyezze fel a következő értékeket az alkalmazás áttekintési oldaláról későbbi használatra:
  • Alkalmazás (ügyfél) azonosítója
  • Címtár (ügyfél) azonosítója
• Adja hozzá az alábbi átirányítási URI-t az egyoldalas alkalmazásplatform konfigurációjának használatával. Tekintse meg a Hogyan adható hozzá egy átirányítási URI az alkalmazásban című részt további részletekért.
  • Átirányítási URI: http://localhost:4200/
• Node.js

Blazor

• Regisztráljon egy új alkalmazást a Microsoft Entra felügyeleti központban, amely csak ebben a szervezeti címtárban lévő fiókokhoz van konfigurálva. További részletekért tekintse meg az alkalmazás regisztrálását . Jegyezze fel a következő értékeket az alkalmazás áttekintési oldaláról későbbi használatra:
  • Alkalmazás (ügyfél) azonosítója
  • Címtár (ügyfél) azonosítója
• Adja hozzá az alábbi átirányítási URI-kat az egyoldalas alkalmazásplatform konfigurációjának használatával. Tekintse meg a Hogyan adható hozzá egy átirányítási URI az alkalmazásban című részt további részletekért.
  • Átirányítási URI: http://localhost:5000/authentication/login-callback.
• .NET SDK

A mintaalkalmazás klónozása vagy letöltése

A mintaalkalmazás beszerzéséhez klónozhatja a GitHubról, vagy letöltheti .zip fájlként.

JavaScript

• A minta klónozásához nyisson meg egy parancssort, navigáljon ahhoz a helyhez, ahol létre kívánja hozni a projektet, majd írja be a következő parancsot:

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

• Töltse le a .zip fájlt. Helyezze el egy olyan elérési útra, ahol a fájlnév hossza kevesebb, mint 260 karakter.

Reagál

• A minta klónozásához nyisson meg egy parancssort, navigáljon ahhoz a helyhez, ahol létre kívánja hozni a projektet, majd írja be a következő parancsot:

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

• Töltse le a .zip fájlt. Helyezze el egy olyan elérési útra, ahol a fájlnév hossza kevesebb, mint 260 karakter.

Szögletes

• A minta klónozásához nyisson meg egy parancssort, navigáljon ahhoz a helyhez, ahol létre kívánja hozni a projektet, majd írja be a következő parancsot:

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

• Töltse le a .zip fájlt. Helyezze el egy olyan elérési útra, ahol a fájlnév hossza kevesebb, mint 260 karakter.

Blazor

• A minta klónozásához nyisson meg egy parancssort, navigáljon ahhoz a helyhez, ahol létre kívánja hozni a projektet, majd írja be a következő parancsot:

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

• Töltse le a .zip fájlt. Helyezze el egy olyan elérési útra, ahol a fájlnév hossza kevesebb, mint 260 karakter.

A projekt konfigurálása

JavaScript

1. Az IDE-ben nyissa meg a mintát tartalmazó projektmappát, ms-identity-docs-code-javascript.

2. Nyissa meg vanillajs-spa/App/public/authConfig.js, és frissítse a következő értékeket a felügyeleti központban rögzített információkkal.

   /**
    * 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 – Az alkalmazás azonosítója, más néven az ügyfél. Cserélje le az idézőjelek szövegét a korábban rögzített alkalmazás (ügyfél) azonosító értékével.
   • authority – A hatóság egy olyan URL-cím, amely egy könyvtárat jelöl, ahonnan az MSAL jogkivonatokat kérhet. Cserélje le a Enter_the_Tenant_Info_Here a korábban rögzített könyvtár (bérlő) azonosítóra.
   • redirectUri – Az alkalmazás átirányítási URI-ja . Szükség esetén cserélje le az idézőjelek szövegét a korábban rögzített átirányítási URI-ra.

Reagál

1. Az IDE-ben nyissa meg a mintát tartalmazó projektmappát, ms-identity-docs-code-javascript/react-spa.

2. Nyissa meg react-spa/src/authConfig.js, és frissítse a következő értékeket a felügyeleti központban rögzített információkkal.

   /*
    * 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 – Az alkalmazás azonosítója, más néven az ügyfél. Cserélje le az idézőjelek szövegét a korábban rögzített alkalmazás (ügyfél) azonosító értékével.
   • authority – A hatóság egy olyan URL-cím, amely egy könyvtárat jelöl, ahonnan az MSAL jogkivonatokat kérhet. Cserélje le a Enter_the_Tenant_Info_Here a korábban rögzített könyvtár (bérlő) azonosítóra.
   • redirectUri – Az alkalmazás átirányítási URI-ja . Szükség esetén cserélje le az idézőjelek szövegét a korábban rögzített átirányítási URI-ra.

Szögletes

1. Nyissa meg az IDE-ben az ms-identity-docs-code-javascript/angular-spa nevű projektmappát, amely tartalmazza a mintát.

2. Nyissa meg angular-spa/src/app/app.module.ts, és frissítse a következő értékeket a felügyeleti központban rögzített információkkal.

   // 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 – Az alkalmazás azonosítója, más néven az ügyfél. Cserélje le az idézőjelek szövegét a korábban rögzített alkalmazás (ügyfél) azonosító értékével.
   • authority – A hatóság egy olyan URL-cím, amely egy könyvtárat jelöl, ahonnan az MSAL jogkivonatokat kérhet. Cserélje le a Enter_the_Tenant_Info_Here a korábban rögzített könyvtár (bérlő) azonosítóra.
   • redirectUri – Az alkalmazás átirányítási URI-ja . Szükség esetén cserélje le az idézőjelek szövegét a korábban rögzített átirányítási URI-ra.

Blazor

1. Az IDE-ben nyissa meg az ms-identity-docs-code-dotnet/spa-blazor-wasm nevű projektmappát, amely tartalmazza a mintát.

2. Nyissa meg spa-blazor-wasm/wwwroot/appsettings.json, és frissítse a következő értékeket a felügyeleti központban korábban rögzített információkkal.

   {
     "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 – A hatóság egy olyan URL-cím, amely egy könyvtárat jelöl, ahonnan az MSAL jogkivonatokat kérhet. Cserélje le a Enter_the_Tenant_Info_Here a korábban rögzített könyvtár (bérlő) azonosítóra.
   • ClientId – Az alkalmazás azonosítója, más néven az ügyfél. Cserélje le az idézőjelek szövegét a korábban rögzített alkalmazás (ügyfél) azonosító értékével.

Az alkalmazás futtatása és bejelentkezés és kijelentkezés

JavaScript

Futtassa a projektet egy webszerverrel a Node.jshasználatával:

1. A kiszolgáló elindításához futtassa a következő parancsokat a projektkönyvtárból:

   cd vanillajs-spa/App
   npm install
   npm start
   

2. Másolja ki a terminálban megjelenő https URL-címet( például https://localhost:3000), és illessze be egy böngészőbe. Javasoljuk, hogy privát vagy inkognitó böngésző munkamenetet használjon.

3. Kövesse a lépéseket, és adja meg a microsoftos fiókjával való bejelentkezéshez szükséges adatokat. A rendszer egy e-mail-címet kér, hogy egyszeri pin-kód legyen elküldve Önnek. Amikor a rendszer kéri, adja meg a kódot.

4. Az alkalmazás engedélyt kér a hozzáférés fenntartásához azokhoz az adatokhoz, amelyekhez hozzáférést adott, valamint hogy bejelentkezhessen, és elolvassa a profilját. Válassza Elfogadáslehetőséget. Megjelenik a következő képernyőkép, amely azt jelzi, hogy bejelentkezett az alkalmazásba, és a Microsoft Graph API-ból fért hozzá a profiladataihoz.

   

Reagál

Futtassa a projektet egy webszerverrel a Node.jshasználatával:

1. A kiszolgáló elindításához futtassa a következő parancsokat a projektkönyvtárból:

   cd react-spa
   npm install
   npm start
   

2. Másolja ki a terminálban megjelenő https URL-címet( például https://localhost:3000), és illessze be egy böngészőbe. Javasoljuk, hogy privát vagy inkognitó böngésző munkamenetet használjon.

3. Kövesse a lépéseket, és adja meg a microsoftos fiókjával való bejelentkezéshez szükséges adatokat. A rendszer egy e-mail-címet kér, így egyszeri pin-kód küldhető Önnek. Amikor a rendszer kéri, adja meg a kódot.

4. Az alkalmazás engedélyt kér, hogy fenntartsa a hozzáférést azokhoz az adatokhoz, amelyekhez hozzáférést adott, valamint hogy bejelentkezhessen, és elolvassa a profilját. Válassza Elfogadáslehetőséget. Megjelenik a következő képernyőkép, amely azt jelzi, hogy bejelentkezett az alkalmazásba, és a Microsoft Graph API-ból fért hozzá a profiladataihoz.

   

Szögletes

Futtassa a projektet egy webszerverrel a Node.jshasználatával:

1. A kiszolgáló elindításához futtassa a következő parancsokat a projektkönyvtárból:

   cd angular-spa
   npm install
   npm start
   

2. Másolja ki a terminálban megjelenő https URL-címet( például https://localhost:4200), és illessze be egy böngésző címsorába. Javasoljuk, hogy privát vagy inkognitó böngésző munkamenetet használjon.

3. Kövesse a lépéseket, és adja meg a microsoftos fiókjával való bejelentkezéshez szükséges adatokat. A rendszer egy e-mail-címet kér, hogy egyszeri pin-kód legyen elküldve Önnek. Amikor a rendszer kéri, adja meg a kódot.

4. Az alkalmazás engedélyt kér a hozzáférés fenntartásához azokhoz az adatokhoz, amelyekhez hozzáférést adott, valamint hogy bejelentkezhessen, és elolvassa a profilját. Válassza Elfogadáslehetőséget. Megjelenik a következő képernyőkép, amely azt jelzi, hogy bejelentkezett az alkalmazásba, és a Microsoft Graph API-ból fért hozzá a profiladataihoz.

   

Blazor

Futtassa a projektet egy webkiszolgálóval a dotnet használatával:

1. A kiszolgáló elindításához futtassa a következő parancsokat a projektkönyvtárból:

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

2. Másolja ki a terminálban megjelenő http URL-címet( például http://localhost:5000), és illessze be egy böngészőbe. Javasoljuk, hogy privát vagy inkognitó böngésző munkamenetet használjon.

3. Kövesse a lépéseket, és adja meg a microsoftos fiókjával való bejelentkezéshez szükséges adatokat. A rendszer egy e-mail-címet kér, hogy egyszeri pin-kód legyen elküldve Önnek. Amikor a rendszer kéri, adja meg a kódot.

4. Az alkalmazás engedélyt kér a hozzáférés fenntartásához azokhoz az adatokhoz, amelyekhez hozzáférést adott, valamint hogy bejelentkezhessen, és elolvassa a profilját. Válassza Elfogadáslehetőséget. Megjelenik a következő képernyőkép, amely azt jelzi, hogy bejelentkezett az alkalmazásba, és a Microsoft Graph API-ból fért hozzá a profiladataihoz.

   

Előfeltételek

• Aktív előfizetéssel rendelkező Azure-fiók. Ha még nem rendelkezik ilyen fiókkal, hozzon létre egy fiókot ingyenes.
• Ennek az Azure-fióknak rendelkeznie kell az alkalmazások kezeléséhez szükséges engedélyekkel. Az alábbi Microsoft Entra-szerepkörök bármelyike tartalmazza a szükséges engedélyeket:
  • Alkalmazásadminisztrátor
  • Alkalmazásfejlesztő
• Külső bérlő. A létrehozáshoz válasszon az alábbi módszerek közül:
  • A Microsoft Entra Külső azonosító bővítmény használatával állítson be egy külső bérlőt közvetlenül a Visual Studio Code-ban. (ajánlott)
  • Hozzon létre egy új külső bérlőt a Microsoft Entra Felügyeleti Központban.
• Felhasználói folyamat. További információ: önkiszolgáló regisztrációs felhasználói folyamatok létrehozása külső bérlőkben lévő alkalmazásokhoz. Ez a felhasználói folyamat több alkalmazáshoz is használható.
• Visual Studio Code vagy más kódszerkesztő.

JavaScript

• Regisztráljon egy új alkalmazást a Microsoft Entra felügyeleti központban, amely csak ebben a szervezeti címtárban lévő fiókokhoz van konfigurálva. További részletekért tekintse meg az alkalmazás regisztrálását . Jegyezze fel a következő értékeket az alkalmazás áttekintési oldaláról későbbi használatra:
  • Alkalmazás (ügyfél) azonosítója
  • Címtár (ügyfél) azonosítója
• Adja hozzá az alábbi átirányítási URI-kat az egyoldalas alkalmazásplatform konfigurációjának használatával. Tekintse meg a Hogyan adható hozzá egy átirányítási URI az alkalmazásban című részt további részletekért.
  • Átirányítási URI: http://localhost:3000/
• Alkalmazás hozzáadása a felhasználói folyamathoz
• Node.js

Reagál

• Regisztráljon egy új alkalmazást a Microsoft Entra felügyeleti központban, amely csak ebben a szervezeti címtárban lévő fiókokhoz van konfigurálva. További részletekért tekintse meg az alkalmazás regisztrálását . Jegyezze fel a következő értékeket az alkalmazás áttekintési oldaláról későbbi használatra:
  • Alkalmazás (ügyfél) azonosítója
  • Címtár (ügyfél) azonosítója
• Adja hozzá az alábbi átirányítási URI-kat az egyoldalas alkalmazásplatform konfigurációjának használatával. Tekintse meg a Hogyan adható hozzá egy átirányítási URI az alkalmazásban című részt további részletekért.
  • Átirányítási URI: http://localhost:3000/
• Alkalmazás hozzáadása a felhasználói folyamathoz
• Node.js

Szögletes

• Regisztráljon egy új alkalmazást a Microsoft Entra felügyeleti központban, amely csak ebben a szervezeti címtárban lévő fiókokhoz van konfigurálva. További részletekért tekintse meg az alkalmazás regisztrálását . Jegyezze fel a következő értékeket az alkalmazás áttekintési oldaláról későbbi használatra:
  • Alkalmazás (ügyfél) azonosítója
  • Címtár (ügyfél) azonosítója
• Adja hozzá az alábbi átirányítási URI-kat az egyoldalas alkalmazásplatform konfigurációjának használatával. Tekintse meg a Hogyan adható hozzá egy átirányítási URI az alkalmazásban című részt további részletekért.
  • Átirányítási URI: http://localhost:4200/
• Alkalmazás hozzáadása a felhasználói folyamathoz
• Node.js

Minta SPA klónozása vagy letöltése

A mintaalkalmazás beszerzéséhez klónozhatja a GitHubról, vagy letöltheti .zip fájlként.

JavaScript

• A minta klónozásához nyisson meg egy parancssort, navigáljon ahhoz a helyhez, ahol létre kívánja hozni a projektet, majd írja be a következő parancsot:

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

• Töltse le a minta. Helyezze el egy olyan elérési útra, ahol a fájlnév hossza kevesebb, mint 260 karakter.

Reagál

• A minta klónozásához nyisson meg egy parancssort, navigáljon ahhoz a helyhez, ahol létre kívánja hozni a projektet, majd írja be a következő parancsot:

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

• Töltse le a minta. Helyezze el egy olyan elérési útra, ahol a fájlnév hossza kevesebb, mint 260 karakter.

Szögletes

• A minta klónozásához nyisson meg egy parancssort, navigáljon ahhoz a helyhez, ahol létre kívánja hozni a projektet, majd írja be a következő parancsot:

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

• Töltse le a minta. Helyezze el egy olyan elérési útra, ahol a fájlnév hossza kevesebb, mint 260 karakter.

A minta SPA konfigurálása

JavaScript

1. Nyissa meg a App/public/authConfig.js, és cserélje le a következőket a Microsoft Entra felügyeleti központból beszerzett értékekre:

   • Enter_the_Application_Id_Here és cserélje le a korábban regisztrált alkalmazás (ügyfél) azonosítójára.
   • Enter_the_Tenant_Subdomain_Here és cserélje le a Címtár (tenant) altartományra. Ha például a bérlőd elsődleges doménje contoso.onmicrosoft.com, használja a contoso. Ha nem rendelkezik a bérlő nevével, megtudhatja, hogyan olvasni a bérlő adatait.

2. Mentse a fájlt.

Reagál

1. Nyissa meg a SPA\src\authConfig.js, és cserélje le a következőket a Microsoft Entra felügyeleti központból beszerzett értékekre:

   • Enter_the_Application_Id_Here és cserélje le a korábban regisztrált alkalmazás (ügyfél) azonosítójára.
   • Enter_the_Tenant_Subdomain_Here és cserélje le a Címtár (tenant) altartományra. Ha például a bérlőd elsődleges doménje contoso.onmicrosoft.com, használja a contoso. Ha nem rendelkezik a bérlő nevével, megtudhatja, hogyan olvasni a bérlő adatait.

2. Mentse a fájlt.

Szögletes

1. Nyissa meg a SPA/src/app/auth-config.ts, és cserélje le a következőket a Microsoft Entra felügyeleti központból beszerzett értékekre:

   • Enter_the_Application_Id_Here és cserélje le a korábban regisztrált alkalmazás (ügyfél) azonosítójára.
   • Enter_the_Tenant_Subdomain_Here és cserélje le a Címtár (tenant) altartományra. Ha például a bérlőd elsődleges doménje contoso.onmicrosoft.com, használja a contoso. Ha nem rendelkezik a bérlő nevével, megtudhatja, hogyan olvasni a bérlő adatait.

2. Mentse a fájlt.

A projekt futtatása és bejelentkezés

JavaScript

1. A kiszolgáló elindításához futtassa a következő parancsokat a projektkönyvtárból:

   cd 1-Authentication\0-sign-in-vanillajs\App
   npm install
   npm start
   

2. Másolja ki a terminálban megjelenő https URL-címet( például https://localhost:3000), és illessze be egy böngészőbe. Javasoljuk, hogy privát vagy inkognitó böngésző munkamenetet használjon.

3. Jelentkezzen be a bérlőnél regisztrált fiókkal.

4. Megjelenik a következő képernyőkép, amely azt jelzi, hogy bejelentkezett az alkalmazásba, és a Microsoft Graph API-ból fért hozzá a profiladataihoz.

   

Reagál

1. A kiszolgáló elindításához futtassa a következő parancsokat a projektkönyvtárból:

   cd 1-Authentication\1-sign-in-react\SPA
   npm install
   npm start
   

2. Másolja ki a terminálban megjelenő https URL-címet( például https://localhost:3000), és illessze be egy böngészőbe. Javasoljuk, hogy privát vagy inkognitó böngésző munkamenetet használjon.

3. Bejelentkezés a külső bérlőn regisztrált fiókkal.

4. Megjelenik a következő képernyőkép, amely azt jelzi, hogy bejelentkezett az alkalmazásba, és a Microsoft Graph API-ból fért hozzá a profiladataihoz.

Szögletes

1. A kiszolgáló elindításához futtassa a következő parancsokat a projektkönyvtárból:

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

2. Másolja ki a terminálban megjelenő https URL-címet( például https://localhost:4200), és illessze be egy böngészőbe. Javasoljuk, hogy privát vagy inkognitó böngésző munkamenetet használjon.

3. Bejelentkezés a külső bérlőn regisztrált fiókkal.

4. Megjelenik a következő képernyőkép, amely azt jelzi, hogy bejelentkezett az alkalmazásba, és a Microsoft Graph API-ból fért hozzá a profiladataihoz.

   

Kijelentkezés az alkalmazásból

1. Keresse meg a Kijelentkezés gombot a lapon, és jelölje ki.
2. A rendszer kérni fogja, hogy válasszon ki egy fiókot, amelyből ki szeretne jelentkezni. Válassza ki a bejelentkezéshez használt fiókot.

Megjelenik egy üzenet, amely jelzi, hogy kijelentkezett. Most már bezárhatja a böngészőablakot.

Kapcsolódó tartalom

• Gyors kezdés: Az ASP.NET Core webes API védelme a Microsoft identitásplatformjával.
• Tudj meg többet egy React SPA létrehozása révén, amely a felhasználók számára bejelentkezést biztosít az alábbi többrészes oktatóanyag-sorozatban.
• Jelszó-visszaállítás engedélyezése.
• Az alapértelmezett arculattestreszabja.
• Google-fiókkal történő bejelentkezés konfigurálása.