Краткая инструкция: Вход пользователей в одностраничное приложение (SPA) и вызов API Microsoft Graph
Статья
В этом кратком руководстве вы используете пример одностраничного приложения (SPA), чтобы показать, как войти пользователям, используя поток кода авторизации с Ключом проверки подлинности кода (PKCE), и вызывать API Microsoft Graph. В этом примере используется библиотека Microsoft Authentication Library для обработки проверки подлинности.
Чтобы завершить регистрацию, укажите имя приложения, укажите поддерживаемые типы учетных записей и добавьте URI перенаправления. После регистрации панель Обзор отображает идентификаторы, необходимые для использования в исходном коде приложения.
Если у вас есть доступ к нескольким клиентам, используйте значок параметров в верхнем меню, чтобы переключиться на клиента, в котором вы хотите зарегистрировать приложение, из меню Каталоги + подписки.
Перейдите к Удостоверению>приложения>Регистрация приложений, выберите Новая регистрация.
Введите имя приложения, например identity-client-spa.
Для поддерживаемых типов учетных записейвыберите учетные записи в этом каталоге организации только. Для получения сведений о различных типах учетных записей выберите параметр Help me choose.
Выберите Зарегистрировать.
Панель обзора приложения отображается при завершении регистрации. Запишите идентификатор каталога (клиента) и идентификатор приложения (клиента), который будет использоваться в исходном коде приложения.
В интегрированной среде разработки откройте папку проекта ms-identity-docs-code-javascript, содержащую пример.
Откройте 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
* https://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
*/
const loginRequest = {
scopes: ["User.Read"],
};
/**
* An optional silentRequest object can be used to achieve silent SSO
* between applications by providing a "login_hint" property.
*/
// const silentRequest = {
// scopes: ["openid", "profile"],
// loginHint: "example@domain.net"
// };
// exporting config object for jest
if (typeof exports !== 'undefined') {
module.exports = {
msalConfig: msalConfig,
loginRequest: loginRequest,
};
module.exports = {
msalConfig: msalConfig,
loginRequest: loginRequest,
};
}
clientId — идентификатор приложения, который также называется клиентом. Замените текст в кавычках на значение идентификатора приложения (клиента) , записанное ранее.
authority - Уполномоченный орган — это URL-адрес, указывающий каталог, из которого MSAL может запрашивать токены. Замените Enter_the_Tenant_Info_Here значением, которое ранее было записано как идентификатор каталога (клиента).
redirectUri — URI перенаправления приложения. При необходимости замените текст в кавычках на URI перенаправления, который был записан ранее.
В интегрированной среде разработки откройте папку проекта ms-identity-docs-code-javascript/react-spa, содержащую пример.
Откройте 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 — URL перенаправления приложения. При необходимости замените текст в кавычках на URI перенаправления, записанный ранее.
В интегрированной среде разработки откройте папку проекта, ms-identity-docs-code-javascript/angular-spa, содержащую пример.
Откройте 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 перенаправления, записанный ранее.
В интегрированной среде разработки откройте папку проекта, ms-identity-docs-code-dotnet/spa-blazor-wasm, содержащую пример.
Откройте 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 — идентификатор приложения, который также называется клиентом. Замените текст в кавычках на значение идентификатора приложения (клиента) , записанное ранее.
Запустите проект с веб-сервером с помощью Node.js:
Чтобы запустить сервер, выполните следующие команды из каталога проекта:
cd vanillajs-spa/App
npm install
npm start
Скопируйте URL-адрес https, который отображается в терминале, например https://localhost:3000, и вставьте его в браузер. Рекомендуется использовать частный или инкогнито браузерный сеанс.
Выполните действия и введите необходимые сведения для входа с помощью учетной записи Майкрософт. Вас попросят указать адрес электронной почты, чтобы вам мог быть отправлен одноразовый код доступа. Введите код при появлении запроса.
Приложение будет запрашивать разрешение на продолжение доступа к данным, к которым вы уже предоставили доступ, а также на вход и чтение вашего профиля. Выберите Принять. На следующем снимке экрана показано, что вы вошли в приложение и получили доступ к сведениям о профиле из API Microsoft Graph.
Запустите проект с веб-сервером с помощью Node.js:
Чтобы запустить сервер, выполните следующие команды из каталога проекта:
cd react-spa/App
npm install
npm start
Скопируйте URL-адрес https, который отображается в терминале, например https://localhost:3000, и вставьте его в браузер. Рекомендуется использовать частный или инкогнито браузерный сеанс.
Выполните действия и введите необходимые сведения для входа с помощью учетной записи Майкрософт. Вас просят указать адрес электронной почты, чтобы вам мог быть отправлен одноразовый пароль. Введите код при появлении запроса.
Приложение запрашивает разрешение на поддержку доступа к данным, к которым вы предоставили доступ, и для входа в ваш аккаунт, а также чтения вашего профиля. Выберите Принять. На следующем снимке экрана показано, что вы вошли в приложение и получили доступ к сведениям о профиле из API Microsoft Graph.
Запустите проект с веб-сервером с помощью Node.js:
Чтобы запустить сервер, выполните следующие команды из каталога проекта:
cd angular-spa/App
npm install
npm start
Скопируйте URL-адрес https, отображаемый в терминале, например, https://localhost:4200, и вставьте его в адресную строку браузера. Рекомендуется использовать частный или инкогнито браузерный сеанс.
Выполните действия и введите необходимые сведения для входа с помощью учетной записи Майкрософт. Вас попросят указать адрес электронной почты, чтобы разовый код можно было вам отправить. Введите код при появлении запроса.
Приложение запросит разрешение на поддержание доступа к данным, к которым вы предоставили доступ, а также для входа в систему и чтения вашего профиля. Выберите Принять. На следующем снимке экрана показано, что вы вошли в приложение и получили доступ к сведениям о профиле из API Microsoft Graph.
Запустите проект с веб-сервером с помощью dotnet:
Чтобы запустить сервер, выполните следующие команды из каталога проекта:
cd spa-blazor-wasm
dotnet workload install wasm-tools
dotnet run
Скопируйте URL-адрес http, который отображается в терминале, например http://localhost:5000, и вставьте его в браузер. Рекомендуется использовать частный или инкогнито браузерный сеанс.
Выполните действия и введите необходимые сведения для входа с помощью учетной записи Майкрософт. Вас попросят указать адрес электронной почты, чтобы вам мог быть отправлен одноразовый код доступа. Введите код при появлении запроса.
Приложение будет запрашивать разрешение на поддержание доступа к данным, к которым вы предоставили доступ, а также для входа в систему и чтения вашего профиля. Выберите Принять. На следующем снимке экрана показано, что вы вошли в приложение и получили доступ к сведениям о профиле из API Microsoft Graph.
Чтобы разрешить приложению вход пользователей с помощью Microsoft Entra, необходимо учитывать создаваемый вами внешний идентификатор Microsoft Entra. Регистрация приложения устанавливает отношение доверия между приложением и Microsoft Entra. При регистрации приложения внешний идентификатор создает уникальный идентификатор, известный как идентификатор (клиента), который используется для идентификации приложения при создании запросов аутентификации.
Ниже показано, как зарегистрировать приложение в Центре администрирования Microsoft Entra:
Если у вас есть доступ к нескольким тенантам, используйте значок настроек в верхнем меню, чтобы переключиться на внешний тенант из меню Директории + подписки.
Перейдите к Идентификация>Приложения>Регистрация приложений.
Выберите + Новая учётная запись.
В появившемся окне на странице зарегистрировать приложение;
Введите осмысленное имя приложения, отображающееся пользователям, например ciam-client-app.
В разделе Поддерживаемые типы учетных записейвыберите только учетные записи в этом каталоге организации.
Выберите Зарегистрировать.
Панель Обзор приложения отображается при успешной регистрации. Запишите идентификатор приложения (клиента), который использовать в исходном коде приложения.
Чтобы указать тип приложения для регистрации приложения, выполните следующие действия.
В разделе Управлениевыберите Аутентификация.
На странице конфигураций платформы выберите Добавить платформу, а затем выберите опцию SPA.
Для URI перенаправления введите http://localhost:3000.
Выберите Настроить, чтобы сохранить изменения.
Чтобы указать тип приложения для регистрации приложения, выполните следующие действия.
В разделе Управлениевыберите Аутентификация.
На странице конфигураций платформы выберите Добавить платформу, а затем выберите опцию SPA.
Для URI перенаправления введите http://localhost:3000.
Выберите Настроить, чтобы сохранить изменения.
Чтобы указать тип приложения для регистрации приложения, выполните следующие действия.
В разделе Управлениевыберите Аутентификация.
На странице конфигураций платформы выберите Добавить платформу, а затем выберите опцию SPA.
Для URI перенаправления введите http://localhost:4200.
Выберите Настроить, чтобы сохранить изменения.
Предоставление согласия администратора
После того как вы зарегистрируете приложение, ему будет назначено разрешение User.Read. Однако, поскольку клиент является внешним клиентом, сами пользователи клиента не могут согласиться с этим разрешением. Вы, как администратор клиента, должны предоставить это разрешение от имени всех пользователей в клиенте:
На странице регистрации приложений выберите созданное вами приложение (например, ciam-client-app), чтобы открыть его страницу обзора .
В разделе Управлениевыберите разрешения API.
Выберите предоставить согласие администратора для <вашего арендатора>, а затем выберите Да.
Выберите Обновить, а затем убедитесь, что предоставлено для <имя арендатора> отображается в разделе Статус для разрешения.
Создание пользовательского потока
Чтобы пользователи клиента видели возможность регистрации или входа при использовании приложения, необходимо связать приложение с потоком пользователя. Хотя многие приложения могут быть связаны с потоком пользователя, одно приложение может быть связано только с одним потоком пользователя.
В меню боковой панели выберите Удостоверение.
Выберите внешние удостоверения, а затем потоки пользователей.
На странице Потоки пользователей выберите имя потока пользователя, созданное ранее, например, SignInSignUpSample.
В разделе Использованиевыберите Приложения.
Выберите Добавить приложение.
Выберите приложение из списка, например ciam-client-app или используйте поле поиска для поиска приложения, а затем выберите его.
Выберите Выбрать.
Связав приложение с потоком пользователей, вы можете протестировать поток пользователя, имитируя процесс регистрации или входа пользователя с приложением из Центра администрирования Microsoft Entra. Для этого выполните действия, указанные в разделе Тестирование процесса регистрации и авторизации пользователя.
Свяжите SPA с потоком пользователя
Чтобы пользователи клиента видели возможность регистрации или входа при использовании приложения, необходимо связать приложение с потоком пользователя. Хотя многие приложения могут быть связаны с потоком пользователя, одно приложение может быть связано только с одним потоком пользователя.
В меню боковой панели выберите Идентификатор.
Выберите внешние удостоверения, а затем потоки пользователей.
На странице User flows выберите имя потока пользователя, созданное ранее, например SignInSignUpSample.
В разделе Использованиевыберите Приложения.
Выберите Добавить приложение.
Выберите приложение из списка, например ciam-client-app или используйте поле поиска для поиска приложения, а затем выберите его.
Выберите Выбрать.
Связав приложение с потоком пользователей, вы можете протестировать поток пользователя, имитируя процесс регистрации или входа пользователя с приложением из Центра администрирования Microsoft Entra. Для этого выполните действия, описанные в Протестируйте процесс регистрации и входа в поток пользователя.
Клонировать или скачать пример SPA
Чтобы получить пример приложения, можно клонировать его из GitHub или скачать его в виде файла .zip.
Откройте App/public/authConfig.js и замените следующие данные на полученные из Центра администрирования Microsoft Entra.
Enter_the_Application_Id_Here и замените его идентификатором приложения (клиента), зарегистрированного ранее.
Enter_the_Tenant_Subdomain_Here и замените его поддоменом каталога (клиента). Например, если основной домен клиента contoso.onmicrosoft.com, используйте contoso. Если у вас нет имени арендатора, узнайте, как просматривать сведения об арендаторе.
Сохраните файл.
Откройте SPA\src\authConfig.js и замените указанные ниже значениями, полученными из Центра администрирования Microsoft Entra.
Enter_the_Application_Id_Here и замените его идентификатором приложения (клиента), зарегистрированного ранее.
Enter_the_Tenant_Subdomain_Here и замените его поддоменом каталога (клиента). Например, если основной домен клиента contoso.onmicrosoft.com, используйте contoso. Если у вас нет имени арендатора, узнайте, как получить сведения о вашем арендаторе.
Сохраните файл.
Откройте SPA/src/app/auth-config.ts и замените значения на следующие, полученные из Центра администрирования Microsoft Entra.
Enter_the_Application_Id_Here и замените его идентификатором приложения (клиента), зарегистрированного ранее.
Enter_the_Tenant_Subdomain_Here и замените его поддоменом каталога (клиента). Например, если основной домен клиента contoso.onmicrosoft.com, используйте contoso. Если у вас нет имени арендатора, узнайте, как просматривать сведения о арендаторе.
Чтобы запустить сервер, выполните следующие команды из каталога проекта:
cd 1-Authentication\0-sign-in-vanillajs\App
npm install
npm start
Скопируйте URL-адрес https, который отображается в терминале, например https://localhost:3000, и вставьте его в браузер. Рекомендуется использовать частный или инкогнито браузерный сеанс.
Войдите с учетной записью, зарегистрированной у арендатора.
На следующем снимке экрана показано, что вы вошли в приложение и получили доступ к сведениям о профиле из API Microsoft Graph.
Чтобы запустить сервер, выполните следующие команды из каталога проекта:
cd 1-Authentication\1-sign-in-react\SPA
npm install
npm start
Скопируйте URL-адрес https, который отображается в терминале, например https://localhost:3000, и вставьте его в браузер. Рекомендуется использовать частный или инкогнито браузерный сеанс.
Войдите с учетной записью, зарегистрированной у внешнего арендатора.
На следующем снимке экрана показано, что вы вошли в приложение и получили доступ к сведениям о профиле из API Microsoft Graph.
Чтобы запустить сервер, выполните следующие команды из каталога проекта:
cd 1-Authentication\2-sign-in-angular\SPA
npm install
npm start
Скопируйте URL-адрес https, который отображается в терминале, например https://localhost:4200, и вставьте его в браузер. Рекомендуется использовать частный или инкогнито браузерный сеанс.
Войдите с учетной записью, зарегистрированной во внешнем клиенте.
На следующем снимке экрана показано, что вы вошли в приложение и получили доступ к сведениям о профиле из API Microsoft Graph.
Выход из приложения
Найдите кнопку Выход на странице и нажмите на неё.
Вам предложат выбрать учетную запись, из которой вы хотите выйти. Выберите учетную запись, используемую для входа.
Появится сообщение, указывающее, что вы выполнили выход. Теперь вы можете закрыть окно браузера.
в верхнем меню, чтобы переключиться на клиента, в котором вы хотите зарегистрировать приложение, из меню Каталоги + подписки.
в верхнем меню, чтобы переключиться на внешний тенант из меню Директории + подписки.
