API を呼び出す Node.js Web アプリを作成する

  • [アーティクル]

適用対象: 灰色の X 記号が付いた白い円。 従業員テナント 内側に白いチェック マーク記号がある緑の円。 外部テナント (詳細情報)

この記事では、「チュートリアル: Node.js Web アプリでユーザーをサインインさせるように顧客テナントを準備する」で作成したアプリ プロジェクトを、Web API を呼び出すように準備します。 この記事は 4 部構成のガイド シリーズの第 2 部です。

前提条件

プロジェクトのファイルを更新する

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

アプリの依存関係をインストールする

ターミナルで、次のコマンドを実行し、axios、cookie-parser、body-parser、method-override といった Node パッケージをさらにインストールします。

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

アプリ UI コンポーネントの更新

  1. コード エディターで 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}}

    ciam-ToDoList-api とのやりとりを可能にするリンクが UI に追加されます。 このガイドの後半で、このエンドポイントの高速ルートが定義されます。

  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 アプリにリソース (タスク) を作成できます。

次のステップ

次に、ユーザーをサインインさせ、アクセス トークンを取得する方法について説明します。

ユーザーのサインインとアクセス トークンの取得