共用方式為

建立 Node.js Web 應用程式以呼叫 API

  • 發行項

適用於：具有灰色 X 符號的白色圓圈。員工租用戶內含白色核取記號的綠色圓圈。 外部租用戶 (深入了解)

在本文中，您會準備在教學課程：準備外部租用戶中建立的應用程式專案，以在 Node.js Web 應用程式中登入使用者，以呼叫 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 元件

  1. 在程式碼編輯器中，開啟 views/index.hbs 檔案，然後新增 [檢視待辦事項清單] 連結：

        <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 互動。 我們稍後會在本指南中定義此端點的快速路由。

  2. 在程式碼編輯器中，開啟 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 應用程式中建立資源 (工作)。

下一步

接下來，了解如何登入使用者並取得存取權杖：

登入使用者並取得存取權杖