创建 Node.js Web 应用来调用 API

项目
05/27/2024

适用于：带灰色 X 号的白色圆圈。员工租户带白色对号的绿色圆圈。外部租户（了解详细信息）

在本文中，我们准备在教程：准备外部租户以在 Node.js Web 应用中登录用户中创建的应用项目，以调用 Web API。本文是由四部分组成的指南系列的第二部分。

先决条件

完成本指南系列第一部分（即准备外部租户以在 Node.js Web 应用程序中调用 API）中的步骤。

更新项目文件

创建更多文件：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

更新应用 UI 组件

在代码编辑器中，打开 views/index.hbs 文件，然后添加“查看 todolist”链接：

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

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

我们添加了一个指向 UI 的链接，用于与 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 应用中创建资源（任务）。

后续步骤

接下来，了解如何让用户登录并获取访问令牌：

让用户登录并获取访问令牌

通过