Créer une application web Node.js qui appelle une API web

S’applique à : Locataires de main-d’œuvre Locataires externes (en savoir plus)

Dans cet article, vous préparez le projet d’application que vous avez créé dans le tutoriel : préparer votre instance externe pour permettre à des utilisateurs de se connecter dans une application web Node.js afin d’appeler une API de service web. Cet article est la deuxième partie d’une série de guides en quatre parties.

Conditions préalables

• Effectuez les étapes décrites dans la première partie des guides de cette série, Préparez le tenant externe pour 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 d’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

1. 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 ciam-ToDoList-api. Nous définissons l’itinéraire express pour ce point de terminaison plus loin dans ce guide.

2. 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 :

Connectez-vous et obtenez un jeton d'accès