Szybki start: logowanie użytkowników w jednostronicowej aplikacji (SPA) i wywoływanie interfejsu API programu Microsoft Graph

W tym szybkim przewodniku użyjesz przykładowej aplikacji typu jednostronicowego (SPA), aby pokazać, jak logować użytkowników przy użyciu przepływu autoryzacji za pomocą kodu i z kluczem weryfikacyjnym dla wymiany kodu (PKCE) i wywoływać interfejs API Microsoft Graph. W przykładzie użyto biblioteki Microsoft Authentication Library do obsługi uwierzytelniania.

Warunki wstępne

• Konto platformy Azure z aktywną subskrypcją. Jeśli jeszcze go nie masz, Utwórz konto bezpłatnie.
• To konto platformy Azure musi mieć uprawnienia do zarządzania aplikacjami. Każda z następujących ról firmy Microsoft Entra obejmuje wymagane uprawnienia:
  • Administrator aplikacji
  • Deweloper aplikacji
  • Administrator aplikacji w chmurze
• Najemca zasobów pracowniczych. Możesz użyć katalogu domyślnego lub skonfigurować nowego najemcę .
• programu Visual Studio Code lub innego edytora kodu.

• Zarejestruj nową aplikację w centrum administracyjnym Microsoft Entra przy użyciu następującej konfiguracji i zarejestruj jej identyfikatory ze strony Przegląd aplikacji . Aby uzyskać więcej informacji, zobacz Rejestrowanie aplikacji.
  • Nazwa: identity-client-spa
  • Obsługiwane typy kont: konta w tym katalogu organizacyjnym (jednodzierżawca)
  • Konfiguracja platformy: aplikacja jednostronicowa (SPA)
  • identyfikator URI przekierowania: http://localhost:3000/
• Node.js

Reagować

• Zarejestruj nową aplikację w centrum administracyjnym Microsoft Entra przy użyciu następującej konfiguracji i zanotuj jej identyfikatory ze strony Przegląd aplikacji oraz Przegląd aplikacji. Aby uzyskać więcej informacji, zobacz Zarejestruj aplikację.
  • Nazwa: identity-client-spa
  • Obsługiwane typy kont: Konta w tym katalogu organizacyjnym (pojedynczy dzierżawca)
  • Konfiguracja platformy: aplikacja jednostronicowa (SPA)
  • URI przekierowania: http://localhost:3000/
• Node.js

Angular

• Zarejestruj nową aplikację w portalu administracyjnym Microsoft Entra, korzystając z poniższej konfiguracji, a następnie zanotuj jej identyfikatory na stronie Przegląd aplikacji i Przegląd aplikacji. Aby uzyskać więcej informacji, zobacz stronę Zarejestruj aplikację.
  • Nazwa: identity-client-spa
  • Obsługiwane typy kont: konta w tym katalogu organizacyjnym (tylko jedna dzierżawa)
  • Konfiguracja platformy: aplikacja jednostronicowa (SPA)
  • identyfikator URI przekierowania: http://localhost:4200/
• Node.js

• Zarejestruj nową aplikację w centrum administracyjnym Microsoft Entra przy użyciu następującej konfiguracji i zarejestruj swoje identyfikatory ze strony Przegląd aplikacji i zarejestruj swoje identyfikatory ze strony Przegląd aplikacji. Aby uzyskać więcej informacji, zobacz Rejestrowanie aplikacji.
  • Nazwa: identity-client-spa
  • Obsługiwane typy kont: Konta w tym katalogu organizacyjnym (Pojedynczy dzierżawca)
  • Konfiguracja platformy: aplikacja jednostronicowa (SPA)
  • identyfikator URI przekierowania: http://localhost:5000/authentication/login-callback.
• zestawu SDK platformy .NET

Klonowanie lub pobieranie przykładowej aplikacji

Aby uzyskać przykładową aplikację, możesz ją sklonować z usługi GitHub lub pobrać jako plik .zip.

