Imagem hacker na frente do notebook e uma escrita ao lado { Json server API + Token autenticação jwt }

Como Criar um Mock de API com json-server e Autenticação JWT

DEV, Apps, Automation, Courses, QA, Technology, Test Analyst / 5 minutos de leitura

Se você precisa criar um mock de API com autenticação JWT, seja para testes ou desenvolvimento de front-end, este guia é para você. Vamos mostrar como configurar um servidor JSON usando json-server e JWT, passo a passo. Você pode clonar um repositório pronto ou seguir nossas instruções para criar o seu do zero.

Para começar rapidamente, clone o projeto do GitHub do santosqa no link abaixo:

Clonar projeto JSONServer com token JWT

Além disso, você pode utilizar o cliente Apidog, que já possui todas as requisições configuradas, acessando o link:

Usar o client Apidog

Se preferir, você também pode criar o seu próprio projeto seguindo os passos descritos no artigo. Seja qual for a sua escolha, você terá uma API mock funcional com autenticação JWT em pouco tempo.

Pré-requisitos

Antes de começar, você precisará dos seguintes softwares instalados no seu sistema:

  1. Visual Studio Code (ou qualquer editor de sua preferência)
  2. Git (para usuários Windows)
  3. Node.js
  4. Yarn
    • Execute o comando abaixo para instalar o Yarn:
      $ npm install –global yarn
  5. Cliente HTTP para testar a API

Passo 1: Preparação do Ambiente

Verifique se o Node.js, NPM e Yarn estão instalados corretamente:
$ node –version
$ npm –version
$ yarn -v

Passo 2: Configuração do Projeto

  1. Crie um diretório para o projeto e acesse-o:
    $ mkdir json-server-auth
    $ cd json-server-auth
  2. Abra a pasta no Visual Studio Code:
    • No terminal: $ codecode .
  3. Crie os arquivos db.json e server.js na raiz do projeto incluindo os códigos abaixo:

*// arquivo db.js

{ "users": [ { "id": 1, "username": "santosqa.com", "password": "santosqa@123" }, { "id": 2, "username": "user2", "password": "password2" } ], "posts": [ { "id": 1, "title": "Post 1", "author": "user1" }, { "id": 2, "title": "Post 2", "author": "user2" } ] }

*// arquivo server.json

const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();
const bodyParser = require('body-parser');
const jwt = require('jsonwebtoken');
const SECRET_KEY = 'your-secret-key';
const expiresIn = '5m';
function createToken(payload) {
return jwt.sign(payload, SECRET_KEY, { expiresIn });
}
function verifyToken(token) {
try {
return jwt.verify(token, SECRET_KEY);
} catch (err) {
return false;
}
}
function isAuthenticated({ username, password }) {
const userdb = router.db.get('users').value();
return (
userdb.findIndex(
user => user.username === username && user.password === password
) !== -1
);
}
server.use(middlewares);
server.use(bodyParser.json());
server.use(bodyParser.urlencoded({ extended: true }));
server.post('/auth/login', (req, res) => {
const { username, password } = req.body;
if (!isAuthenticated({ username, password })) {
const status = 401;
const message =
'Ops! Parece que você digitou o Konami Code errado. Verifique o usuário e a senha!';
res.status(status).json({ status, message });
return;
}
const access_token = createToken({ username });
res.status(200).json({ access_token });
});
server.use((req, res, next) => {
if (req.path === '/auth/login') {
next();
} else {
if (
!req.headers.authorization ||
req.headers.authorization.split(' ')[0] !== 'Bearer'
) {
const status = 401;
const message =
'🚫 Erro no formato de autorização! Parece que você usou a magia errada. Verifique os feitiços (códigos) e tente de novo.';
res.status(status).json({ status, message });
return;
}
const token = req.headers.authorization.split(' ')[1];
const verified = verifyToken(token);
if (!verified) {
const status = 401;
const message =
'Token de acesso não fornecido ou inválido 🚫 A chave para o multiverso está faltando! 🔑🌌';
res.status(status).json({ status, message });
return;
}
next();
}
});
server.use(router);
server.listen(6000, () => {
console.log(
'🎉 Boa! Seu JSON-Server está vivo e chutando na porta 6000! 🚀 Vamos codar como se não houvesse amanhã! 🖥️'
);
});

Passo 3: Instalação das Dependências

  1. Inicialize o projeto com Yarn:
    $ yarn init -y
  2. Instale as dependências necessárias:
    $ npm install json-server
    $ yarn add json-server jsonwebtoken body-parser
  3. Altere as dependências no arquivo package.json conforme referência abaixo, para garantir as versões corretas:
    "dependencies": { "json-server": "^0.16.3", "jsonwebtoken": "^8.5.1", "body-parser": "^1.19.0" }
  4. Instale as dependências:
    $ codeyarn install
  5. Inicie o servidor:
    $ node server.js

Pronto! Agora você tem um servidor JSON com

Passo 4: Utilização da API

Após iniciado o servidor, você pode acessar os endpoints da API utilizando qualquer cliente HTTP.
Neste link do Apidog estão alguns exemplos de como utilizar a API: https://santosqa.apidog.io

  1. Autenticação:
    • Envie uma solicitação POST para /auth/login com as credenciais de usuário.
    • Exemplo usando curl:
      $ codecurl -X POST -d '{"username":"santosqa.com", "password":"santosqa@123"}' -H "Content-Type: application/json" http://localhost:6000/auth/login
  2. Acesso aos Endpoints Protegidos:
    • Use o token JWT obtido na autenticação para acessar outros endpoints.
    • Exemplo para listar usuários:
      $ codecurl -H "Authorization: Bearer <token>" http://localhost:6000/users

Endpoints Disponíveis

  • POST /auth/login: Autenticação de usuário. Requer username e password no corpo da solicitação. Retorna um token de acesso JWT válido.
  • GET /users: Recupera todos os usuários. Requer token de acesso JWT no cabeçalho de autorização.
  • POST /users: Cria um novo usuário. Requer token de acesso JWT no cabeçalho de autorização e dados do usuário no corpo da solicitação.
  • PUT /users/:id: Atualiza um usuário existente. Requer token de acesso JWT no cabeçalho de autorização e dados do usuário atualizados no corpo da solicitação.
  • DELETE /users/:id: Exclui um usuário existente. Requer token de acesso JWT no cabeçalho de autorização.
  • GET /posts: Recupera todos os posts. Requer token de acesso JWT no cabeçalho de autorização.
  • POST /posts: Cria um novo post. Requer token de acesso JWT no cabeçalho de autorização e dados do post no corpo da solicitação.
  • PUT /posts/:id: Atualiza um post existente. Requer token de acesso JWT no cabeçalho de autorização e dados do post atualizados no corpo da solicitação.
  • DELETE /posts/:id: Exclui um post existente. Requer token de acesso JWT no cabeçalho de autorização.

Aumente Suas Habilidades

Desenvolva Sites e Aplicações

Aprenda programação do básico ao avançado na Rocketseat e acelere sua evolução. Acesse agora: Desenvolva Sites e Aplicações na Rocketseat

Domine as Habilidades de um QA

Domine todas as habilidades de um Profissional de Testes e Qualidade de Software e se antecipe às grandes oportunidades do mercado de desenvolvimento de software. Inscreva-se: Treinamento para QA – Testes e Automação em Qualidade de Software

Veja outros artigos:

Rolar para cima