Tworzenie aplikacji internetowej Node.js w celu wywołania interfejsu API

Dotyczy:Dzierżawcy siły roboczej — dzierżawcy zewnętrzni (dowiedz się więcej)

W tym artykule przygotujesz projekt aplikacji utworzony w artykule Samouczek: przygotowanie dzierżawy zewnętrznej do logowania użytkowników w aplikacji internetowej Node.js w celu wywołania internetowego interfejsu API. Ten artykuł jest drugą częścią czteroczęściowej serii przewodników.

Wymagania wstępne

• Wykonaj kroki opisane w pierwszej części tej serii przewodników Przygotowywanie dzierżawy zewnętrznej do wywoływania interfejsu API w aplikacji internetowej Node.js.

Aktualizowanie plików projektu

Utwórz więcej plików, fetch.js, todolistController.js, todos.js, todos.hbs i env, a następnie organizuj je w celu osiągnięcia następującej struktury projektu:

    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

Instalowanie zależności aplikacji

W terminalu zainstaluj więcej pakietów Node, axios, cookie-parser, body-parser, method-override, uruchamiając następujące polecenie:

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

Aktualizowanie składników interfejsu użytkownika aplikacji

1. W edytorze kodu otwórz plik views/index.hbs , a następnie dodaj link Wyświetl todolist :

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

   Plik views/index.hbs wygląda teraz podobnie do następującego pliku:

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

   Dodajemy link do interfejsu użytkownika, który umożliwia interakcję z interfejsem ciam-ToDoList-api. W dalszej części tego przewodnika zdefiniujemy trasę ekspresową dla tego punktu końcowego.

2. W edytorze kodu otwórz views/todos.hbs plik, a następnie dodaj następujący kod:

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

   Ten widok umożliwia użytkownikowi wykonywanie zadań, które inicjują wywołanie interfejsu API. Na przykład po zalogowaniu się użytkownika, a aplikacja uzyskuje token dostępu, użytkownik może utworzyć zasób (zadanie) w aplikacji interfejsu API, przesyłając formularz.

Następne kroki

Następnie dowiedz się, jak logować użytkowników i uzyskiwać token dostępu:

Logowanie użytkowników i uzyskiwanie tokenu dostępu