Criar um aplicativo Web Node.js para chamar uma API

Artigo
05/24/2024

Aplica-se a: Círculo branco com um símbolo X cinzento. Locatários da força de Círculo verde com um símbolo de marca de verificação branco. trabalho Locatários externos (saiba mais)

Neste artigo, você prepara o projeto de aplicativo criado em Tutorial: Preparar seu locatário externo para entrar usuários em um aplicativo Web Node.js para chamar uma API da Web. Este artigo é a segunda parte de uma série de guias em quatro partes.

Pré-requisitos

Conclua as etapas na primeira parte desta série de guias, Preparar locatário externo para chamar uma API em um aplicativo Web Node.js.

Atualizar arquivos de projeto

Crie mais arquivos, fetch.js, todolistController.js, todos.js, todos.hbs e .env e, em seguida, organize-os para obter a seguinte estrutura de projeto:

    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

Instalar dependências de aplicativos

No seu terminal, instale mais pacotes Node, axios, , cookie-parserbody-parser, method-override, executando o seguinte comando:

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

Atualizar componentes da interface do usuário do aplicativo

No editor de códigos, abra o arquivo views/index.hbs e adicione um link View your todolist :

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

Seu arquivo views/index.hbs agora é semelhante ao seguinte arquivo:

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

Adicionamos um link para uma interface do usuário que permite que você interaja com o ciam-ToDoList-api. Definimos a rota expressa para esse ponto de extremidade mais adiante neste guia.

No editor de códigos, abra views/todos.hbs o arquivo e adicione o seguinte código:

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

Essa exibição permite que o usuário execute tarefas que iniciam uma chamada de API. Por exemplo, depois que um usuário entra e o aplicativo adquire um token de acesso, o usuário pode criar um recurso (tarefa) no aplicativo de API enviando um formulário.

Próximos passos

Em seguida, saiba como entrar usuários e adquirir um token de acesso:

Iniciar sessão de utilizadores e adquirir um token de acesso

Partilhar via