Een Node.js-web-app maken om een API aan te roepen

Artikel
05/24/2024

Van toepassing op: Witte cirkel met een grijs X-symbool. Externe tenants Groene cirkel met een wit vinkje. van werknemers (meer informatie)

In dit artikel bereidt u het app-project voor dat u in zelfstudie hebt gemaakt: Bereid uw externe tenant voor om gebruikers aan te melden in een Node.js web-app om een web-API aan te roepen. Dit artikel is het tweede deel van een vierdelige gidsserie.

Vereisten

Voltooi de stappen in het eerste deel van deze handleidingreeks, Bereid externe tenant voor om een API aan te roepen in een Node.js-webtoepassing.

Projectbestanden bijwerken

Maak meer bestanden, fetch.js, todolistController.js, todos.js, todos.hbs en .env, en organiseer ze vervolgens om de volgende projectstructuur te bereiken:

    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

App-afhankelijkheden installeren

Installeer in uw terminal meer Node-pakketten, axios, , cookie-parser, body-parserdoor method-overridede volgende opdracht uit te voeren:

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

Onderdelen van de gebruikersinterface van de app bijwerken

Open in de code-editor views/index.hbs-bestand en voeg vervolgens een koppeling Uw todolist weergeven toe:

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

Uw bestand views/index.hbs ziet er nu ongeveer als volgt uit:

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

We voegen een koppeling toe aan een gebruikersinterface waarmee u kunt communiceren met de ciam-ToDoList-api. Verderop in deze handleiding definiëren we de expressroute voor dit eindpunt.

Open views/todos.hbs het bestand in de code-editor en voeg de volgende code toe:

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

Met deze weergave kan de gebruiker taken uitvoeren waarmee een API-aanroep wordt gestart. Nadat een gebruiker zich bijvoorbeeld heeft aangemeld en de app een toegangstoken verkrijgt, kan de gebruiker een resource (taak) maken in de API-app door een formulier in te dienen.

Volgende stappen

Leer vervolgens hoe u gebruikers kunt aanmelden en een toegangstoken kunt verkrijgen:

Gebruikers aanmelden en een toegangstoken verkrijgen

Share via