Использование Microsoft Graph Toolkit с Angular

  • Статья

Компоненты Microsoft Graph Toolkit хорошо взаимодействуют с такими веб-платформами, как Angular, в дополнение к обычным JavaScript и HTML. В этой статье описано использование Microsoft Graph Toolkit с Angular. Пошаговое руководство с описанием способа создания приложения Angular и использования Microsoft Graph Toolkit см. в статье Использование Microsoft Graph Toolkit с Angular.

Добавление Microsoft Graph Toolkit

Сначала вам нужно включить настраиваемые элементы в приложении Angular, добавив CUSTOM_ELEMENTS_SCHEMA к @NgModule() decorator в app.module.ts. В следующем примере показано, как это сделать.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Затем добавьте Microsoft Graph Toolkit в свой проект, установив пакет npm:

npm install @microsoft/mgt

Инициализация поставщика

Поставщики Microsoft Graph Toolkit обеспечивают проверку подлинности и доступ к Microsoft Graph для компонентов. Дополнительные сведения см. в статье Использование поставщиков. Применяемый поставщик зависит от контекста, в котором будет использоваться ваше решение.

В следующем примере показано, как добавить поставщик MSAL2, но вы можете следовать той же модели с любым из поставщиков.

Примечание.

Если в настоящее время вы используете поставщик MSAL и хотите обновить его до поставщика MSAL2, выполните действия, описанные в статье Поставщик MSAL2 .

Импортируйте поставщика и настройте его для инициализации при запуске приложения. Замените <YOUR-CLIENT-ID> на идентификатор клиента для своего приложения.

import { Component, OnInit } from '@angular/core';
import { Providers, Msal2Provider } from '@microsoft/mgt';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

    ngOnInit()
    {
        Providers.globalProvider = new Msal2Provider({
            clientId: '<YOUR-CLIENT-ID>'
        });
    }
}

Создание идентификатора клиента/приложения

Чтобы получить идентификатор клиента, необходимо зарегистрировать приложение в Microsoft Entra ID.

Добавление компонентов

Теперь вы можете зарегистрировать и использовать любой из компонентов Microsoft Graph Toolkit, как обычно в шаблонах HTML. Например, чтобы добавить компонент Person, обновите приложение, чтобы зарегистрировать его:

import { Component, OnInit } from '@angular/core';
import { Providers } from '@microsoft/mgt-element';
import { Msal2Provider } from '@microsoft/mgt-msal2-provider';
import { registerMgtPersonComponent } from '@microsoft/mgt-components';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

    ngOnInit()
    {
        Providers.globalProvider = new Msal2Provider({
            clientId: '<YOUR-CLIENT-ID>'
        });
        registerMgtPersonComponent();
    }
}

Затем добавьте в шаблон следующее:

<mgt-person person-query="me" view="twolines"></mgt-person>

Примечание: Функции компонента регистра должны вызываться близко к их использованию в подкомпонентах. Это гарантирует, что в более крупных приложениях, где во время объединения используется разделение кода и дрожание, вес этих компонентов может быть отложен до необходимости.

Настройка компонентов с использованием Angular

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

<!-- Double braces are used for data binding in Angular. This will throw an error. -->
<mgt-agenda>
  <template data-type="event">
    <div>{{event.subject}}</div>
  </template>
</mgt-agenda>

Однако в Angular двойные фигурные скобки используются для привязки данных, и в компиляторе Angular возникнет ошибка, если вы попытаетесь использовать синтаксис с двойными фигурными скобками.

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

Импортируйте TemplateHelper и используйте метод .setBindingSyntax(), чтобы настроить собственный синтаксис привязки.

import { Component, OnInit } from '@angular/core';
import { Providers, TemplateHelper } from '@microsoft/mgt-element';
import { Msal2Provider } from '@microsoft/mgt-msal2-provider';
import { registerMgtPersonComponent } from '@microsoft/mgt-components';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

    ngOnInit()
    {
        Providers.globalProvider = new Msal2Provider({ clientId: '<YOUR-CLIENT-ID>'})
        TemplateHelper.setBindingSyntax('[[',']]');
        registerMgtPersonComponent();
    }
}

Теперь вы можете использовать собственный синтаксис привязки для определения настраиваемых шаблонов.

<mgt-agenda>
  <template data-type="event">
    <div>[[event.subject]]</div>
  </template>
</mgt-agenda>

Дальнейшие действия