Краткая инструкция: Вход пользователей в одностраничное приложение (SPA) и вызов API Microsoft Graph

В этом кратком руководстве вы используете пример одностраничного приложения (SPA), чтобы показать, как войти пользователям, используя поток кода авторизации с Ключом проверки подлинности кода (PKCE), и вызывать API Microsoft Graph. В этом примере используется библиотека Microsoft Authentication Library для обработки проверки подлинности.

Необходимые условия

• Учетная запись Azure с активной подпиской. Если у вас еще нет учетной записи, Создайте ее бесплатно.
• Эта учетная запись Azure должна иметь разрешения на управление приложениями. Любые из следующих ролей Microsoft Entra включают необходимые разрешения:
  • Администратор приложений
  • Разработчик приложений
  • Администратор облачных приложений
• Арендатор рабочей силы. Вы можете использовать каталог по умолчанию или создать нового клиента.
• Visual Studio Code или другой кодовый редактор.

JavaScript

• Зарегистрируйте новое приложение в Центре администрирования Microsoft Entra со следующей конфигурацией и запишите его идентификаторы на странице обзора приложения. Дополнительные сведения см. в разделе Регистрация приложения.
  • Имя: identity-client-spa
  • Поддерживаемые типы учетных записей: учетные записи в этом каталоге организации (только один клиент)
  • конфигурация платформы: одностраничные приложения (SPA)
  • URI перенаправления: http://localhost:3000/
• Node.js

React

• Зарегистрируйте новое приложение в Центре администрирования Microsoft Entra со следующей конфигурацией и запишите его идентификаторы на странице обзора приложения и на странице обзора приложения . Дополнительные сведения см. в разделе Регистрация приложения.
  • Имя: identity-client-spa
  • Поддерживаемые типы учетных записей: учетные записи в этом каталоге организации (только один клиент)
  • конфигурация платформы: одностраничные приложения (SPA)
  • URI перенаправления: http://localhost:3000/
• Node.js

Ангуляр

• Зарегистрируйте новое приложение в Центре администрирования Microsoft Entra со следующей конфигурацией и запишите его идентификаторы на страницах Обзор приложения и приложения. Дополнительные сведения см. в разделе Регистрация приложения.
  • Имя: identity-client-spa
  • Поддерживаемые типы учетных записей: учетные записи в этом каталоге организации (только для одного арендатора)
  • конфигурация платформы: одностраничные приложения (SPA)
  • URI перенаправления: http://localhost:4200/
• Node.js

Blazor

• Зарегистрируйте новое приложение в Центре администрирования Microsoft Entra со следующей конфигурацией и запишите его идентификаторы на странице обзора приложения и . Дополнительные сведения см. в разделе Регистрация приложения.
  • Имя: identity-client-spa
  • Поддерживаемые типы учетных записей: учетные записи в этом каталоге организации (только один клиент)
  • конфигурация платформы: одностраничные приложения (SPA)
  • URI перенаправления: http://localhost:5000/authentication/login-callback.
• Пакет SDK для .NET

Клонирование или скачивание примера приложения

Чтобы получить пример приложения, можно клонировать его из GitHub или скачать его в виде файла .zip.

JavaScript

• Чтобы клонировать пример, откройте командную строку и перейдите к месту создания проекта и введите следующую команду:

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

• Скачайте файл .zip. Извлеките его в файловый путь, длина имени которого составляет меньше 260 символов.

React

• Чтобы клонировать пример, откройте командную строку и перейдите к месту создания проекта и введите следующую команду:

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

• Скачайте файл .zip. Извлеките его в файловый путь, длина имени которого составляет меньше 260 символов.

Ангуляр

• Чтобы клонировать пример, откройте командную строку и перейдите к месту создания проекта и введите следующую команду:

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

• Скачайте файл .zip. Извлеките его в файловый путь, длина имени которого составляет меньше 260 символов.

Blazor

• Чтобы клонировать пример, откройте командную строку и перейдите к месту создания проекта и введите следующую команду:

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

• Скачайте файл .zip. Извлеките его в файловый путь, длина имени которого составляет меньше 260 символов.

Настройка проекта

JavaScript

1. В интегрированной среде разработки откройте папку проекта ms-identity-docs-code-javascript, содержащую пример.

