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

• WordPress
• Facebook
• GitHub
• LinkedIn
• Instagram
• Medium
• TikTok
• Twitter
• YouTube
• Link

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)
   • Download do Visual Studio Code
2. Git (para usuários Windows)
   • Download do Git
3. Node.js
   • Download do Node.js
4. Yarn
   • Execute o comando abaixo para instalar o Yarn:
     $ npm install –global yarn
5. Cliente HTTP para testar a API
   • Recomendamos o Apidog. Download do Apidog
   • Instale a extensão do Apidog para o navegador: Extensão do Apidog

---

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

• WordPress
• Facebook
• GitHub
• LinkedIn
• Instagram
• Medium
• TikTok
• Twitter
• YouTube
• Link

Veja outros artigos: