Vytvoření webové aplikace Node.js pro volání rozhraní API

Článek
05/24/2024

Platí pro: Bílý kruh se šedým symbolem X. Tenanti pracovních sil – externí tenanti Zelený kruh s bílým symbolem zaškrtnutí (další informace)

V tomto článku připravíte projekt aplikace, který jste vytvořili v kurzu: Příprava externího tenanta pro přihlášení uživatelů do webové aplikace Node.js pro volání webového rozhraní API. Tento článek je druhou částí čtyřdílné série průvodců.

Požadavky

Dokončete kroky v první části této série průvodců a připravte externího tenanta na volání rozhraní API ve webové aplikaci Node.js.

Aktualizace souborů projektu

Vytvořte další soubory, fetch.js, todolistController.js, todos.js, todos.hbs a .env a pak je uspořádejte, abyste dosáhli následující 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

Instalace závislostí aplikací

V terminálu nainstalujte další balíčky Node, axios, cookie-parserbody-parser, , method-overridespuštěním následujícího příkazu:

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

Aktualizace komponent uživatelského rozhraní aplikace

V editoru kódu otevřete soubor views/index.hbs a přidejte odkaz Zobrazit seznam úkolů:

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

Váš soubor views/index.hbs teď vypadá podobně jako následující soubor:

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

Přidáme odkaz na uživatelské rozhraní, které umožňuje interakci s rozhraním ciam-ToDoList-api. Expresní trasu pro tento koncový bod definujeme později v této příručce.

V editoru kódu otevřete views/todos.hbs soubor a přidejte následující kód:

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

Toto zobrazení umožňuje uživateli provádět úlohy, které inicializuje volání rozhraní API. Například po přihlášení uživatele a získání přístupového tokenu může uživatel v aplikaci API vytvořit prostředek (úkol) odesláním formuláře.

Další kroky

Dále se dozvíte, jak přihlásit uživatele a získat přístupový token:

Přihlášení uživatelů a získání přístupového tokenu

Sdílet prostřednictvím