Angularで Microsoft Graph Toolkit を使用する

[アーティクル]
11/07/2024

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>

次の手順

「Angular アプリの構築」で、手順ごとのチュートリアルを確認してください。
プレイグラウンドでさまざまなコンポーネントを試してみてください。
Stack Overflow で質問をお待ちしています。
バグを報告するか、GitHub に機能リクエストを残してください。

次の方法で共有