チュートリアル: App Service からバックエンド API を介して Microsoft Graph に認証をフローする

フロントエンドアプリのユーザー資格情報を受け入れるようにバックエンド App Service アプリを作成して構成し、その資格情報をダウンストリームの Azure サービスと交換する方法について説明します。この方法を使用すると、ユーザーはフロントエンド App Service アプリにサインインし、その資格情報をバックエンド App Service に渡し、同じ ID で Azure サービスにアクセスできます。

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

バックエンド認証アプリを構成して、ダウンストリーム Azure サービスのスコープが設定されたトークンを提供します。
JavaScript コードを使用して、サインインしているユーザーのアクセストークンをダウンストリームサービスの新しいトークンと交換します。
JavaScript コードを使用してダウンストリームサービスにアクセスします。

[前提条件]

このチュートリアルを開始する前に、前のチュートリアル「セキュリティで保護された JavaScript アプリからユーザーとして Microsoft Graph にアクセスする」を完了してください。チュートリアルの最後にリソースを削除しないでください。このチュートリアルでは、2 つのアプリサービスとそれに対応する認証アプリがあることを前提としています。

前のチュートリアルでは、Azure CLI のシェルとして Azure Cloud Shell を使用しました。このチュートリアルでは、引き続きその使用方法を説明します。

アーキテクチャ

このチュートリアルでは、フロントエンドアプリによって提供されたユーザー資格情報をバックエンドアプリに渡し、次に Azure サービスに渡す方法について説明します。このチュートリアルでは、ダウンストリームサービスは Microsoft Graph です。ユーザーの資格情報は、Microsoft Graph からプロファイルを取得するために使用されます。

サインインしているユーザーの代わりに Microsoft Graph に接続する App Service を表すアーキテクチャイメージ。

ユーザーがこのアーキテクチャで Microsoft Graph 情報を取得するための認証フロー:

前のチュートリアルで取り上げた内容は次のとおりです。

Active Directory を ID プロバイダーとして使用するように構成されたフロントエンドアプリにユーザーをサインインさせます。
フロントエンドアプリサービスは、ユーザーのトークンをバックエンドアプリサービスに渡します。
バックエンドアプリは、フロントエンドが API 要求を行えるようにセキュリティで保護されています。ユーザーのアクセストークンには、バックエンド API の対象ユーザーと user_impersonationのスコープがあります。
バックエンドアプリの登録には、スコープ User.Readを持つ Microsoft Graph が既に含まれます。このスコープは、既定ですべてのアプリ登録に追加されます。
前のチュートリアルの最後に、Graph が接続されていないため、偽のプロファイルがフロントエンドアプリに返されました。

このチュートリアルでは、アーキテクチャを拡張します。

バックエンドアプリのユーザーの同意画面をバイパスするための管理者の同意を付与します。
フロントエンドアプリから送信されたアクセストークンを、Microsoft Graph に必要なアクセス許可を持つアクセストークンに変換するようにアプリケーションコードを変更します。
バックエンドアプリに Microsoft Graph などのダウンストリーム Azure サービスのスコープを持つ新しいトークンとトークンを交換させるコードを提供します。
バックエンドアプリが 新しいトークンを使用 してダウンストリームサービスに現在の認証済みユーザーとしてアクセスするようにコードを提供します。
を使用してバックエンドアプリをaz webapp upします。
Graph が接続されているので、このチュートリアルの最後には、実際のプロファイルがフロントエンドアプリに返されます。

このチュートリアルでは、次の操作は行いません。

前のチュートリアルからフロントエンドアプリを変更します。
User.Readはすべての認証アプリに既定で追加されるため、バックエンド認証アプリのスコープアクセス許可を変更します。

前のチュートリアルでは、ユーザーがフロントエンドアプリにサインインすると、ポップアップウィンドウでユーザーの同意を求められます。

