Microsoft Graph Toolkit の試し方

Web アプリケーションで Microsoft Graph を使用しやすいように Microsoft Graph Toolkit としていくつかのコンポーネントが用意されています。簡単に使い方を紹介します。

まずは Overview のページに記載の内容を実践しつつ、MSAL provider と Login component を使います。

Visual Studio Code の準備

ここではコードエディターとして Visual Studio Code を使います。ローカルでのデバッグ用に拡張機能の Live Server を使うので、Live Server をインストールしておきます。

また、Visual Studio Code の Workspace を作成して新しいフォルダーを用意しておきます。今回は以下のように CodeWorkspace という Workspace の下に GraphToolkitTest01 というフォルダーを作っておきました。

そして GraphToolkitTest01 に index.html を作っておきます。一旦ファイルさえあればよいので、中身は空のままで問題ありません。

Visual Studio Code の右下に [Go Live] というボタンが表示されているので、クリックします。すると Live Server でホストされた状態で index.html が表示されるので、URL をコピーしておきます。今回は「http://127.0.0.1:5500/GraphToolkitTest01/index.html」を例として進めます。

アプリの登録

Azure Active Directory にアプリを登録していきます。なおここでは、登録したテナントでしか利用できないアプリを登録します。

Azure Portal にサインインします。
[Active Directory] – [アプリの登録] – [新規登録] をクリックします。
[名前] に任意のアプリの名前を入力します。(例 : GraphToolkitTest01)
[サポートされているアカウントの種類] から [この組織のディレクトリ内のアカウントのみ] を選択します。
[リダイレクト URI] で [Web] を選択し、先ほど Live Server で表示した index.html の URL を入力します。ただし 127.0.0.1 は localhost に変えます。(例 : http://localhost:5500/GraphToolkitTest01/index.html)
[登録] をクリックします。
表示された [アプリケーション (クライアント) ID] の値を控えておきます。
[管理] – [認証] をクリックします。
[暗黙の付与] の [アクセストークン] と [ID トークン] のチェックをオンにして、[保存] をクリックします。

コーディング

Visual Studio Code で index.html に以下のように HTML を記述します。

<html>

<head>
    <script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
</head>

<body>
    <mgt-msal-provider client-id="[登録したアプリの アプリケーション (クライアント) ID]" authority="https://login.microsoft.com/[テナント名]"></mgt-msal-provider>
    <mgt-login></mgt-login>
</body>

</html>

実際の値を入れた場合は以下のようになります。

<html>

<head>
    <script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
</head>

<body>
    <mgt-msal-provider client-id="1d852daa-5f3b-4727-afde-80714fbe9577" authority="https://login.microsoftonline.com/contoso.onmicrosoft.com/"></mgt-msal-provider>
    <mgt-login></mgt-login>
</body>

</html>

書けたら index.html を保存しておきましょう。

なおここでは MSAL provider に authority の指定を行い、テナントの指定を行っています。この指定を入れないと authority は https://login.microsoftonline.com/common/ になりますが、アプリの登録の際に登録したテナントでしか使えないアプリにしているので、サインインの際にエラーが起きてしまいます。

動作検証

まだ Live Server が稼働しているはずなので、ブラウザーで index.html を表示します。この時、リダイレクト URI として登録したときと同じように 127.0.0.1 を localhost に変えます (例 : http://localhost:5500/GraphToolkitTest01/index.html)。検証用テナントで試しているときは、プライベートモードのブラウザーでアクセスしたほうが良いかもしれません。

そうすると以下のように [Sign In] ボタンが表示されます。

[Sign In] をクリックするとサインイン画面が表示されるので、Office 365 のアカウントでサインインします。アクセス許可の承諾が求められたら [承諾] をクリックします。

無事にサインインできると、ユーザー名と写真が表示されます。

ちなみにユーザー名をクリックするとサインアウトのリンクがあり、そこからサインアウトできます。

Person component を使う

次に Person component を使ってみます。index.html の mgt-person の下に以下の行を追加します。

<mgt-person person-query="exouser02@contoso.onmicrosoft.com" show-name="true" show-email="true" person-card="hover" ></mgt-person>

person-query に指定するのは、いま検証に使用しているのとは別のユーザーのメールアドレスのほうが動作が分かりやすいと思います。ここでは、person-query に合致するユーザーの名前とメールアドレスを表示して、マウスを重ねると person card が表示されるようにしています。

index.html を保存すると、Live Server の自動更新機能によって画面が自動でリフレッシュして、改めてアクセス許可の承諾を求められたのではないでしょうか。いったんここでは承諾して進めると、以下のように person-query に指定したユーザーの情報が表示されます。

最後にはうまく表示されても、途中に何回もアクセス許可を求められるのは面倒なので、最初のサインインの時に必要なアクセス許可をまとめて求めるようにします。mgt-msal-provider を以下のように変えます。

<html>

<head>
    <script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
</head>

<body>
    <mgt-msal-provider
        client-id="1d852daa-5f3b-4727-afde-80714fbe9577"
        authority="https://login.microsoftonline.com/contoso.onmicrosoft.com/"
        scopes="user.read,openid,profile,people.read,user.readbasic.all"></mgt-msal-provider>
    <mgt-login></mgt-login>
    <mgt-person person-query="exouser02@contoso.onmicrosoft.com" show-name="true" show-email="true" person-card="hover" ></mgt-person>
</body>

</html>

前のコードと比較して、scopes の指定が増えています。ここにあらかじめ必要なアクセス許可をまとめて記載しておきます。なにも記載しないと ” user.read,openid,profile” だけになります。ここでは、Person component で他人を検索して表示する際に必要な People.Read と、同じく他人の写真を表示するのに必要な User.ReadBasic.All を追加で指定しています。Component のどの機能でどのアクセス許可が必要になるのかは、各 Component のリファレンスのページに書いてあります。

ブラウザーを開きなおして、前とは違うユーザーでサインインしてみると、一気に複数のアクセス許可が求められるのが分かると思います。そしてサインイン後には自分の情報と他人の情報がまとめて表示されます。

Get component を使う

Microsoft Graph Toolkit には複数の Component が用意されていますが、最後に自由に Get リクエストを送信できる Get component を使ってみたいと思います。さらに Template も使いながら、その中で先ほどの Person component も使います。

index.html を以下のような内容にします。

<html>

<head>
    <script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
    <style>
        table {
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid gray;
            text-align: left;
        }
    </style>
</head>

<body>
    <mgt-msal-provider client-id="1d852daa-5f3b-4727-afde-80714fbe9577"
        authority="https://login.microsoftonline.com/contoso.onmicrosoft.com/"
        scopes="user.read,openid,profile,people.read,user.readbasic.all,mail.read,contacts.read"></mgt-msal-provider>
    <mgt-login></mgt-login>
    <mgt-get resource="/me/mailfolders/inbox/messages?$select=receivedDateTime,sender,subject&$top=5" version="beta"
        scopes="mail.read" max-pages="2">
        <template>
            Loaded messages: {{value.length}}

            <div>
                <table>
                    <tr>
                        <th>Received</th>
                        <th>Sender</th>
                        <th>Subject</th>
                    </tr>
                    <tr data-for='message in value'>
                        <td>{{ message.receivedDateTime }}</td>
                        <td>
                            <mgt-person person-query='{{ message.sender.emailAddress.address }}' show-name="true"
                                show-email="true" person-card="hover"></mgt-person>
                        </td>
                        <td>{{ message.subject}}</td>
                    </tr>
                </table>
            </div>

        </template>
        <template data-type="loading">
            loading
        </template>
    </mgt-get>
</body>

</html>

やっていることとしては、受信トレイにあるメールを 5 通ずつ最大 2 回取得して、受信時刻と差出人と件名を表形式で表示します。scopes に mail.read と contacts.read を追加していますが、メールの差出人によってはもしかするとさらに追加のアクセス許可が必要になるかもしれません。

うまくいくと以下のように表示されます。