チュートリアル: セキュリティで保護された JavaScript アプリからユーザーとしてMicrosoft Graphにアクセスする

Azure App Serviceで実行されている Web アプリからMicrosoft Graphにアクセスする方法について説明します。

へのアクセスを示す図表

Web アプリからMicrosoft Graphへのアクセスを追加し、サインインしているユーザーとして何らかのアクションを実行する必要があります。 このセクションでは、委任されたアクセス許可を Web アプリに付与し、サインインしているユーザーのプロファイル情報をMicrosoft Entra IDから取得する方法について説明します。

このチュートリアルでは、次の作業を行う方法について説明します。

Azure アカウントがない場合は、開始する前に free アカウントを作成します。

前提条件

• App Service 認証/承認モジュールが有効になっているAzure App Serviceで実行されている Web アプリケーション。

Microsoft Graphを呼び出すフロントエンド アクセスを許可する

Web アプリで認証と承認を有効にしたので、Web アプリはMicrosoft ID プラットフォームに登録され、Microsoft Entra アプリケーションによってサポートされます。 この手順では、ユーザーのMicrosoft Graphにアクセスするためのアクセス許可を Web アプリに付与します。 (技術的には、Web アプリのMicrosoft Entra アプリケーションに、ユーザーのMicrosoft Graph Microsoft Entra アプリケーションにアクセスするためのアクセス許可を付与します)。

1. Microsoft Entra 管理センターで、Applications を選択します。

2. アプリの登録>Owned applications>このディレクトリ内のすべてのアプリケーションを表示します を選択します。 対象の Web アプリ名を選択し、 [API のアクセス許可] を選択します。

3. アクセス許可の追加を選択し、MICROSOFT API とMicrosoft Graphを選択します。

4. [委任されたアクセス許可] を選択し、一覧から [User.Read] を選択します。 [アクセス許可の追加] を選択します.

使用可能なアクセス トークンを返すように App Service を構成する

Web アプリには、サインインしているユーザーとしてMicrosoft Graphにアクセスするために必要なアクセス許可が付与されました。 この手順では、App Service の認証と承認を構成して、Microsoft Graphにアクセスするための使用可能なアクセス トークンを提供します。 この手順では、ダウンストリーム サービス (Microsoft Graph): https://graph.microsoft.com/User.Readの User.Read スコープを追加する必要があります。

Node.jsからMicrosoft Graphを呼び出す

Web アプリに必要なアクセス許可が付与され、Microsoft Graphのクライアント ID もログイン パラメーターに追加されます。

クライアント ライブラリ パッケージをインストールする

@azure/identity と @microsoft/microsoft-graph-client パッケージを npm でプロジェクトにインストールします。

npm install @microsoft/microsoft-graph-client

認証情報を構成する

認証設定を保持するオブジェクトを作成します。

// partial code in app.js
const appSettings = {
    appCredentials: {
        clientId: process.env.WEBSITE_AUTH_CLIENT_ID, // Enter the client Id here,
        tenantId: "common", // Enter the tenant info here,
        clientSecret: process.env.MICROSOFT_PROVIDER_AUTHENTICATION_SECRET // Enter the client secret here,
    },
    authRoutes: {
        redirect: "/.auth/login/aad/callback", // Enter the redirect URI here
        error: "/error", // enter the relative path to error handling route
        unauthorized: "/unauthorized" // enter the relative path to unauthorized route
    },
    protectedResources: {
        graphAPI: {
            endpoint: "https://graph.microsoft.com/v1.0/me", // resource endpoint
            scopes: ["User.Read"] // resource scopes
        },
    },
}

ユーザーの代わりにMicrosoft Graphを呼び出す

次のコードは、Microsoft Graph コントローラーをアプリとして呼び出し、ユーザー情報を取得する方法を示しています。

// controllers/graphController.js

// get the name of the app service instance from environment variables
const appServiceName = process.env.WEBSITE_SITE_NAME;

const graphHelper = require('../utils/graphHelper');

exports.getProfilePage = async(req, res, next) => {

    try {
        // get user's access token scoped to Microsoft Graph from session
        // use token to create Graph client
        const graphClient = graphHelper.getAuthenticatedClient(req.session.protectedResources["graphAPI"].accessToken);

        // return user's profile
        const profile = await graphClient
            .api('/me')
            .get();

        res.render('profile', { isAuthenticated: req.session.isAuthenticated, profile: profile, appServiceName: appServiceName });   
    } catch (error) {
        next(error);
    }
}

前のコードは、次の getAuthenticatedClient 関数に依存して、クライアントMicrosoft Graph返します。

// utils/graphHelper.js

const graph = require('@microsoft/microsoft-graph-client');

getAuthenticatedClient = (accessToken) => {
    // Initialize Graph client
    const client = graph.Client.init({
        // Use the provided access token to authenticate requests
        authProvider: (done) => {
            done(null, accessToken);
        }
    });

    return client;
}

リソースをクリーンアップする

この複数のパートで構成されるチュートリアルのすべての手順を完了している場合、App Service、App Service ホスティング プラン、ストレージ アカウントがリソース グループに作成されています。 また、Microsoft Entra IDでアプリの登録を作成しました。 外部構成を選択した場合は、新しい外部テナントが作成されている可能性があります。 これらのリソースとアプリの登録が不要になったら、引き続き料金が発生することのないように、これらを削除します。

このチュートリアルでは、次の作業を行う方法について説明します。

リソース グループを削除します

Azure ポータルで、ポータル メニューから Resource groups を選択し、App Service と App Service プランを含むリソース グループを選択します。

[リソース グループの削除] を選択して、リソース グループとすべてのリソースを削除します。

このコマンドの実行には数分かかることがあります。

アプリの登録を削除する

Microsoft Entra 管理センターで、アプリの登録 を選択します。 次に、作成したアプリケーションを選択します。

アプリの登録の概要で、 [削除] を選択します。

外部テナントを削除する

新しい外部テナントを作成した場合は、削除できます。 Microsoft Entra 管理センターに移動し、Entra ID>Overview>でManage テナントを管理します。

削除するテナントを選択してから、[削除] を選択します。

テナントを削除する前に、必要なアクションを完了することが必要な場合があります。 たとえば、テナント内のすべてのユーザー フローとアプリの登録を削除する必要がある場合があります。

テナントを削除する準備ができたら、[削除] を選択します。

次のステップ

このチュートリアルでは、以下の内容を学習しました。