• Aby sklonować przykład, otwórz wiersz polecenia i przejdź do miejsca, w którym chcesz utworzyć projekt, a następnie wprowadź następujące polecenie:

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

• pobierz plik .zip. Wyodrębnij go do ścieżki pliku, w której długość nazwy jest mniejsza niż 260 znaków.

React

• Aby sklonować przykład, otwórz wiersz polecenia i przejdź do miejsca, w którym chcesz utworzyć projekt, a następnie wprowadź następujące polecenie:

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

• pobierz plik .zip. Wyodrębnij go do ścieżki pliku, w której długość nazwy jest mniejsza niż 260 znaków.

Angular

• Aby sklonować przykład, otwórz wiersz polecenia i przejdź do miejsca, w którym chcesz utworzyć projekt, a następnie wprowadź następujące polecenie:

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

• pobierz plik .zip. Wyodrębnij go do ścieżki pliku, w której długość nazwy jest mniejsza niż 260 znaków.

• Aby sklonować przykład, otwórz wiersz polecenia i przejdź do miejsca, w którym chcesz utworzyć projekt, a następnie wprowadź następujące polecenie:

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

• pobierz plik .zip. Wyodrębnij go do ścieżki pliku, w której długość nazwy jest mniejsza niż 260 znaków.

Konfigurowanie projektu

1. W środowisku IDE otwórz folder projektu, ms-identity-docs-code-javascript, zawierający przykład.

2. Otwórz vanillajs-spa/App/public/authConfig.js i zaktualizuj następujące wartości przy użyciu informacji zarejestrowanych w centrum administracyjnym.

   /**
    * 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
    */
   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 — identyfikator aplikacji, nazywany również klientem. Zastąp tekst w cudzysłowach wartością Identyfikator aplikacji (klienta), która została zarejestrowana wcześniej.
   • authority — autorytet jest adresem URL wskazującym katalog, z którego MSAL może żądać tokenów. Zastąp Enter_the_Tenant_Info_Here wartością ID klienta Directory (tenant), która została zarejestrowana wcześniej.
   • redirectUri — identyfikator URI przekierowania aplikacji. W razie potrzeby zastąp tekst w cudzysłowach identyfikatorem URI przekierowania, który został zarejestrowany wcześniej.

React

1. W środowisku IDE otwórz folder projektu, ms-identity-docs-code-javascript/react-spa, zawierające przykład.

