Создание веб-приложения Node.js, которое вызывает веб-API

Статья
03/29/2025

применяется к: белый круг с серым символом X. арендаторы рабочей силы зеленый круг с символом белой галочки. внешние клиенты (подробнее)

В этой статье вы готовите проект приложения, который вы создали в руководстве : подготавливаете вашего внешнего клиента для входа пользователей в веб-приложение Node.js, чтобы вызывать веб-API. Эта статья является второй частью серии из четырех частей руководств.

Необходимые условия

Выполните действия, описанные в первой части этой серии руководств, Подготовка внешнего клиента для вызова API в Node.js веб-приложении.

Обновление файлов проекта

Создайте дополнительные файлы, fetch.js, todolistController.js, todos.js, todos.hbs и .env, а затем упорядочить их для достижения следующей структуры проекта:

    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

Установка зависимостей приложений

В терминале установите дополнительные пакеты Node, axios, cookie-parser, body-parser, method-override, выполнив следующую команду:

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

Обновление компонентов пользовательского интерфейса приложения

В редакторе кода откройте файл views/index.hbs, а затем добавьте ссылку Посмотреть ваш список дел.
```
    <a href="/todos">View your todolist</a>
```
Теперь ваш файл /index.hbs выглядит примерно так:
```
    <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}}
```
Мы добавим ссылку на пользовательский интерфейс, который позволяет взаимодействовать с ciam-ToDoList-api. Мы определим экспресс-маршрут для этой конечной точки далее в этом руководстве.

В редакторе кода откройте файл views/todos.hbs, а затем добавьте следующий код:

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

Это представление позволяет пользователю выполнять задачи, инициирующие вызов API. Например, после входа пользователя и получения маркера доступа пользователь может создать ресурс (задачу) в приложении API, отправив форму.

Дальнейшие действия

Далее вы узнаете, как выполнить вход в систему пользователей и получить токен доступа.

Вход пользователей и получение токена доступа

Поделиться через