このチュートリアルでは、Microsoft Graph からユーザープロファイルを読み取るために、バックエンドアプリは、サインインしているユーザーのアクセストークンを、Microsoft Graph に必要なアクセス許可を持つ新しいアクセストークンと交換する必要があります。ユーザーはバックエンドアプリに直接接続されていないため、対話形式で同意画面にアクセスすることはできません。管理者の同意を付与するには、Microsoft Entra ID でバックエンドアプリのアプリ登録を構成して、この問題を回避する必要があります。 Microsoft Entra 管理者は通常、この設定を変更します。

Azure portal を開き、バックエンド App Service のリソースを検索します。
>認証] セクションを見つけます。
ID プロバイダーを選択して認証アプリに移動します。
認証アプリで、[ 管理>API アクセス許可] を選択します。
[ 既定のディレクトリに管理者の同意を付与する] を選択します。
ポップアップウィンドウで、[ はい ] を選択して同意を確認します。
[状態] 列に [既定のディレクトリに対して付与] と表示されていることを確認します。この設定により、バックエンドアプリはサインインしているユーザーに同意画面を表示する必要がなくなり、アクセストークンを直接要求できます。サインインしているユーザーは、アプリの登録が作成される既定のスコープであることから、User.Read スコープ設定にアクセスできます。

2. npm パッケージをインストールする

前のチュートリアルでは、Azure portal で ID プロバイダーを構成することによって認証のみが提供されたため、バックエンドアプリでは認証に npm パッケージは必要ありませんでした。このチュートリアルでは、バックエンド API のサインインしているユーザーのアクセストークンを、スコープ内の Microsoft Graph とアクセストークンと交換する必要があります。この交換では App Service 認証が使用されなくなったため、この交換は 2 つのライブラリで完了します。代わりに、Microsoft Entra ID と MSAL.js を直接使用します。

@azure/msal-node: 交換トークン
@microsoft/microsoft-graph-client: Microsoft Graph に接続する

Azure Cloud Shell を開き、サンプルディレクトリのバックエンドアプリに変更します。
```
cd js-e2e-web-app-easy-auth-app-to-app/backend
```
Azure Microsoft Authentication Library (MSAL) npm パッケージをインストールします。
```
npm install @azure/msal-node
```
Microsoft Graph npm パッケージをインストールします。
```
npm install @microsoft/microsoft-graph-client
```

3. 現在のトークンを Microsoft Graph トークンと交換するコードを追加する

この手順を完了するためのソースコードが用意されています。これを含めるには、次の手順を使用します。

./src/server.js ファイルを開きます。
ファイルの先頭にある次の依存関係のコメントを解除します。
```
import { getGraphProfile } from './with-graph/graph';
```
同じファイルで、 graphProfile 変数のコメントを解除します。
```
let graphProfile={};
```

同じファイルで、getGraphProfile ルート内の次のget-profile行のコメントを解除して、Microsoft Graph からプロファイルを取得します。

// where did the profile come from
profileFromGraph=true;

// get the profile from Microsoft Graph
graphProfile = await getGraphProfile(accessToken);

// log the profile for debugging
console.log(`profile: ${JSON.stringify(graphProfile)}`);

変更を保存します :Ctrl + s。

バックエンドアプリを再デプロイします。

az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name>

4. バックエンドコードを調べて、バックエンド API トークンを Microsoft Graph トークンと交換する

Microsoft Graph トークンのバックエンド API 対象ユーザートークンを変更するには、バックエンドアプリでテナント ID を検索し、MSAL.js 構成オブジェクトの一部として使用する必要があります。バックエンドアプリは Id プロバイダーとして Microsoft で構成されているため、テナント ID とその他の必要な値は既に App Service アプリの設定に含まれています。

サンプルアプリでは、次のコードが提供されます。この機能を必要とする他のアプリにこの作業を適用できるように、その理由と動作方法を理解する必要があります。

テナント ID を取得するためのコードを調べる

./backend/src/with-graph/auth.js ファイルを開きます。

getTenantId()関数を確認します。

