Partager via

Appeler une API web dans une application web Node.js

  • Article

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 l’API web à partir de votre application web cliente Node.js en utilisant le jeton d’accès que vous avez acquis dans Acquérir un jeton d’accès. L’API web est protégée par ID externe Microsoft Entra. Cet article est la quatrième et dernière partie d’une série de guides en quatre parties.

Prérequis

Mettre à jour le code

  1. Dans votre éditeur de code, ouvrez le fichier routes/todos.js et 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 routes express pour créer, lire et supprimer des ressources dans l’API protégée. Chaque route utilise trois fonctions de middleware, qui s’exécutent dans cet ordre :

    • isAuthenticated vérifie que 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 route de création de ressources (requête POST) demande un jeton d’accès avec des autorisations en lecture et en écriture.

    • Enfin, les méthodes postToDo ou deleteToDo getToDos gèrent la logique réelle de manipulation de la ressource. Ces fonctions sont définies dans le fichier controller/todolistController.js.

  2. Dans votre éditeur de code, ouvrez le fichier controller/todolistController.js et 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. Elle délègue ensuite le travail à la fonction callEndpointWithToken et attend une réponse. La fonction callEndpointWithToken est définie dans le fichier fetch.js. Par exemple, pour créer une ressource dans l’API, la fonction postToDo passe un point de terminaison, un jeton d’accès, une méthode HTTP et un corps de requête à la fonction callEndpointWithToken et attend une réponse. Elle 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 et 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 en question. Notez comment vous incluez le jeton d’accès en tant que valeur du jeton du porteur dans l’en-tête de la requête HTTP :

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

  4. Dans votre éditeur de code, ouvrez le fichier .env et 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 paramètre NODE_TLS_REJECT_UNAUTHORIZED='0' 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 fichier app.js, puis :

    1. Ajoutez le routeur todo en utilisant le code suivant :

          var todosRouter = require('./routes/todos');

    2. Utilisez le routeur todo en utilisant le 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. Utilisez les étapes dans l’article Sécuriser une API web ASP.NET pour démarrer votre application API web. Votre API web est maintenant prête à traiter les requêtes clientes.

  2. Dans votre terminal, vérifiez que vous êtes dans le dossier du projet contenant votre application web cliente, par exemple ciam-sign-in-call-api-node-express-web-app, puis exécutez la commande suivante :

    npm start

    Votre application web cliente démarre.

  3. Suivez les étapes décrites dans Exécuter et tester l’exemple d’application web et l’API pour montrer comment l’application cliente appelle l’API web.

Étapes suivantes

Vous voudrez peut-être :