Compartilhar via


Chamar uma API Web em um aplicativo Web Node.js

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

Neste artigo, você aprenderá a chamar a API Web do seu aplicativo Web cliente Node.js usando o token de acesso adquirido em Adquirir token de acesso. A API Web é protegida pela ID Externa do Microsoft Entra. Este artigo é a quarta e última parte de uma série de guias de quatro partes.

Pré-requisito

Atualizar código

  1. No editor de código, abra o arquivo routes/todos.js e adicione o seguinte código:

        const express = require('express');
        const router = express.Router();
    
        const toDoListController = require('../controller/todolistController');
        const authProvider = require('../auth/AuthProvider');
        const { protectedResources } = require('../authConfig');
    
        // custom middleware to check auth state
        function isAuthenticated(req, res, next) {
            if (!req.session.isAuthenticated) {
                return res.redirect('/auth/signin'); // redirect to sign-in route
            }
    
            next();
        }        
        // isAuthenticated checks if user is authenticated
        router.get('/',isAuthenticated, authProvider.getToken(protectedResources.toDoListAPI.scopes.read),toDoListController.getToDos);
    
        router.delete('/', isAuthenticated,authProvider.getToken(protectedResources.toDoListAPI.scopes.write),toDoListController.deleteToDo);
    
        router.post('/',isAuthenticated,authProvider.getToken(protectedResources.toDoListAPI.scopes.write),toDoListController.postToDo);
    
        module.exports = router;
    

    Esse arquivo contém rotas expressas para criar, ler e excluir um recurso na API protegida. Cada rota usa três funções de middleware, que são executadas nessa sequência:

    • isAuthenticated verifica se o usuário está autenticado.

    • getToken solicita um token de acesso. Você definiu essa função anteriormente em Adquirir token de acesso. Por exemplo, a rota criar recurso (solicitação POST) solicita um token de acesso com permissões de leitura e gravação.

    • Por fim, os métodos postToDo ou deleteToDo getToDos manipulam a lógica real para manipular o recurso. Essas funções são definidas no arquivo controller/todolistController.js.

  2. No editor de código, abra o arquivo controller/todolistController.js e adicione o seguinte código:

        const { callEndpointWithToken } = require('../fetch');
        const { protectedResources } = require('../authConfig');
    
        exports.getToDos = async (req, res, next) => {
            try {
                const todoResponse = await callEndpointWithToken(
                    protectedResources.toDoListAPI.endpoint,
                    req.session.accessToken,
                    'GET'
                );
                res.render('todos', { isAuthenticated: req.session.isAuthenticated, todos: todoResponse.data });
            } catch (error) {
                next(error);
            }
        };
    
        exports.postToDo = async (req, res, next) => {
            try {
                if (!!req.body.description) {
                    let todoItem = {
                        description: req.body.description,
                    };
    
                    await callEndpointWithToken(
                        protectedResources.toDoListAPI.endpoint,
                        req.session.accessToken,
                        'POST',
                        todoItem
                    );
                    res.redirect('todos');
                } else {
                    throw { error: 'empty request' };
                }
            } catch (error) {
                next(error);
            }
        };
    
        exports.deleteToDo = async (req, res, next) => {
            try {
                await callEndpointWithToken(
                    protectedResources.toDoListAPI.endpoint,
                    req.session.accessToken,
                    'DELETE',
                    req.body._id
                );
                res.redirect('todos');
            } catch (error) {
                next(error);
            }
        };
    

    Cada uma dessas funções coleta todas as informações necessárias para chamar uma API. Em seguida, ele delega o trabalho para a função callEndpointWithToken e aguarda uma resposta. A função callEndpointWithToken é definida no arquivo fetch.js. Por exemplo, para criar um recurso na API, a função postToDo passa um ponto de extremidade, um token de acesso, um método HTTP e um corpo da solicitação para a função callEndpointWithToken e aguarda uma resposta. Em seguida, ela redireciona o usuário para a exibição todo.hbs para mostrar todas as tarefas.

  3. No editor de código, abra o arquivo fetch.js e adicione o seguinte código:

        const axios = require('axios');
    
        /**
         * Makes an Authorization "Bearer" request with the given accessToken to the given endpoint.
         * @param endpoint
         * @param accessToken
         * @param method
         */
        const callEndpointWithToken = async (endpoint, accessToken, method, data = null) => {
            const options = {
                headers: {
                    Authorization: `Bearer ${accessToken}`,
                },
            };
    
            switch (method) {
                case 'GET':
                    return await axios.get(endpoint, options);
                case 'POST':
                    return await axios.post(endpoint, data, options);
                case 'DELETE':
                    return await axios.delete(endpoint + `/${data}`, options);
                default:
                    return null;
            }
        };
    
        module.exports = {
            callEndpointWithToken,
        };
    

    Essa função faz a chamada à API propriamente dita. Observe como incluir o token de acesso como um token de portador no cabeçalho da solicitação HTTP:

        //...        
        headers: {
            Authorization: `Bearer ${accessToken}`,
        }        
        //...
    
  4. No editor de código, abra o arquivo .env e adicione a configuração a seguir.

        # Use this variable only in the development environment. 
        # Please remove the variable when you move the app to the production environment.
        NODE_TLS_REJECT_UNAUTHORIZED='0'
    

    A configuração NODE_TLS_REJECT_UNAUTHORIZED='0' em seu arquivo .env instrui o Node.js a ignorar erros de certificado SSL, como o erro de certificado autoassinado.

  5. No editor de código, abra o arquivo app.js e, em seguida:

    1. Adicione o roteador todo usando o seguinte código:

          var todosRouter = require('./routes/todos');
      
    2. Use o roteador todo usando o seguinte código:

          app.use('/todos', todosRouter); 
      

Executar e testar o aplicativo Web e a API

Neste ponto, você está pronto para chamar a API Web do aplicativo Web cliente:

  1. Use as etapas do artigo Proteger uma API Web ASP.NET para iniciar seu aplicativo de API Web. Sua API Web agora está pronta para atender às solicitações do cliente.

  2. Em seu terminal, verifique se você está na pasta do projeto que contém o aplicativo Web cliente, como ciam-sign-in-call-api-node-express-web-app, e execute o seguinte comando:

    npm start
    

    Seu aplicativo Web cliente é iniciado.

  3. Use as etapas em Executar e testar o aplicativo Web e a API de exemplo para demonstrar como o aplicativo cliente chama a API Web.

Próximas etapas

Talvez você queira: