Partager via


Appeler une API web dans une application web Node.js

S’applique à :Cercle blanc avec un symbole X gris. Locataires de main-d’œuvre Cercle vert avec un symbole de coche blanche. Locataires externes (en savoir plus)

Dans cet article, vous allez apprendre à appeler une API web à partir de votre application web cliente Node.js à l’aide du jeton d’accès que vous achetez dans Acquérir un jeton d’accès. L’API web est protégée par l’ID externe Microsoft Entra. Cet article est la quatrième et la dernière partie d’une série de guides en quatre parties.

Prérequis

Mise à jour du code

  1. Dans votre éditeur de code, ouvrez le fichier routes/todos.js, puis ajoutez le code suivant :

        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;
    

    Ce fichier contient des itinéraires express pour créer, lire et supprimer une ressource dans l’API protégée. Chaque route utilise trois fonctions d’intergiciel, qui s’exécutent dans cette séquence :

    • isAuthenticated vérifie si l’utilisateur est authentifié.

    • getToken demande un jeton d’accès. Vous avez défini cette fonction précédemment dans Acquérir un jeton d’accès. Par exemple, la création d’un itinéraire de ressources (demande POST) demande un jeton d’accès avec des autorisations de lecture et d’écriture.

    • Enfin, les méthodes postToDo ou deleteToDogetToDos gèrent la logique réelle pour manipuler la ressource. Ces fonctions sont définies dans le fichier contrôleur/todolistController.js .

  2. Dans votre éditeur de code, ouvrez le fichier contrôleur/todolistController.js , puis ajoutez le code suivant :

        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);
            }
        };
    

    Chacune de ces fonctions collecte toutes les informations requises pour appeler une API. Il délègue ensuite le travail à la callEndpointWithToken fonction et attend une réponse. La callEndpointWithToken fonction est définie dans le fichier fetch.js . Par exemple, pour créer une ressource dans l’API, la postToDo fonction transmet un point de terminaison, un jeton d’accès, une méthode HTTP et un corps de requête à la callEndpointWithToken fonction et attend une réponse. Il redirige ensuite l’utilisateur vers la vue todo.hbs pour afficher toutes les tâches.

  3. Dans votre éditeur de code, ouvrez le fichier fetch.js, puis ajoutez le code suivant :

        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,
        };
    

    Cette fonction effectue l’appel d’API effectif. Notez comment inclure le jeton d’accès comme valeur du jeton du porteur dans l’en-tête de requête HTTP :

        //...        
        headers: {
            Authorization: `Bearer ${accessToken}`,
        }        
        //...
    
  4. Dans votre éditeur de code, ouvrez le fichier .env , puis ajoutez la configuration suivante :

        # 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'
    

    Le NODE_TLS_REJECT_UNAUTHORIZED='0' paramètre de votre fichier .env indique Node.js d’ignorer les erreurs de certificat SSL, telles que l’erreur de certificat auto-signé.

  5. Dans votre éditeur de code, ouvrez le app.js fichier, puis :

    1. Ajoutez le routeur todo à l’aide du code suivant :

          var todosRouter = require('./routes/todos');
      
    2. Utilisez le routeur todo à l’aide du code suivant :

          app.use('/todos', todosRouter); 
      

Exécuter et tester l’application web et l’API

À ce stade, vous êtes prêt à appeler l’API web à partir de l’application web cliente :

  1. Suivez les étapes décrites dans Sécuriser un article sur l’API web ASP.NET pour démarrer votre application API web. Votre API web est désormais prête à traiter les requêtes des clients.

  2. Dans votre terminal, vérifiez que vous êtes dans le dossier de projet qui contient votre application web cliente, par ciam-sign-in-call-api-node-express-web-appexemple, exécutez la commande suivante :

    npm start
    

    Votre application web cliente démarre.

  3. Utilisez les étapes de l’exemple d’application web et d’API d’exécution et de test pour montrer comment l’application cliente appelle l’API web.

Vous pouvez vouloir :