export function getTenantId() {

    const openIdIssuer = process.env.WEBSITE_AUTH_OPENID_ISSUER;
    const backendAppTenantId = openIdIssuer.replace(/https:\/\/sts\.windows\.net\/(.{1,36})\/v2\.0/gm, '$1');

    return backendAppTenantId;
}

この関数は、 WEBSITE_AUTH_OPENID_ISSUER 環境変数から現在のテナント ID を取得します。 ID は、正規表現を使用して変数から解析されます。

MSAL.js を使用して Graph トークンを取得するコードを検査する

./backend/src/with-graph/auth.js ファイルで、getGraphToken()関数を確認します。

MSAL.js 構成オブジェクトをビルドします。 MSAL 構成を使用して、 clientCredentialAuthorityを作成します。代理リクエストを設定します。次に、 acquireTokenOnBehalfOf を使用して、バックエンド API アクセストークンを Graph アクセストークンと交換します。

// ./backend/src/auth.js
// Exchange current bearerToken for Graph API token
// Env vars were set by App Service
export async function getGraphToken(backEndAccessToken) {

    const config = {
        // MSAL configuration
        auth: {
            // the backend's authentication CLIENT ID 
            clientId: process.env.WEBSITE_AUTH_CLIENT_ID,
            // the backend's authentication CLIENT SECRET 
            clientSecret: process.env.MICROSOFT_PROVIDER_AUTHENTICATION_SECRET,
            // OAuth 2.0 authorization endpoint (v2)
            // should be: https://login.microsoftonline.com/BACKEND-TENANT-ID
            authority: `https://login.microsoftonline.com/${getTenantId()}`
        },
        // used for debugging
        system: {
            loggerOptions: {
                loggerCallback(loglevel, message, containsPii) {
                    console.log(message);
                },
                piiLoggingEnabled: true,
                logLevel: MSAL.LogLevel.Verbose,
            }
        }
    };

    const clientCredentialAuthority = new MSAL.ConfidentialClientApplication(config);

    const oboRequest = {
        oboAssertion: backEndAccessToken,
        // this scope must already exist on the backend authentication app registration 
        // and visible in resources.azure.com backend app auth config
        scopes: ["https://graph.microsoft.com/.default"]
    }

    // This example has App Service validate token in runtime
    // from headers that can't be set externally

    // If you aren't using App Service's authentication, 
    // you must validate your access token yourself
    // before calling this code
    try {
        const { accessToken } = await clientCredentialAuthority.acquireTokenOnBehalfOf(oboRequest);
        return accessToken;
    } catch (error) {
        console.log(`getGraphToken:error.type = ${error.type}  ${error.message}`);
    }
}

5. バックエンドコードを調べて、新しいトークンで Microsoft Graph にアクセスする

フロントエンドアプリケーションにサインインしたユーザーとして Microsoft Graph にアクセスするには、次のような変更が加えられます。

User.Readの必要なスコープを使用して、ダウンストリームサービスである Microsoft Graph に対する API アクセス許可を持つ Active Directory アプリ登録の構成。
バックエンドアプリのユーザーの同意画面をバイパスするための管理者の同意を付与します。
フロントエンドアプリから送信されたアクセストークンを、ダウンストリームサービスである Microsoft Graph に必要なアクセス許可を持つアクセストークンに変換するようにアプリケーションコードを変更します。

コードに Microsoft Graph 用の正しいトークンが用意されたので、それを使用して Microsoft Graph へのクライアントを作成し、ユーザーのプロファイルを取得します。

./backend/src/graph.jsを開いてください。

getGraphProfile()関数でトークンを取得し、トークンから認証されたクライアントを取得してから、プロファイルを取得します。

// 
import graph from "@microsoft/microsoft-graph-client";
import { getGraphToken } from "./auth.js";

// Create client from token with Graph API scope
export function getAuthenticatedClient(accessToken) {
    const client = graph.Client.init({
        authProvider: (done) => {
            done(null, accessToken);
        }
    });

    return client;
}
export async function getGraphProfile(accessToken) {
    // exchange current backend token for token with 
    // graph api scope
    const graphToken = await getGraphToken(accessToken);

    // use graph token to get Graph client
    const graphClient = getAuthenticatedClient(graphToken);

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

    return profile;
}

