Организационные данные: вход в систему пользователем и получение токена доступа

Пользователям необходимо пройти проверку подлинности с помощью идентификатора Microsoft Entra, чтобы Microsoft Graph получить доступ к данным организации. В этом упражнении вы узнаете, как компонент Microsoft Graph Toolkit mgt-login можно использовать для проверки подлинности пользователей и получения маркера доступа. Затем маркер доступа можно использовать для вызова Microsoft Graph.

Замечание

Если вы не знакомы с Microsoft Graph, вы можете узнать больше об этом в схеме обучения Microsoft Graph.

В этом упражнении вы выполните следующие действия.

Узнайте, как связать приложение Идентификатора Microsoft Entra с Microsoft Graph Toolkit для проверки подлинности пользователей и получения данных организации.
Узнайте о важности областей.
Узнайте, как компонент mgt-login Microsoft Graph Toolkit можно использовать для проверки подлинности пользователей и получения маркера доступа.

В предыдущем упражнении вы создали регистрацию приложения в идентификаторе Microsoft Entra и запустили сервер приложений и сервер API. Вы также обновили следующие значения в .env файле (TEAM_ID и CHANNEL_ID являются необязательными):
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Прежде чем продолжить, убедитесь, что вы выполнили предыдущее упражнение .
Вернитесь в браузер (http://localhost:4200), выберите вход в заголовок и войдите с помощью учетной записи пользователя администратора из клиента разработчика Microsoft 365.

Подсказка

Войдите с помощью учетной записи администратора клиента разработчика Microsoft 365. Вы можете просмотреть других пользователей в клиенте разработчика, перейдя в Центр администрирования Microsoft 365.
Если вы впервые вошли в приложение, вам будет предложено предоставить согласие на разрешения, запрошенные приложением. Дополнительные сведения об этих разрешениях (также называемых "областями") см. в следующем разделе при изучении кода. Нажмите кнопку "Принять ", чтобы продолжить.
После входа в систему вы увидите имя пользователя, отображаемого в заголовке.

Теперь, когда вы вошли, давайте рассмотрим код, используемый для входа пользователя и получения маркера доступа и профиля пользователя. Вы узнаете о веб-компоненте mgt-login , который входит в состав Microsoft Graph Toolkit.

Подсказка

Если вы используете Visual Studio Code, вы можете открывать файлы напрямую, выбрав:

Windows/Linux: CTRL +P
Mac: Cmd + P

Затем введите имя файла, который нужно открыть.

Откройте клиент илиpackage.json и обратите внимание, что @microsoft/mgt в зависимости включены и @microsoft/mgt-components пакеты. Пакет @microsoft/mgt содержит функции поставщика MSAL (библиотека проверки подлинности Майкрософт) и веб-компоненты, такие как mgt-login и другие, которые можно использовать для входа пользователей и получения и отображения данных организации.
Откройте клиент или src/main.ts и обратите внимание на следующие импорты из @microsoft/mgt-components пакета. Импортированные символы используются для регистрации компонентов Microsoft Graph Toolkit, используемых в приложении.
```
import { registerMgtLoginComponent, registerMgtSearchResultsComponent, registerMgtPersonComponent,  } from '@microsoft/mgt-components';
```
Прокрутите внизу файла и запишите следующий код:
```
registerMgtLoginComponent();
registerMgtSearchResultsComponent();
registerMgtPersonComponent();
```
Этот код регистрирует mgt-loginи mgt-search-resultsвеб-компоненты и mgt-person включает их для использования в приложении.
Чтобы использовать компонент mgt-login для входа пользователей, необходимо ссылаться на и использовать идентификатор клиента приложения Microsoft Entra ID (хранящегося в env-файле как ENTRAID_CLIENT_ID).
Откройте graph.service.ts и найдите функцию init() . Полный путь к файлу — client/src/app/core/graph.service.ts. Вы увидите следующий импорт и код:
```
import { Msal2Provider, Providers, ProviderState } from '@microsoft/mgt';

init() {
    if (!this.featureFlags.microsoft365Enabled) return;

    if (!Providers.globalProvider) {
        console.log('Initializing Microsoft Graph global provider...');
        Providers.globalProvider = new Msal2Provider({
            clientId: ENTRAID_CLIENT_ID,
            scopes: ['User.Read', 'Presence.Read', 'Chat.ReadWrite', 'Calendars.Read', 
                    'ChannelMessage.Read.All', 'ChannelMessage.Send', 'Files.Read.All', 'Mail.Read']
        });
    }
    else {
        console.log('Global provider already initialized');
    }
}
```
Этот код создает новый Msal2Provider объект, передав идентификатор клиента Microsoft Entra ID из регистрации приложения, а scopes также идентификатор, для которого приложение запрашивает доступ. Они scopes используются для запроса доступа к ресурсам Microsoft Graph, к которым будет обращаться приложение. Msal2Provider После создания объекта он назначается Providers.globalProvider объекту, который используется компонентами Microsoft Graph Toolkit для получения данных из Microsoft Graph.
Откройте header.component.html в редакторе и найдите компонент mgt-login . Полный путь к файлу — client/src/app/header/header.component.html.
```
@if (this.featureFlags.microsoft365Enabled) {
    <mgt-login class="mgt-dark" (loginCompleted)="loginCompleted()"></mgt-login>
}
```
Компонент mgt-login включает вход пользователя и предоставляет доступ к маркеру, используемому с Microsoft Graph. После успешного входа loginCompleted событие активируется, которое вызывает функцию loginCompleted() . Хотя mgt-login используется в компоненте Angular в этом примере, он совместим с любым веб-приложением.

Отображение компонента mgt-login зависит от заданного featureFlags.microsoft365Enabledtrueзначения. Этот пользовательский флаг проверяет наличие переменной ENTRAID_CLIENT_ID среды, чтобы убедиться, что приложение правильно настроено и может пройти проверку подлинности в идентификаторе Microsoft Entra. Флаг добавляется для размещения случаев, когда пользователи предпочитают выполнять только упражнения ИИ или коммуникации в рамках руководства, а не после всей последовательности упражнений.
Откройте header.component.ts и найдите функцию loginCompleted . Эта функция вызывается, когда loginCompleted событие создается и обрабатывает извлечение вошедшего в систему профиля пользователя с помощью Providers.globalProvider.
```
async loginCompleted() {
    const me = await Providers.globalProvider.graph.client.api('me').get();
    this.userLoggedIn.emit(me);
}
```
В этом примере вызов выполняется в API Microsoft Graph me для получения профиля пользователя (me представляет текущего вошедшего пользователя). Оператор this.userLoggedIn.emit(me) кода выдает событие из компонента для передачи данных профиля родительскому компоненту. Родительский компонент — это app.component.ts файл в данном случае, который является корневым компонентом для приложения.

Дополнительные сведения о компоненте mgt-login см. в документации по Microsoft Graph Toolkit .
Теперь, когда вы вошли в приложение, давайте рассмотрим, как можно получить данные организации.

Следующий шаг

Организационные данные: получение файлов, чатов и отправки сообщений в Teams

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2025-06-13

Поделиться через

Организационные данные: вход в систему пользователем и получение токена доступа

Использование функции входа

Изучение кода входа

Следующий шаг

Обратная связь

Дополнительные ресурсы