Angularで Microsoft Graph Toolkit を使用する

  • [アーティクル]

Microsoft Graph Toolkit コンポーネントは、vanilla JavaScript や HTML に加えて、Angular などの Web フレームワークでうまく機能します。 このトピックでは、Angular でMicrosoft Graph Toolkit を使用する方法について説明します。 新しい Angular アプリケーションを作成して Microsoft Graph Toolkit を使用する方法を説明する手順ごとのウォークスルーについては、「Angular での Microsoft Graph Toolkit の使用」を参照してください。

Microsoft Graph Toolkit を追加する

まず、app.module.tsの@NgModule() decoratorにCUSTOM_ELEMENTS_SCHEMAを追加して、Angular アプリケーションでカスタム要素を有効にする必要があります。 次の例は、その方法を示しています。

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 {}

次に、以下のコマンドを使用して npm パッケージをインストールし、Microsoft Graph Toolkit をプロジェクトに追加します。

npm install @microsoft/mgt

プロバイダーを初期化する

Microsoft Graph Toolkit プロバイダーは、コンポーネントの認証と Microsoft Graph へのアクセスを可能にします。 詳細については、「プロバイダーを使用する」を参照してください。 使用するプロバイダーは、ソリューションが使用されるコンテキストによって異なります。

次の例では 、MSAL2 プロバイダーを追加する方法を示していますが、どのプロバイダーでも同じモデルに従うことができます。

注:

現在 MSAL プロバイダーを使用していて、MSAL2 プロバイダーに更新する場合は、 MSAL2 プロバイダー に関する記事の手順に従ってください。

プロバイダーをインポートし、アプリケーションの初期化時に初期化するように設定します。 <YOUR-CLIENT-ID> をアプリケーションのクライアント 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>'
        });
    }
}

アプリ/クライアント ID の作成

クライアント ID を取得するには、アプリケーションをMicrosoft Entra IDに登録する必要があります。

コンポーネントの追加

これで、HTML テンプレートで通常と同様に、Microsoft Graph Toolkit コンポーネントを登録して使用できます。 たとえば、 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 コンパイラーはエラーをスローします。

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>

次の手順