2. Otwórz react-spa/src/authConfig.js i zaktualizuj następujące wartości przy użyciu informacji zarejestrowanych w centrum administracyjnym.

   /*
    * 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 — identyfikator aplikacji, nazywany również klientem. Zastąp tekst w cudzysłowach wartością Identyfikator aplikacji (klienta), która została zarejestrowana wcześniej.
   • authority — Adres URL autoryzacji wskazuje katalog, z którego biblioteka MSAL może żądać tokenów. Zastąp wartość Enter_the_Tenant_Info_Here identyfikatorem usługi Directory (dzierżawa), która została zarejestrowana wcześniej.
   • redirectUri — adres URI przekierowania aplikacji . W razie potrzeby zastąp tekst w cudzysłowie adresem URI przekierowania, który został zapisany wcześniej.

Angular

1. W środowisku IDE otwórz folder projektu, ms-identity-docs-code-javascript/angular-spa, zawierające przykład.

2. Otwórz angular-spa/src/app/app.module.ts i zaktualizuj następujące wartości przy użyciu informacji zarejestrowanych w centrum administracyjnym.

   // 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 — identyfikator aplikacji, nazywany również klientem. Zastąp tekst w cudzysłowach wartością identyfikatora aplikacji (klienta), którą zapisano wcześniej.
   • authority — Autorytet jest adresem URL wskazującym katalog, z którego biblioteka MSAL może żądać tokenów. Zastąp Enter_the_Tenant_Info_Here wartością identyfikatora Directory (tenant) ID, która została zapisano wcześniej.
   • redirectUri — identyfikator URI przekierowania aplikacji. W razie potrzeby zastąp tekst w cudzysłowach adresem URI przekierowania, który został zarejestrowany wcześniej.

1. W środowisku IDE otwórz folder projektu, ms-identity-docs-code-dotnet/spa-blazor-wasm, zawierające przykład.

2. Otwórz spa-blazor-wasm/wwwroot/appsettings.json i zaktualizuj następujące wartości przy użyciu informacji zarejestrowanych wcześniej w centrum administracyjnym.

   {
     "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 — autorytet jest adresem URL wskazującym katalog, z którego MSAL może żądać tokenów. Zastąp Enter_the_Tenant_Info_Here wartością identyfikatora Directory (tenant), zapisanej wcześniej.
   • ClientId — identyfikator aplikacji, nazywany również klientem. Zastąp tekst w cudzysłowach wartością identyfikatora aplikacji (klienta) , która została zarejestrowana wcześniej.

Uruchamianie aplikacji i logowanie się i wylogowywanie

Uruchom projekt z serwerem internetowym przy użyciu Node.js:

1. Aby uruchomić serwer, uruchom następujące polecenia z poziomu katalogu projektu:

   cd vanillajs-spa/App
   npm install
   npm start
   

2. Skopiuj adres URL https wyświetlany w terminalu, na przykład https://localhost:3000i wklej go w przeglądarce. Zalecamy używanie prywatnej lub incognito sesji przeglądarki.

3. Wykonaj kroki i wprowadź niezbędne szczegóły, aby zalogować się przy użyciu konta Microsoft. Zażądasz adresu e-mail, aby można było wysłać do Ciebie jednorazowy kod dostępu. Wprowadź kod po wyświetleniu monitu.

4. Aplikacja zażąda uprawnień do utrzymania dostępu do danych, do których udzielono mu dostępu, oraz do zalogowania się i odczytania profilu. Wybierz pozycję Zaakceptuj. Został wyświetlony poniższy zrzut ekranu wskazujący, że zalogowałeś się do aplikacji i uzyskałeś dostęp do szczegółów profilu z interfejsu API Microsoft Graph.

   

React

Uruchom projekt z serwerem internetowym przy użyciu Node.js:

1. Aby uruchomić serwer, uruchom następujące polecenia z poziomu katalogu projektu:

   cd react-spa/App
   npm install
   npm start
   

2. Skopiuj adres URL https wyświetlany w terminalu, na przykład https://localhost:3000i wklej go w przeglądarce. Zalecamy używanie prywatnej lub incognito sesji przeglądarki.

3. Wykonaj kroki i wprowadź niezbędne szczegóły, aby zalogować się przy użyciu konta Microsoft. Zażądano adresu e-mail, aby można było wysłać do Ciebie jednorazowy kod dostępu. Wprowadź kod po wyświetleniu monitu.

4. Aplikacja żąda uprawnień do utrzymania dostępu do danych, do których udzielono mu dostępu, oraz do zalogowania się i odczytania profilu. Wybierz pozycję Zaakceptuj. Pojawi się poniższy zrzut ekranu, wskazujący, że zalogowano się do aplikacji i uzyskano dostęp do informacji o profilu z interfejsu API Microsoft Graph.

   

Angular

Uruchom projekt z serwerem internetowym przy użyciu Node.js:

1. Aby uruchomić serwer, uruchom następujące polecenia z poziomu katalogu projektu:

   cd angular-spa/App
   npm install
   npm start
   

2. Skopiuj adres URL https wyświetlany w terminalu, na przykład https://localhost:4200i wklej go na pasku adresu przeglądarki. Zalecamy używanie prywatnej lub incognito sesji przeglądarki.

3. Wykonaj kroki i wprowadź niezbędne szczegóły, aby zalogować się przy użyciu konta Microsoft. Zażądasz adresu e-mail, aby można było wysłać do Ciebie jednorazowy kod dostępu. Wprowadź kod po wyświetleniu monitu.

4. Aplikacja zażąda uprawnień do utrzymania dostępu do danych, do których udzielono mu dostępu, oraz do zalogowania się i odczytania profilu. Wybierz pozycję Zaakceptuj. Zostanie wyświetlony poniższy zrzut ekranu, wskazujący, że zalogowano się do aplikacji i uzyskano dostęp do szczegółów profilu z interfejsu API programu Microsoft Graph.

   

Uruchom projekt z serwerem internetowym, używając polecenia dotnet:

1. Aby uruchomić serwer, uruchom następujące polecenia z poziomu katalogu projektu:

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

2. Skopiuj adres URL http wyświetlany w terminalu, na przykład http://localhost:5000i wklej go w przeglądarce. Zalecamy używanie prywatnej lub incognito sesji przeglądarki.

3. Wykonaj kroki i wprowadź niezbędne szczegóły, aby zalogować się przy użyciu konta Microsoft. Zażądasz adresu e-mail, aby można było wysłać do Ciebie jednorazowy kod dostępu. Wprowadź kod po wyświetleniu monitu.

4. Aplikacja zażąda uprawnień do utrzymania dostępu do danych, do których udzielono mu dostępu, oraz do zalogowania się i odczytania profilu. Wybierz pozycję Zaakceptuj. Zostanie wyświetlony poniższy zrzut ekranu, wskazujący, że zalogowałeś się/zalogowałaś się do aplikacji i uzyskałeś/uzyskałaś dostęp do szczegółów swojego profilu z Microsoft Graph API.

   

Warunki wstępne

• Konto platformy Azure z aktywną subskrypcją. Jeśli jeszcze go nie masz, Utwórz konto bezpłatnie.
• To konto platformy Azure musi mieć uprawnienia do zarządzania aplikacjami. Każda z następujących ról firmy Microsoft Entra obejmuje wymagane uprawnienia:
  • Administrator aplikacji
  • Deweloper aplikacji
  • Administrator aplikacji w chmurze
• Zewnętrzny najemca. Aby go utworzyć, wybierz jedną z następujących metod:
  • Użyj rozszerzenia Microsoft Entra External ID, aby skonfigurować zewnętrzny tenant bezpośrednio w programie Visual Studio Code. (zalecane)
  • Utwórz nową dzierżawę zewnętrzną w centrum administracyjnym firmy Microsoft Entra.
• Przepływ użytkownika. Aby uzyskać więcej informacji, zobacz tworzenie przepływów użytkowników rejestracji samoobsługowej dla aplikacji w dzierżawach zewnętrznych. Ten przepływ użytkownika może być używany dla wielu aplikacji.
• Visual Studio Code lub inny edytor kodu.

• Zarejestruj nową aplikację w centrum administracyjnym Microsoft Entra, używając następującej konfiguracji, i zanotuj jej identyfikatory ze strony Przegląd aplikacji . Aby uzyskać więcej informacji, zobacz Rejestrowanie aplikacji.
  • Nazwa: identity-client-spa
  • Obsługiwane typy kont: konta w tym katalogu organizacyjnym (tylko jedna dzierżawa)
  • Konfiguracja platformy: aplikacja jednostronicowa (SPA)
  • URI przekierowania: http://localhost:3000/
• Dodaj aplikację do przepływu użytkownika
• Node.js

React

• Zarejestruj nową aplikację w centrum administracyjnym Microsoft Entra, używając następującej konfiguracji, i zanotuj jej identyfikatory ze strony Przegląd aplikacji. Aby uzyskać więcej informacji, zobacz Rejestrowanie aplikacji.
  • Nazwa: identity-client-spa
  • Obsługiwane typy kont: konta w tym katalogu organizacyjnym (tylko jedna dzierżawa)
  • Konfiguracja platformy: aplikacja jednostronicowa (SPA)
  • URI przekierowania: http://localhost:3000/
• Dodaj aplikację do przepływu użytkownika
• Node.js

Angular

• Zarejestruj nową aplikację w centrum administracyjnym Microsoft Entra, korzystając z następującej konfiguracji, i zanotuj jej identyfikatory ze strony Przegląd aplikacji . Aby uzyskać więcej informacji, zobacz Rejestrowanie aplikacji.
  • Nazwa: identity-client-spa
  • Obsługiwane typy kont: konta w tym katalogu organizacyjnym (tylko jedna dzierżawa)
  • Konfiguracja platformy: aplikacja jednostronicowa (SPA)
  • identyfikator URI przekierowania: http://localhost:4200/
• Dodaj swoją aplikację do przepływu użytkownika
• Node.js

Udzielanie zgody administratora

Po zarejestrowaniu aplikacji zostanie przypisane uprawnienie User.Read. Jednak ponieważ najemca jest zewnętrznym najemcą, sami użytkownicy-klienci nie mogą wyrazić zgody na tę zgodę. Administrator dzierżawy musi wyrazić zgodę na to uprawnienie w imieniu wszystkich użytkowników w dzierżawie:

1. Na stronie rejestracje aplikacji wybierz utworzoną aplikację (taką jak ciam-client-app), aby otworzyć stronę Przegląd.

2. W obszarze Zarządzajwybierz pozycję uprawnienia interfejsu API .

   1. Wybierz Udziel zgody administratora dla <nazwa dzierżawcy>, a następnie wybierz Tak.
   2. Wybierz pozycję Odśwież, a następnie sprawdź, czy udzielono <nazwa dzierżawy> jest wyświetlana w obszarze Stan dla uprawnienia.

Skopiuj lub pobierz przykładową aplikację SPA

Aby uzyskać przykładową aplikację, możesz ją sklonować z usługi GitHub lub pobrać jako plik .zip.

• Aby sklonować przykład, otwórz wiersz polecenia i przejdź do miejsca, w którym chcesz utworzyć projekt, a następnie wprowadź następujące polecenie:

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

• Pobierz przykładowy. Wyodrębnij go do ścieżki pliku, w której długość nazwy jest mniejsza niż 260 znaków.

React

• Aby sklonować przykład, otwórz wiersz polecenia i przejdź do miejsca, w którym chcesz utworzyć projekt, a następnie wprowadź następujące polecenie:

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

• Pobierz przykładowy. Wyodrębnij go do ścieżki pliku, w której długość nazwy jest mniejsza niż 260 znaków.

Angular

• Aby sklonować przykład, otwórz wiersz polecenia i przejdź do miejsca, w którym chcesz utworzyć projekt, a następnie wprowadź następujące polecenie:

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

• Pobierz próbkę. Wyodrębnij go do ścieżki pliku, w której długość nazwy jest mniejsza niż 260 znaków.

Konfigurowanie przykładowego SPA

1. Otwórz App/public/authConfig.js i zastąp następujące wartości wartościami uzyskanymi z centrum administracyjnego firmy Microsoft Entra:

   • Enter_the_Application_Id_Here i zastąp go identyfikatorem aplikacji (klienta) zarejestrowanej wcześniej.
   • Enter_the_Tenant_Subdomain_Here i zastąp ją poddomeną Katalog (dzierżawa). Jeśli na przykład domena podstawowa dzierżawy jest contoso.onmicrosoft.com, użyj contoso. Jeśli nie masz nazwy najemcy, dowiedz się, jak odczytywać szczegóły najemcy.

2. Zapisz plik.

React

1. Otwórz SPA\src\authConfig.js i zastąp następujące wartości wartościami uzyskanymi z centrum administracyjnego firmy Microsoft Entra:

   • Enter_the_Application_Id_Here i zastąp go identyfikatorem aplikacji (klienta) zarejestrowanej wcześniej.
   • Enter_the_Tenant_Subdomain_Here i zastąp ją poddomeną Katalog (dzierżawa). Na przykład, jeśli podstawowa domena twojej dzierżawy to contoso.onmicrosoft.com, użyj contoso. Jeśli nie masz nazwy dzierżawy, dowiedz się, jak odczytywać szczegóły dzierżawy.

2. Zapisz plik.

Angular

1. Otwórz SPA/src/app/auth-config.ts i zastąp następujące wartości wartościami uzyskanymi z centrum administracyjnego firmy Microsoft Entra:

   • Enter_the_Application_Id_Here i zastąp go identyfikatorem klienckiej aplikacji zarejestrowanej wcześniej.
   • Enter_the_Tenant_Subdomain_Here i zastąp ją poddomeną Katalog (dzierżawa). Jeśli na przykład domena podstawowa dzierżawy jest contoso.onmicrosoft.com, użyj contoso. Jeśli nie masz nazwy dzierżawy, dowiedz się, jak odczytywać szczegóły dzierżawy.

2. Zapisz plik.

Uruchamianie projektu i logowanie

1. Aby uruchomić serwer, uruchom następujące polecenia z poziomu katalogu projektu:

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

2. Skopiuj adres URL https wyświetlany w terminalu, na przykład https://localhost:3000i wklej go w przeglądarce. Zalecamy używanie prywatnej lub incognito sesji przeglądarki.

3. Zaloguj się przy użyciu konta zarejestrowanego dla dzierżawcy.

4. Zostanie wyświetlony poniższy zrzut ekranu, wskazujący, że zalogowano się do aplikacji i uzyskano dostęp do szczegółów profilu z interfejsu API Microsoft Graph.

   

React

1. Aby uruchomić serwer, uruchom następujące polecenia z poziomu katalogu projektu:

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

2. Skopiuj adres URL https wyświetlany w terminalu, na przykład https://localhost:3000i wklej go w przeglądarce. Zalecamy używanie prywatnej lub incognito sesji przeglądarki.

3. Zaloguj się, używając konta zarejestrowanego u zewnętrznego dzierżawcy.

4. Zostanie wyświetlony poniższy zrzut ekranu wskazujący, że zalogowano się do aplikacji i uzyskano dostęp do szczegółów profilu z Microsoft Graph API.

Angular

1. Aby uruchomić serwer, uruchom następujące polecenia z poziomu katalogu projektu:

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

2. Skopiuj adres URL https wyświetlany w terminalu, na przykład https://localhost:4200i wklej go w przeglądarce. Zalecamy używanie prywatnej lub incognito sesji przeglądarki.

3. Zaloguj się, używając konta zarejestrowanego u zewnętrznego dzierżawcy.

4. Zostanie wyświetlony poniższy zrzut ekranu, wskazujący, że zalogowano się do aplikacji i uzyskano dostęp do szczegółów profilu za pomocą interfejsu API usługi Microsoft Graph.

   

Wyloguj się z aplikacji

1. Znajdź przycisk Wyloguj się na stronie i wybierz go.
2. Zostanie wyświetlony monit o wybranie konta do wylogowania. Wybierz konto użyte do zalogowania się.

Zostanie wyświetlony komunikat z informacją o wylogowaniach. Teraz możesz zamknąć okno przeglądarki.

Powiązana zawartość

• Szybki start: ochrona internetowego interfejsu API platformy ASP.NET Core przy użyciu platformy tożsamości firmy Microsoft.
• Dowiedz się więcej, tworząc React SPA, które loguje użytkowników w następującej serii samouczków składającej się z kilku części.
• Włącz resetowanie haseł.
• Dostosuj domyślne znakowanie.
• Konfigurowanie logowania przy użyciu usługi Google.