Node.js Web アプリケーションで Web API を呼び出す

2025-04-22

適用対象: 灰色の X 記号がある白い円。従業員テナント白いチェックマーク記号がある緑の円。外部テナント (詳細情報)

この記事では、「アクセストークンの取得」で取得したアクセストークンを使用して、Node.js クライアント Web アプリから Web API を呼び出す方法について説明します。 Web API は Microsoft Entra 外部 ID によって保護されています。この記事は、4 部構成のガイドシリーズの 4 番目と最後の部分です。

前提条件

このガイドシリーズの最初のパートの「Node.js Web アプリケーションで API を呼び出す外部テナントを準備する」手順を完了します。
このガイドシリーズの第 2 部「 Node.js Web アプリケーションで API を呼び出すアプリを準備する」の手順を完了します。
このガイドシリーズの第 3 部の手順を完了して、Node.js Web アプリの記事のアクセストークンを取得します。

コードを更新する

コードエディターで 、routes/todos.js ファイルを開き、次のコードを追加します。
```
    const express = require('express');
    const router = express.Router();

    const toDoListController = require('../controller/todolistController');
    const authProvider = require('../auth/AuthProvider');
    const { protectedResources } = require('../authConfig');

    // custom middleware to check auth state
    function isAuthenticated(req, res, next) {
        if (!req.session.isAuthenticated) {
            return res.redirect('/auth/signin'); // redirect to sign-in route
        }

        next();
    }        
    // isAuthenticated checks if user is authenticated
    router.get('/',isAuthenticated, authProvider.getToken(protectedResources.toDoListAPI.scopes.read),toDoListController.getToDos);

    router.delete('/', isAuthenticated,authProvider.getToken(protectedResources.toDoListAPI.scopes.write),toDoListController.deleteToDo);

    router.post('/',isAuthenticated,authProvider.getToken(protectedResources.toDoListAPI.scopes.write),toDoListController.postToDo);

    module.exports = router;
```
このファイルには、保護された API でリソースを作成、読み取り、削除するための高速ルートが含まれています。各ルートでは、そのシーケンスで実行される 3 つのミドルウェア関数が使用されます。
- isAuthenticated は、ユーザーが認証されているかどうかを確認します。
- getToken はアクセストークンを要求します。この関数は、「アクセストークンの取得」で前に定義しました。たとえば、リソースの作成ルート (POST 要求) は、読み取りと書き込みのアクセス許可を持つアクセストークンを要求します。
- 最後に、 postToDo メソッドまたは deleteToDogetToDos メソッドは、リソースを操作するための実際のロジックを処理します。これらの関数は、 コントローラー/todolistController.js ファイルで定義されています。

コードエディターで コントローラー/todolistController.jsファイルを 開き、次のコードを追加します。

    const { callEndpointWithToken } = require('../fetch');
    const { protectedResources } = require('../authConfig');

    exports.getToDos = async (req, res, next) => {
        try {
            const todoResponse = await callEndpointWithToken(
                protectedResources.toDoListAPI.endpoint,
                req.session.accessToken,
                'GET'
            );
            res.render('todos', { isAuthenticated: req.session.isAuthenticated, todos: todoResponse.data });
        } catch (error) {
            next(error);
        }
    };

    exports.postToDo = async (req, res, next) => {
        try {
            if (!!req.body.description) {
                let todoItem = {
                    description: req.body.description,
                };

                await callEndpointWithToken(
                    protectedResources.toDoListAPI.endpoint,
                    req.session.accessToken,
                    'POST',
                    todoItem
                );
                res.redirect('todos');
            } else {
                throw { error: 'empty request' };
            }
        } catch (error) {
            next(error);
        }
    };

    exports.deleteToDo = async (req, res, next) => {
        try {
            await callEndpointWithToken(
                protectedResources.toDoListAPI.endpoint,
                req.session.accessToken,
                'DELETE',
                req.body._id
            );
            res.redirect('todos');
        } catch (error) {
            next(error);
        }
    };

これらの各関数は、API を呼び出すために必要なすべての情報を収集します。次に、 callEndpointWithToken 関数に作業を委任し、応答を待機します。 callEndpointWithToken関数は、fetch.js ファイルで定義されます。たとえば、API でリソースを作成するために、 postToDo 関数はエンドポイント、アクセストークン、HTTP メソッド、要求本文を callEndpointWithToken 関数に渡し、応答を待機します。次に、ユーザーを todo.hbs ビューにリダイレクトして、すべてのタスクを表示します。

コードエディターでファイル fetch.js 開き、次のコードを追加します。

    const axios = require('axios');

    /**
     * Makes an Authorization "Bearer" request with the given accessToken to the given endpoint.
     * @param endpoint
     * @param accessToken
     * @param method
     */
    const callEndpointWithToken = async (endpoint, accessToken, method, data = null) => {
        const options = {
            headers: {
                Authorization: `Bearer ${accessToken}`,
            },
        };

        switch (method) {
            case 'GET':
                return await axios.get(endpoint, options);
            case 'POST':
                return await axios.post(endpoint, data, options);
            case 'DELETE':
                return await axios.delete(endpoint + `/${data}`, options);
            default:
                return null;
        }
    };

    module.exports = {
        callEndpointWithToken,
    };

この関数は、実際の API 呼び出しを行います。アクセストークンをベアラートークンの値として HTTP 要求ヘッダーに含める方法に注目してください。

    //...        
    headers: {
        Authorization: `Bearer ${accessToken}`,
    }        
    //...

コードエディターで .env ファイルを開き、次の構成を追加します。
```
    # Use this variable only in the development environment. 
    # Please remove the variable when you move the app to the production environment.
    NODE_TLS_REJECT_UNAUTHORIZED='0'
```
.env ファイルの NODE_TLS_REJECT_UNAUTHORIZED='0' 設定は、自己署名証明書エラーなどの SSL 証明書エラーを無視するように Node.js に指示します。
コードエディターで、 app.js ファイルを開き、次の手順を実行します。
1. 次のコードを使用して、todo ルーターを追加します。
```
    var todosRouter = require('./routes/todos');
```
2. 次のコードを使用して、todo ルーターを使用します。
```
    app.use('/todos', todosRouter); 
```

Web アプリと API の実行とテスト

この時点で、クライアント Web アプリから Web API を呼び出す準備ができました。

Web API アプリを起動するには、ASP.NET Web API のセキュリティ保護に関する記事の手順を使用します。これで、Web API でクライアント要求を処理する準備ができました。
ターミナルで、 ciam-sign-in-call-api-node-express-web-appなどのクライアント Web アプリが含まれているプロジェクトフォルダーにいることを確認し、次のコマンドを実行します。
```
npm start
```
クライアント Web アプリが起動します。
サンプル Web アプリと API の実行とテストの手順を使用して、クライアントアプリが Web API を呼び出す方法を示します。

次のいずれかを行うことを考慮してください。

次の方法で共有

Node.js Web アプリケーションで Web API を呼び出す

前提条件

コードを更新する

Web アプリと API の実行とテスト

関連コンテンツ

フィードバック

その他のリソース