2. Откройте vanillajs-spa/App/public/authConfig.js и обновите указанные значения с информацией из центра администрирования.

   /**
    * 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 — идентификатор приложения, который также называется клиентом. Замените текст в кавычках на значение идентификатора приложения (клиента) , записанное ранее.
   • authority - Уполномоченный орган — это URL-адрес, указывающий каталог, из которого MSAL может запрашивать токены. Замените Enter_the_Tenant_Info_Here значением, которое ранее было записано как идентификатор каталога (клиента).
   • redirectUri — URI перенаправления приложения. При необходимости замените текст в кавычках на URI перенаправления, который был записан ранее.

React

1. В интегрированной среде разработки откройте папку проекта ms-identity-docs-code-javascript/react-spa, содержащую пример.

2. Откройте react-spa/src/authConfig.js и обновите следующие значения с помощью сведений, записанных в Центре администрирования.

   /*
    * 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 — идентификатор приложения, который также называется клиентом. Замените текст в кавычках на значение идентификатора приложения (клиента) , записанное ранее.
   • authority - Уполномоченный орган — это URL-адрес, указывающий каталог, из которого MSAL может запрашивать токены. Замените Enter_the_Tenant_Info_Here значением, которое ранее было записано как идентификатор каталога (клиента).
   • redirectUri — URI перенаправления приложения. При необходимости замените текст в кавычках на URI перенаправления, который был записан ранее.

Ангуляр

1. В интегрированной среде разработки откройте папку проекта, ms-identity-docs-code-javascript/angular-spa, содержащую пример.

2. Откройте angular-spa/src/app/app.module.ts и обновите следующие значения со сведениями, записанными в Центре администрирования.

   // 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 — идентификатор приложения, который также называется клиентом. Замените текст в кавычках на значение идентификатора приложения (клиента) , записанное ранее.
   • authority - Уполномоченный орган — это URL-адрес, указывающий каталог, из которого MSAL может запрашивать токены. Замените Enter_the_Tenant_Info_Here значением, которое ранее было записано как идентификатор каталога (клиента).
   • redirectUri — URI перенаправления приложения. При необходимости замените текст в кавычках на URI перенаправления, который был записан ранее.

Blazor

1. В интегрированной среде разработки откройте папку проекта, ms-identity-docs-code-dotnet/spa-blazor-wasm, содержащую пример.

2. Откройте spa-blazor-wasm/wwwroot/appsettings.json и обновите следующие значения с информацией, записанной ранее в Центре администрирования.

   {
     "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 - Уполномоченный орган — это URL-адрес, указывающий каталог, из которого MSAL может запрашивать токены. Замените Enter_the_Tenant_Info_Here значением, которое ранее было записано как идентификатор каталога (клиента).
   • ClientId — идентификатор приложения, который также называется клиентом. Замените текст в кавычках на значение идентификатора приложения (клиента) , записанное ранее.

Запуск приложения и вход и выход

JavaScript

Запустите проект с веб-сервером с помощью Node.js:

1. Чтобы запустить сервер, выполните следующие команды из каталога проекта:

   cd vanillajs-spa/App
   npm install
   npm start
   

2. Скопируйте URL-адрес https, который отображается в терминале, например https://localhost:3000, и вставьте его в браузер. Рекомендуется использовать частный или инкогнито браузерный сеанс.

3. Выполните действия и введите необходимые сведения для входа с помощью учетной записи Майкрософт. Вас попросят указать адрес электронной почты, чтобы вам мог быть отправлен одноразовый код доступа. Введите код при появлении запроса.

4. Приложение будет запрашивать разрешение на продолжение доступа к данным, к которым вы уже предоставили доступ, а также на вход и чтение вашего профиля. Выберите Принять. На следующем снимке экрана показано, что вы вошли в приложение и получили доступ к сведениям о профиле из API Microsoft Graph.

   

React

Запустите проект с веб-сервером с помощью Node.js:

1. Чтобы запустить сервер, выполните следующие команды из каталога проекта:

   cd react-spa/App
   npm install
   npm start
   

2. Скопируйте URL-адрес https, который отображается в терминале, например https://localhost:3000, и вставьте его в браузер. Рекомендуется использовать частный или инкогнито браузерный сеанс.

3. Выполните действия и введите необходимые сведения для входа с помощью учетной записи Майкрософт. Вас просят указать адрес электронной почты, чтобы вам мог быть отправлен одноразовый пароль. Введите код при появлении запроса.

4. Приложение запрашивает разрешение на поддержку доступа к данным, к которым вы предоставили доступ, и для входа в ваш аккаунт, а также чтения вашего профиля. Выберите Принять. На следующем снимке экрана показано, что вы вошли в приложение и получили доступ к сведениям о профиле из API Microsoft Graph.

   

Ангуляр

Запустите проект с веб-сервером с помощью Node.js:

1. Чтобы запустить сервер, выполните следующие команды из каталога проекта:

   cd angular-spa/App
   npm install
   npm start
   

2. Скопируйте URL-адрес https, отображаемый в терминале, например, https://localhost:4200, и вставьте его в адресную строку браузера. Рекомендуется использовать частный или инкогнито браузерный сеанс.

3. Выполните действия и введите необходимые сведения для входа с помощью учетной записи Майкрософт. Вас попросят указать адрес электронной почты, чтобы вам мог быть отправлен одноразовый код доступа. Введите код при появлении запроса.

4. Приложение будет запрашивать разрешение на продолжение доступа к данным, к которым вы уже предоставили доступ, а также на вход и чтение вашего профиля. Выберите Принять. На следующем снимке экрана показано, что вы вошли в приложение и получили доступ к сведениям о профиле из API Microsoft Graph.

   

Blazor

Запустите проект с веб-сервером с помощью dotnet:

1. Чтобы запустить сервер, выполните следующие команды из каталога проекта:

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

2. Скопируйте URL-адрес http, который отображается в терминале, например http://localhost:5000, и вставьте его в браузер. Рекомендуется использовать частный или инкогнито браузерный сеанс.

3. Выполните действия и введите необходимые сведения для входа с помощью учетной записи Майкрософт. Вас попросят указать адрес электронной почты, чтобы вам мог быть отправлен одноразовый код доступа. Введите код при появлении запроса.

4. Приложение будет запрашивать разрешение на продолжение доступа к данным, к которым вы уже предоставили доступ, а также на вход и чтение вашего профиля. Выберите Принять. На следующем снимке экрана показано, что вы вошли в приложение и получили доступ к сведениям о профиле из API Microsoft Graph.

   

Необходимые условия

• Учетная запись Azure с активной подпиской. Если у вас еще нет учетной записи, Создайте ее бесплатно.
• Эта учетная запись Azure должна иметь разрешения на управление приложениями. Любые из следующих ролей Microsoft Entra включают необходимые разрешения:
  • Администратор приложений
  • Разработчик приложений
  • Администратор облачных приложений
• Внешний арендатор. Чтобы создать его, выберите один из следующих методов:
  • Используйте расширение внешнего идентификатора Microsoft Entra, чтобы настроить внешний клиент прямо в Visual Studio Code. (рекомендуется)
  • создание нового внешнего клиента в Центре администрирования Microsoft Entra.
• Поток пользователя. Дополнительные сведения см. в создании потоков регистрации пользователей самостоятельного обслуживания для приложений у внешних арендаторов. Этот поток пользователя можно использовать для нескольких приложений.
• Visual Studio Code или другой кодовый редактор.

JavaScript

• Зарегистрируйте новое приложение в Центре администрирования Microsoft Entra со следующей конфигурацией и запишите его идентификаторы со страницы Обзор приложения. Дополнительные сведения см. в разделе Регистрация приложения.
  • Имя: identity-client-spa
  • Поддерживаемые типы учетных записей: учетные записи в этом каталоге организации (только один клиент)
  • конфигурация платформы: одностраничные приложения (SPA)
  • URI перенаправления: http://localhost:3000/
• Добавление приложения в поток пользователя
• Node.js

React

• Зарегистрируйте новое приложение в Центре администрирования Microsoft Entra со следующей конфигурацией и запишите его идентификаторы на странице обзора приложения. Дополнительные сведения см. в разделе Регистрация приложения.
  • Имя: identity-client-spa
  • Поддерживаемые типы учетных записей: учетные записи в этом каталоге организации (только один клиент)
  • конфигурация платформы: одностраничные приложения (SPA)
  • URI перенаправления: http://localhost:3000/
• Добавление приложения в поток пользователя
• Node.js

Ангуляр

• Зарегистрируйте новое приложение в Центре администрирования Microsoft Entra, используя следующую конфигурацию, и зафиксируйте его идентификаторы на странице Обзор приложения. Дополнительные сведения см. в разделе Регистрация приложения.
  • Имя: identity-client-spa
  • Поддерживаемые типы учетных записей: Учетные записи в этом каталоге организации (один арендатор)
  • конфигурация платформы: одностраничные приложения (SPA)
  • URI перенаправления: http://localhost:4200/
• Добавление приложения в поток пользователя
• Node.js

Предоставление согласия администратора

После того как вы зарегистрируете приложение, ему будет назначено разрешение User.Read. Однако, поскольку клиент является внешним клиентом, сами пользователи клиента не могут согласиться с этим разрешением. Вы, как администратор клиента, должны предоставить это разрешение от имени всех пользователей в клиенте:

1. На странице регистрации приложений выберите созданное вами приложение (например, ciam-client-app), чтобы открыть его страницу обзора .

2. В разделе Управлениевыберите разрешения API.

   1. Выберите предоставить согласие администратора для <вашего арендатора>, а затем выберите Да.
   2. Выберите Обновить, а затем убедитесь, что предоставлено для <имя арендатора> отображается в разделе Статус для разрешения.

Клонировать или скачать пример SPA

Чтобы получить пример приложения, можно клонировать его из GitHub или скачать его в виде файла .zip.

JavaScript

• Чтобы клонировать пример, откройте командную строку и перейдите к месту создания проекта и введите следующую команду:

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

• Скачайте пример. Извлеките его в файловый путь, длина имени которого составляет меньше 260 символов.

React

• Чтобы клонировать пример, откройте командную строку и перейдите к месту создания проекта и введите следующую команду:

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

• Скачайте пример. Извлеките его в файловый путь, длина имени которого составляет меньше 260 символов.

Ангуляр

• Чтобы клонировать пример, откройте командную строку и перейдите к месту создания проекта и введите следующую команду:

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

• Скачайте пример. Извлеките его в файловый путь, длина имени которого составляет меньше 260 символов.

Настройка примера SPA

JavaScript

1. Откройте App/public/authConfig.js и замените следующие данные на полученные из Центра администрирования Microsoft Entra.

   • Enter_the_Application_Id_Here и замените его идентификатором приложения (клиента), зарегистрированного ранее.
   • Enter_the_Tenant_Subdomain_Here и замените его поддоменом каталога (клиента). Например, если основной домен клиента contoso.onmicrosoft.com, используйте contoso. Если у вас нет имени арендатора, узнайте, как просматривать сведения об арендаторе.

2. Сохраните файл.

React

1. Откройте SPA\src\authConfig.js и замените следующие данные на полученные из Центра администрирования Microsoft Entra.

   • Enter_the_Application_Id_Here и замените его идентификатором приложения (клиента), зарегистрированного ранее.
   • Enter_the_Tenant_Subdomain_Here и замените его поддоменом каталога (клиента). Например, если основной домен клиента contoso.onmicrosoft.com, используйте contoso. Если у вас нет имени арендатора, узнайте, как просматривать сведения об арендаторе.

2. Сохраните файл.

Ангуляр

1. Откройте SPA/src/app/auth-config.ts и замените следующие данные на полученные из Центра администрирования Microsoft Entra.

   • Enter_the_Application_Id_Here и замените его идентификатором приложения (клиента), зарегистрированного ранее.
   • Enter_the_Tenant_Subdomain_Here и замените его поддоменом каталога (клиента). Например, если основной домен клиента contoso.onmicrosoft.com, используйте contoso. Если у вас нет имени арендатора, узнайте, как просматривать сведения об арендаторе.

2. Сохраните файл.

Запуск проекта и вход

JavaScript

1. Чтобы запустить сервер, выполните следующие команды из каталога проекта:

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

2. Скопируйте URL-адрес https, который отображается в терминале, например https://localhost:3000, и вставьте его в браузер. Рекомендуется использовать частный или инкогнито браузерный сеанс.

3. Войдите с учетной записью, зарегистрированной у арендатора.

4. На следующем снимке экрана показано, что вы вошли в приложение и получили доступ к сведениям о профиле из API Microsoft Graph.

   

React

1. Чтобы запустить сервер, выполните следующие команды из каталога проекта:

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

2. Скопируйте URL-адрес https, который отображается в терминале, например https://localhost:3000, и вставьте его в браузер. Рекомендуется использовать частный или инкогнито браузерный сеанс.

3. Войдите с учетной записью, зарегистрированной у внешнего арендатора.

4. На следующем снимке экрана показано, что вы вошли в приложение и получили доступ к сведениям о профиле из API Microsoft Graph.

Ангуляр

1. Чтобы запустить сервер, выполните следующие команды из каталога проекта:

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

2. Скопируйте URL-адрес https, который отображается в терминале, например https://localhost:4200, и вставьте его в браузер. Рекомендуется использовать частный или инкогнито браузерный сеанс.

3. Войдите с учетной записью, зарегистрированной у внешнего арендатора.

4. На следующем снимке экрана показано, что вы вошли в приложение и получили доступ к сведениям о профиле из API Microsoft Graph.

   

Выход из приложения

1. Найдите кнопку Выход на странице и нажмите на неё.
2. Вам предложат выбрать учетную запись, из которой вы хотите выйти. Выберите учетную запись, используемую для входа.

Появится сообщение, указывающее, что вы выполнили выход. Теперь вы можете закрыть окно браузера.

Связанное содержимое

• Быстрый старт: защита веб-API ASP.NET Core с помощью платформы удостоверений Майкрософт.
• Узнайте больше, создавая одностраничное приложение на React, в котором пользователи могут входить в систему, в следующей серии многочастных учебных пособий.
• Включить сброс пароля.
• Настройка бренда по умолчанию.
• Настроить вход с помощью Google.