角度を使用して Microsoft Graph ツールキットを使用するUse the Microsoft Graph Toolkit with Angular

Microsoft Graph Toolkit コンポーネントは、バニラ JavaScript と HTML に加えて、角度などの web フレームワークに適しています。Microsoft Graph Toolkit components work great with web frameworks like Angular in addition to vanilla JavaScript and HTML. このトピックでは、角度を使用して Microsoft Graph ツールキットを使用する方法について説明します。This topic describes how to use the Microsoft Graph Toolkit with Angular. 新しい角度付きアプリケーションを作成し、Microsoft Graph Toolkit を使用する方法について、手順を追って説明するチュートリアルについては、「 Microsoft Graph toolkit を角度付きで使用する」を参照してください。For a step-by-step walkthrough that describes how to create a new Angular application and use the Microsoft Graph Toolkit, see Using Microsoft Graph Toolkit with Angular.

Microsoft Graph ツールキットを追加するAdd the Microsoft Graph Toolkit

最初に、をのにを追加して、角度のアプリケーションでカスタム要素を有効にする必要があり CUSTOM_ELEMENT_SCHEMA @NgModule() decorator app.module.ts ます。First, you need to enable custom elements in your Angular application by adding the CUSTOM_ELEMENT_SCHEMA to the @NgModule() decorator in app.module.ts. 次の例は、その方法を示しています。The following example shows how to do this:

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 をプロジェクトに追加します。Next, add the Microsoft Graph Toolkit to your project by installing the npm package with:

npm install @microsoft/mgt

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

Microsoft Graph Toolkit プロバイダーを使用すると、コンポーネントの認証と Microsoft Graph へのアクセスが可能になります。The Microsoft Graph Toolkit providers enable authentication and access to Microsoft Graph for the components. 詳細については、「 プロバイダーの使用」を参照してください。To learn more, see Using the providers. 使用するプロバイダーは、ソリューションが使用されるコンテキストに応じて異なります。The provider you use depends on the context in which your solution will be used.

次の例は、 Msal プロバイダーを追加する方法を示していますが、プロバイダーのいずれかと同じモデルに従うことができます。The following example shows how to add the MSAL Provider, but you can follow the same model with any of the providers. プロバイダーをインポートし、アプリケーションの初期化時に初期化するように設定します。Import the provider and set it to initialize when the application initializes. <YOUR-CLIENT-ID> アプリケーションのクライアント ID に置き換えます。Replace <YOUR-CLIENT-ID> with the client ID for your application.

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

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

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

アプリ/クライアント ID を作成するCreate an app/client ID

クライアント ID を取得するには、アプリケーションを Azure AD に 登録 する必要があります。In order to get a client ID, you need to register your application in Azure AD.

: msal では、OAuth の暗黙的フローのみがサポートされています。Note: MSAL only supports the Implicit Flow for OAuth. Azure Portal でアプリケーションの暗黙的フローを有効にしてください (既定では有効になっていません)。Make sure to enable Implicit Flow in your application in the Azure Portal (it is not enabled by default). [ 認証] で、[ 暗黙的な付与 ] セクションを見つけて、 アクセストークンID トークンのチェックボックスをオンにします。Under Authentication, find the Implicit grant section and select the checkboxes for Access tokens and ID tokens.

コンポーネントを追加するAdd components

これで、任意の Microsoft Graph Toolkit コンポーネントを HTML テンプレートで通常どおりに使用できます。Now, you can use any of the Microsoft Graph Toolkit components as you normally would in your HTML templates. たとえば、 Person コンポーネントを追加するには、次のをテンプレートに追加します。For example, to add the Person component, add the following to your template:

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

角度を使用してコンポーネントをカスタマイズするCustomizing components with Angular

すべての Microsoft Graph Toolkit コンポーネントは カスタムテンプレートをサポートしているため、コンポーネントの内容を変更することができます。All Microsoft Graph Toolkit components support custom templates, which allow you to modify the content of a component. コンポーネントをカスタマイズするための既定の構文では、次に示すように、2つのかっこを使用して、返される各アイテムのプロパティデータを参照します。The default syntax for customizing the components is to use double braces to refer to the property data for each of the returned items, as shown:

<!-- 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>

ただし、角かっこで囲まれているのは、データバインドに二重中かっこを使用している場合に、二重中かっこの構文を使用しようとするとエラーがスローされるためです。In Angular, however, double braces are used for data binding and the Angular compiler will throw an error if you try to use the double brace syntax.

このようなエラーを回避するには、を使用して、ツールキットで使用される既定の文字を二重中かっこ以外の文字に変更し TemplateHelper ます。You can avoid these errors by changing the default characters used by the Toolkit to something other than double braces by using the TemplateHelper. これは、グローバルに適用されるように、トップレベルのアプリコンポーネントで行うことをお勧めします。It is best to do this in your top-level App component so that it applies globally.

をインポート TemplateHelper し、メソッドを使用し .setBindingSyntax() てカスタムバインド構文を設定します。Import the TemplateHelper and use the .setBindingSyntax() method to set your custom binding syntax.

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

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

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

これで、カスタムバインド構文を使用してカスタムテンプレートを定義できます。Now, you can use your custom binding syntax to define custom templates.

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

次の手順Next steps