ユーザーのメールを表示する

完了

Microsoft Authentication Library を使用して、JavaScript アプリを作成し Microsoft 365 に接続しました。 次に、ユーザーのメールを取得してアプリに表示します。

アプリに必要なアクセス許可を決定する

Microsoft Graph によって公開されるすべてのデータはセキュリティで保護されているため、アプリがアクセスするためには適切なアクセス許可が必要です。 必要なアクセス許可は、アプリがアクセスする必要のある情報の種類によって異なります。 たとえば、アプリがユーザーの予定表にアクセスするには、Calendars.Read アクセス許可が必要です。 アプリがユーザーのメールにアクセスするには、Mail.Read アクセス許可が必要です。 各操作に必要なアクセス許可の正確なリストは、Microsoft Graph API リファレンスで確認できます。

アプリがさまざまな種類のデータを読み込む場合、ユーザーは、この情報へのアクセスに必要な複数のアクセス許可を付与する必要があります。 アプリは、実際に必要なアクセス許可のみを要求する必要があります。

たとえば、アプリに 2 つのページがあるとします。 1 つのページにはユーザーのメールが表示され、もう 1 つのページにはユーザーの予定表が表示されます。 ユーザーがアプリに初めてサインインするとき、アプリは基本的なプロファイル情報へのアクセス許可のみを要求します。 ユーザーがメールを表示するページにアクセスすると、アプリはユーザーのメールを読み込むためのアクセス許可を要求します。 ユーザーがアプリ内で予定表が表示されるページにアクセスしたことがない場合、アプリは予定表のデータにアクセスできません。

このパターンは動的な同意と呼ばれ、Microsoft 365 に接続されているアプリがアクセス許可を要求する方法として推奨されています。 動的な同意により、ユーザーは使用するアプリに共有するデータを制御することができ、セキュリティ リスクを最小限に抑えることができます。

必要なアクセス許可を指定する

Microsoft Graph を呼び出す前に、Microsoft Authentication Library に Microsoft Graph が要求するアクセス許可のリストが含まれていることを確認してください。 Microsoft Authentication Library は、以前取得したアクセス トークンに必要なスコープが含まれているかどうかを自動的に確認します。 含まれていない場合は、新しいアクセス トークンの取得が自動的に試みられます。 アプリを初めて使用する場合、Microsoft Authentication Library によって、アプリがこの情報にアクセスすることへの同意を求めるポップアップ ウィンドウが表示されます。

グローバル変数で Microsoft Authentication Library のスコープを追跡している場合、呼び出しを実行する前にスコープのリストに必要なアクセス許可が含まれていることを確認します。 必要なスコープをすべての呼び出しの前に確認する必要があるため、ヘルパー関数でラップすることができます。

function ensureScope (scope) {
  if (!msalRequest.scopes.some((s) => s.toLowerCase() === scope.toLowerCase())) {
    msalRequest.scopes.push(scope);
  }
}

Microsoft Graph を呼び出してデータを取得する場合、ヘルパー関数を呼び出し、必要なアクセス許可が含まれていることを確認します。

async function getEmails() {
  ensureScope('mail.read');
  // ...
}

Microsoft Graph からユーザーのメールを取得する

ユーザーのメールを Microsoft Graph から取得する場合、/me/messages エンドポイントを呼び出します。 サインイン ユーザーのメールボックスからメールのリストが返されます。 ユーザーのメールを取得するには、アプリに Mail.Read アクセス許可が付与されている必要があります。 Microsoft Graph SDK を使用して Microsoft Graph エンドポイントを呼び出すことができます。 これを使用するには、エンドポイントと実行する要求の種類を指定します。

メールの取得は GET 要求であり、次のように実行します。

graphClient.api('/me/messages').get();

Microsoft Graph エンドポイントはデータを任意の順序で返します。 最新のメッセージを取得したことを確認するために、受信日で降順に並べ替えます。

graphClient
  .api('/me/messages')
  .orderby('receivedDateTime desc')
  .get();

前述したとおり、Microsoft Graph からデータを取得するときは常に必要なデータのみを取得する必要があります。 Microsoft Graph がネットワーク経由で取得および転送するデータの量を最小限に抑えると、アプリのパフォーマンスを大幅に向上させるのに役立ちます。

Microsoft 365 から取得されるデータの量は、次の 2 つの方法で制限できます。

• 取得するアイテムの数を選択します。
• 含める特定の情報を選択します。

取得するプロパティを指定するには、select メソッドで Microsoft Graph 要求を拡張し、返すプロパティのコンマ区切りのリストをパスします。 たとえば、件名と受信した日時だけのメールのリストを取得するには、次のコマンドを使用します。

graphClient
  .api('/me/messages')
  .select('subject,receivedDateTime')
  .orderby('receivedDateTime desc')
  .get();

ヒント

各エンドポイントで利用できるプロパティの完全なリストは、Microsoft Graph API リファレンスで確認できます。

Microsoft 365 から返されるデータの量を制限するために行うことのできるもう 1 つの操作は、取得するアイテムの数を指定することです。 取得するアイテムの数を指定するには、Microsoft Graph 要求を top メソッドで拡張します。 たとえば、最後に受信した 10 件のメールを取得するには、次のコマンドを使用します。

graphClient
  .api('/me/messages')
  .select('subject,receivedDateTime')
  .orderby('receivedDateTime desc')
  .top(10)
  .get();

次の手順

これまでに学習した内容を実践して、現在のユーザーが最後に受信した 10 件のメールを表示するようにアプリを拡張してみましょう。

続行