6. 変更をテストする

ブラウザーでフロントエンド Web サイトを使用します。トークンの有効期限が切れた場合は、トークンの更新が必要になる場合があります。
[Get user's profile] を選択します。これにより、ベアラートークンの認証がバックエンドに渡されます。
バックエンドシステムは、アカウントの Microsoft Graph の実際の プロファイルで返答します。

7. クリーンアップ

前の手順では、リソースグループ内に Azure リソースを作成しました。

リソースグループを削除するには、Cloud Shell で次のコマンドを実行します。このコマンドの実行には 1 分かかることがあります。
```
az group delete --name myAuthResourceGroup
```
バックエンドアプリとフロントエンドアプリのセクションで以前に見つけてメモしたEnable authentication and authorization を使用します。
フロントエンドアプリとバックエンドアプリの両方のアプリ登録を削除します。
```
# delete app - do this for both front-end and back-end client ids
az ad app delete --id <client-id>
```

よく寄せられる質問

`80049217`エラーが発生しました。どういう意味ですか?

CompactToken parsing failed with error code: 80049217このエラーは、バックエンド App Service が Microsoft Graph トークンを返す権限を持っていないことを意味します。このエラーは、アプリの登録に User.Read アクセス許可がないために発生します。

`AADSTS65001`エラーが発生しました。どういう意味ですか?

このエラー AADSTS65001: The user or administrator has not consented to use the application with ID \<backend-authentication-id>. Send an interactive authorization request for this user and resource、バックエンド認証アプリが管理者の同意用に構成されていないことを意味します。バックエンドアプリのログにエラーが表示されるため、フロントエンドアプリケーションは、フロントエンドアプリにプロファイルが表示されなかった理由をユーザーに通知できません。

ユーザーとして別のダウンストリーム Azure サービスに接続するにはどうすればよいですか?

このチュートリアルでは、 Microsoft Graph に対して認証された API アプリについて説明します。同じ一般的な手順を適用して、ユーザーに代わって任意の Azure サービスにアクセスできます。

フロントエンドアプリケーションに変更はありません。バックエンドの認証アプリの登録とバックエンドアプリのソースコードに対する変更のみ。
バックエンド API のスコープを設定したユーザーのトークンを、アクセスするダウンストリームサービスにトークンとして交換します。
ダウンストリームサービスの SDK でトークンを使用してクライアントを作成します。
ダウンストリームクライアントを使用してサービス機能にアクセスします。

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-03-26

チュートリアル: App Service からバックエンド API を介して Microsoft Graph に認証をフローする

[前提条件]

アーキテクチャ

1.バックエンド アプリの管理者の同意を構成する

2. npm パッケージをインストールする

3. 現在のトークンを Microsoft Graph トークンと交換するコードを追加する

4. バックエンド コードを調べて、バックエンド API トークンを Microsoft Graph トークンと交換する

テナント ID を取得するためのコードを調べる

MSAL.js を使用して Graph トークンを取得するコードを検査する

5. バックエンド コードを調べて、新しいトークンで Microsoft Graph にアクセスする

6. 変更をテストする

7. クリーンアップ

よく寄せられる質問

80049217エラーが発生しました。どういう意味ですか?

AADSTS65001エラーが発生しました。どういう意味ですか?

ユーザーとして別のダウンストリーム Azure サービスに接続するにはどうすればよいですか?

関連するコンテンツ

フィードバック

その他のリソース

1.バックエンドアプリの管理者の同意を構成する

4. バックエンドコードを調べて、バックエンド API トークンを Microsoft Graph トークンと交換する

5. バックエンドコードを調べて、新しいトークンで Microsoft Graph にアクセスする

`80049217`エラーが発生しました。どういう意味ですか?

`AADSTS65001`エラーが発生しました。どういう意味ですか?