Créer une application web Node.js pour appeler une API

Article
05/30/2024

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 préparez le projet d’application que vous avez créé dans Tutoriel : Préparer votre locataire externe à connecter des utilisateurs dans une application web Node.js afin d’appeler une API web. Cet article est la deuxième partie d’une série de guides en quatre parties.

Prérequis

Suivez les étapes décrites dans la première partie de cette série de guides, Préparer un locataire externe à appeler une API dans une application web Node.js.

Mettre à jour les fichiers projet

Créez d’autres fichiers, fetch.js, todolistController.js, todos.js, todos.hbs et .env, puis organisez-les pour obtenir la structure de projet suivante :

    ciam-sign-in-call-api-node-express-web-app/
    ├── .env
    └── server.js
    └── app.js
    └── authConfig.js
    └── fetch.js
    └── package.json
    └── auth/
        └── AuthProvider.js
    └── controller/
        └── authController.js
        └── todolistController.js
    └── routes/
        └── auth.js
        └── index.js
        └── todos.js
        └── users.js
    └── views/
        └── layouts.hbs
        └── error.hbs
        └── id.hbs
        └── index.hbs   
        └── todos.hbs 
    └── public/stylesheets/
        └── style.css

Installer les dépendances de l’application

Depuis votre terminal, installez plus de packages Node, axios, cookie-parser, body-parser et method-override, en exécutant les commandes suivantes :

    npm install axios cookie-parser body-parser method-override

Mettre à jour les composants de l’interface utilisateur de l’application

Dans votre éditeur de code, ouvrez le fichier views/index.hbs, puis ajoutez un lien Afficher votre todolist :

    <a href="/todos">View your todolist</a>

Votre fichier views/index.hbs ressemble désormais au fichier suivant :

    <h1>{{title}}</h1>
    {{#if isAuthenticated }}
    <p>Hi {{username}}!</p>
    <a href="/users/id">View your ID token claims</a>
    <br>
    <a href="/todos">View your todolist</a>
    <br>
    <a href="/auth/signout">Sign out</a>
    {{else}}
    <p>Welcome to {{title}}</p>
    <a href="/auth/signin">Sign in</a>
    {{/if}}

Nous ajoutons un lien vers une interface utilisateur qui vous permet d’interagir avec le ciam-ToDoList-api. Nous définissons l’itinéraire express pour ce point de terminaison plus loin dans ce guide.

Depuis votre éditeur de code, ouvrez le fichier views/todos.hbs, puis ajoutez le code suivant :

    <h1>Todolist</h1>
    <div>
        <form action="/todos" method="POST">
            <input type="text" name="description" class="form-control" placeholder="Enter a task" aria-label="Enter a task"
                aria-describedby="button-addon">
            <button type="submit" id="button-addon">Add</button>
        </form>
    </div>
    <div class="row" style="margin: 10px;">
        <ol id="todoListItems" class="list-group"> 
            {{#each todos}} 
            <li class="todoListItem" id="todoListItem">
                <span>{{description}}</span>
                <form action='/todos?_method=DELETE' method='POST'>
                    <span><input type='hidden' name='_id' value='{{id}}'></span>
                    <span><button type='submit'>Remove</button></span>
                </form>
            </li> 
            {{/each}} 
        </ol>
    </div>
    <a href="/">Go back</a>

Cette vue permet à l’utilisateur d’effectuer des tâches qui lancent un appel d’API. Par exemple, une fois qu’un utilisateur s’est connecté et que l’application a acquis un jeton d’accès, l’utilisateur peut créer une ressource (tâche) dans l’application API en envoyant un formulaire.

Étapes suivantes

Ensuite, découvrez comment connecter des utilisateurs et acquérir un jeton d’accès :

Connecter des utilisateurs et acquérir un jeton d’accès

Partager via