Quem aqui não precisa desenvolver uma determinada aplicação que necessite realizar uma autenticação, pode ser ela, criada de acordo com as regras de negócio da empresa ou uma autenticação via Social Medias?!
É um tema bastante comum hoje em dia e que apresenta em todas linguagens de programação: C#, Python + Django, Ruby on Rails e por que não o Node.Js?!

E hoje estaremos desenvolvendo uma pequena aplicação api node utilizando o Json Web Tokens.

Mas antes, gostaria de informar para vocês uma das novidades que estamos preparando para os devs & coders que vai movimentar a comunidade técnica daqui da Cidade do Rio de Janeiro!!! 😀 😀 😀

surprise

 

Meetup: Coders in Rio!!! YEAH!!!

Então a grande novidade está aqui:

-Coders- in

Era uma das metas minhas para esse ano, criar uma meetup com a finalidade de movimentar a Comunidade Técnica aqui do Rio de Janeiro, com a intenção de compartilhar conhecimento, por meio de palestras e muito networking claro! E, com isso, um amigo meu o Rafael Cruz, que é MCT e Arquiteto de Sistemas, e que escreve inúmeros artigos de diferentes escopos na área de desenvolvimento no seu site: [AQUI], será o Organizador do Meetup, junto comigo do: Coders in Rio. 

Já estamos nos preparando para as primeiras palestras que devem ocorrer o mais tardar já no mês que vem!!! Como eu disse acima, a intenção aqui é falar de tudo: desde de Front-Back End e até mesmo de assuntos que são super importantes na área de qualquer desenvolvedor: DevOps. Assim que, todos, mas todos são bem-vindos a fazer parte do nosso Meetup [CLIQUE AQUI] para acompanhar as novidades sobre o grupo e o primeiro meetup. Assim que definirmos o dia, horário e local, estaremos disponibilizando para todos via email as informações!

Ah…. e outro detalhe muito importante! Aqui na nossa meetup você: desenvolvedor, tem voz. Ou seja, caso você tenha interesse em fazer alguma palestra em nossa meetup, iremos disponibilizar um TypeForm para que você possa submeter a palestra que deseja fazer. Sendo escolhida e mais votada no grupo, você terá a oportunidade de palestrar na nossa meetup por 30min à 45min! Assim que, independente de seniority: todos estão convidados desde já a pensarem em alguma palestra na área de desenvolvimento para dar futuramente na nossa meetup, okay?! Fiquemos combinados assim! 😀

p.s.: coffee breaks. Preocupação de todos. Fiquem tranks com isso, assim que tivermos a nossa primeira meetup marcada…. vamos trazer uma excelente novidade a respeito do coffee break da nossa meetup!! Aguardem! #vaiserépico!!!!

wow

Bom…. vamos ao artigo proposto no início!!! 😀

Vamo que Vamo!

Antes de comentar aqui, esse post que estou escrevendo aqui tem como referência o post original, através do site: Scotchio.io. Como muitos tem dificuldades da língua inglesa, resolvi fazer a versão em português para poder ajudar a todos aqui 😉
Assim que seguem as referências obtidas para realizar esse post aqui.

Referências:

Bom,  como falado acima, desenvolver uma aplicação que contenha autenticação é uma das grandes jogadas em uma aplicação. Mas, desenvolver essa parte do sistema requer, uma segurança que permita sempre estar em mudança e principalmente evoluindo. E com o Node.Js não seria diferente. Sem contar que no npm tem um excelente pacote, que por sinal está extremamente muito bem documentado, que trata justamente sobre esse assunto: Passport.

Mas, antes de começar esse tutorial, vou recomendar para vocês dois artigos que vão ser de bom grado para que possam entender o que estamos desenvolvendo aqui e a importância com a questão da escabilidade e segurança no momento que trabalhamos com autenticação.

  • Autenticação: [AQUI]
  • Segurança nas API’s: [AQUI]
  • O que é JWT: [AQUI] e [AQUI]

Depois de realizar essas leituras, você já terá o conhecimento mínimo para começar a desenvolver o nosso tutorial!

Mas… e aí…. ? O que vamos desenvolver?!!

Assim como foi nos posts relacionados a Node.js aqui, vamos criar uma pequena API Node e utilizando o Express. Vamos utilizar o nosso já conhecido e melhor amigo: POSTMAN.

Assim que para esse tutorial precisam ter conhecimento em:

  • Node.Js
  • Express.Js
  • MongoDb
  • JavaScript
  • JWT

E os recursos que estaremos utilizando para desenvolver a nossa aplicação será:

E claro, estarei disponibilizando o código fonte desse tutorial [AQUI]

Caso vocês sejam marinheiros de primeira viagem em Node.Js, Express.Js e MongoDb…. não tem problema…. vou disponibilizar aqui os links dos meus posts sobre Node.Js que são bem step-by-step para vocês e alguns tutoriais em vídeos que te ajudarão, caso queira voltar aqui a seguir com o tutorial!

  • Desenvolvendo uma Aplicação RESTful API em Node.Js & Express.Js com MongoDb: [AQUI]
  • Tutorial: Testando Aplicações RESTFul API em Node.Js com Mocha & Chai: [AQUI]
  • Introdução ao NodeJS com Typescript no Visual Studio Code: [AQUI]
  • Be Mean: Node.Js [AQUI]

Bom…. como vocês podem perceber, material é o que não falta…. fazendo uma busca…. vocês vão encontrar uma infinidade de informações e treinamentos relacionado ao Node.Js.

Mas, voltando ao projeto, o que a nossa aplicação precisará fazer e ter?!

  1. Precisará ter rotas protegidas e desprotegidas;
  2. O usuário se autenticará na app através do seu nome e email e como consequencia receberá um token;
  3. O usuário irá armazenar o token no lado do cliente e logo em seguida enviará um pedido para cada request feito.
  4. Depois iremos validar esse token e finalmente, se tudo estiver dentro dos conformes, devolveremos essa informação em formato de JSON.

Acho que fica mais tranks quando dividimos o problema em partes. Assim, sabemos por onde começar atacar e como! 😀

E…. o que iremos desenvolver na nossa API?!

  • Rotas normais (não autenticadas)
  • Uma rota middleware para que permita autenticar o token
  • Uma rota para que possamos autenticar um usuário e senha e enfim, obter o token
  • Rotas autenticadas para obter todos os usuários.

Hora de Codar! 😀

Abram o Visual Studio Code, ou qualquer outra IDE que desejam e procurem criar o projeto no seguinte padrão conforme segue a imagem abaixo:

Screen Shot 04-12-17 at 09.24 PM

Segue esse padrão dos arquivos para que possamos enfim, começar a desenvolver o nosso projeto! 😀

Vamos seguindo…. e agora vamos alterar o nosso primeiro arquivo: package.json

Modificando o arquivo: Package.json

Se vocês seguiram os meus últimos tutoriais de Node.js vão perceber da importância do arquivo: package.json. E com isso, vamos modificá-lo agora!

Coloquem esse código abaixo:

Bom… depois de modificar o arquivo: package.json, abre o cmd e execute o seguinte comando abaixo:

> npm install

Ao executar esse comando irá instalar todos os pacotes de acordo do que consta no arquivo package.json, criando assim uma pasta chamada: node_modules.

Feito isso vamos agora ir para o próximo passo: começar a desenvolver o arquivo usuario.js

Modelando a class: Usuario.js

Bom, vão até o projeto em: app/models/usuario.js. E vamos agora criar um modelo. Siga o código abaixo:

Feito isso, agora vamos seguir para um outro arquivo muito importante também: config.js. Esse arquivo será responsável por armazenar diferentes variáveis e principalmente a configuração da nossa aplicação.

Próxima parada: Config.js

Então, para este arquivo, vocês precisarão criar um banco de dados no MongoDb. A qual poderão usar de maneira local ou de maneira cloud usando o mLab (que é gratuito). De qualquer maneira, estarei disponibilizando aqui no código abaixo as duas maneira: local ou via cloud, okay?

Para este arquivo, você precisará criar banco de dados MongoDB. Você pode criar um localmente ou facilmente usar um online no mLab gratuitamente. De qualquer forma, você será capaz de obter uma seqüência de caracteres URI para usar como configuração do banco de dados.

Peço que vocês deem uma olhada nesse video, de apenas 7 minutos, caso usem o mLab. Assim vocês saberão como configurar o mLab e consequentemente obter a URI:

Depois de ver o video…. copiem e colem o código do arquivo: config.js , como segue abaixo:

Vamos agora entender um pouco o que fizemos aqui:

  • configName: será usado quando formos criar e verificar o JWT (Json Web Tokens)
  • database: é a famosa URI que irá realizar a conexão com a base de dados, que poderá ser: tanto localmente como em cloud.

Se chegou até aqui! Parabéns! Vamos agora para a parte principal do projeto: server.js! Vamos que não temos tempo a perder!

Arquivo: Server.Js

Bom, nesse arquivo iremos:

  1. Usar os pacotes instalados: isso inclui os pacotes que instalamos anteriormente: express, body-parser, morgan, mongoose e o jsonwebtoken. 
  2. Configurar a Aplicação: nessa parte do código, iremos definir as nossas variáveis importantes para a aplicação, configurar os nossos pacotes e realizar a conexão com a base de dados.
  3. Criar as Rotas Básicas: inicialmente vamos criar rotas desprotegidas como sendo a nossa home page através do endereço: http://localhost:8000. E também vamos criar uma rota chamada: /create para que possamos criar um usuário de exemplo para o nosso banco de dados.
  4. E enfim vamos criar as Rotas da API. Que serão as seguintes rotas:
  • POST http://localhost:8000/api/authenticate: essa rota irá verificar o nome e a senha contidas no banco de dados e irá prover um token de autenticação, caso a operação seja bem-sucedida. Esta rota não exigirá um token, uma vez que é aqui que iremos obter o token.
  • GET http://locahost:8000/api: essa rota irá mostrar uma mensagem de maneira aleatória e esta rota estará protegida e exigirá um token de autenticação.
  • GET http://localhost/8000/api/usuarios: Essa rota como vocês podem perceber, irá listar todos os usuários. E também essa rota estará protegida e exigirá um token.

Bom, agora que já entendemos o que iremos fazer no arquivo: server.js, observem abaixo o código, leem, procurem entender e copiem no projeto de vocês:

Agora abram o cmd até o local onde se encontra o projeto e execute o comando: node server.js e depois abre o browser e digite: http://localhost:8000 e vejam o que acontece:

Screen Shot 04-13-17 at 11.11 PM

E observem o console, como o pacote morgan está funcionando mesmo!! 😀 😀 😀

Screen Shot 04-13-17 at 11.11 PM 001

DICA: Vamos fazer o seguinte?! Vamos instalar o pacote: nodemon. Assim nos ajudará que, todas as vezes que necessitarmos realizar alguma modificação no nosso arquivo e consequentemente executar ele, irá iniciar o nosso server.Digitem o seguinte comando no console: npm install –save-dev nodemon e com isso, irá instalar o pacote no arquivo, package.json e assim poderão executar novamente o comando: node server.js 😉

Bom…  já estamos chegando na reta final…. Ufa!

Criando Usuário de Exemplo

Agora que nós sabemos que a nossa aplicação está executando, vamos criar um usuário de exemplo usando o modelo que criamos anteriormente.

E fazer isso, será super simples. Vamos criar uma rota bem simples que irá criar um usuário padrão.

Observem abaixo, como fica:

Notem que é bem simples criar um usuário de exemplo, não é mesmo. Mas, gostaria de salientar algo muito importante aqui para todos vocês: NUNCA e JAMAIS criam uma senha da maneira que criei aqui. O mais correto a ser usado no mundo real é prover uma senha por hash. E para isso há um pacote que trata justamente disso: bcrypt-nodejs!! 😉

Agora executem novamente a aplicação no console e abrem o browser e digitam o endereço: http://localhost:8000/create. No browser deverá seguir a seguinte mensagem: ‘{ success: true } e no console:

Screen Shot 04-13-17 at 11.35 PM

Show de bola né!

Vamos continuar com o desenvolvimento da nossa aplicação!!

dont

Listando os Usuários!

Agora, vamos criar uma rota em nossa API que retorne todos os usuários no formato JSON. Para isso, vamos usar a instância do router do Express. Vejam o código abaixo:

obs.: notem que houve mudanças no arquivo: server.js. Leiam e entendem o código e observem onde teve as mudanças:

Agora temos duas rotas que poderemos testar no POSTMAN. Para isso, executem novamente a aplicação no console e digitem o endereço: http://locahost:8000/api e vejam a mensagem que irá aparecer:

Screen Shot 04-13-17 at 11.53 PM

Show! Está funfando!!! 😀 😀 😀

Agora testem a outra rota criada: http://localhost:8000/api/usuarios e vejam o resultado:

Screen Shot 04-13-17 at 11.55 PM

Que coisa linda!!! 😀

Notem que ambas as rotas estão funcionando. Agora, vamos criar uma rota que permita autenticar um usuário e em seguida proteger as informações dessas rotas usando uma rota middleware, fazendo assim exigir o token.

Autenticando e Criando um Token

Agora nós vamos desenvolver a rota: http://localhost:8000/api/authenticate onde irá receber um form com: nome e senha do usuário. Se o campo ‘nome’ e a ‘senha’ forem válidos, então nós iremos criar um token e retornar o valor desse token.

Uma vez que o usuário tem o token, então iremos armazenar no lado do cliente e passar com cada requisição e depois iremos validar o token em cada requisição usando a rota muiddleware.

Segue abaixo o código:

Vamos testar essa rota agora no POSTMAN?! Bom, antes para fazer isso, precisamos usar o HTTP POST e adicionar um nome e senha nos parâmetros em: x-www-form-urlencoded. Isso irá simular uma informação provida via POST.

Veja a rota testando com um nome incorreto:

Screen Shot 04-14-17 at 01.02 AM

Agora vamos testar com a senha incorreta:

Screen Shot 04-14-17 at 01.23 AM

Agora vamos testar quando tudo estiver correto:

Screen Shot 04-14-17 at 01.25 AM

Coisa linda não é mesmo?! Vocês podem notar que o retorno quando tudo está correto, nos fornece um token. Agora peço por gentileza que copiem esse token pois vamos precisar dele para a nossa rota do middleware. 😉

Criando Rota Middleware para proteger as Rotas do API

Até o exato momento, nós temos 3 rotas já criadas:

  1. /api/authenticate
  2. /api
  3. /api/usuarios

Agora, vamos criar a rota middleware para proteger as duas últimas rotas. Nós não queremos proteger a rota /api/authenticate uma vez que o nosso foco aqui é colocar o middleware abaixo dessa rota. Sim! A ordem aqui é algo muito importante!!!!

Estamos usando o pacote jsonwebtoken novamente, mas desta vez vamos verificar o token que foi passado. É importante que nosso configName usado aqui corresponda ao configName que foi usado para criar o token. E criamos aqui também uma resposta de status 403 no caso do usuário não tiver algum dado ou token.

Vamos agora testar a nossa rota middleware?!

Para isso, vamos executar no POSTMAN e passar a seguinte rota: http://localhost:8000/api – porém sem o token:

Screen Shot 04-14-17 at 01.43 AM

Agora vamos testar passando o token que copiamos via x-access-token no endereço: http://localhost:8000/api/usuarios:

Screen Shot 04-14-17 at 01.45 AM

Parece que tudo funcionou e enfim acabamos!!! 😀 😀 😀

Não!! Ainda não! Quero mostrar para vocês que o nosso banco está realmente funcionando. No meu caso, optei por usar o mLab. Assim que se vocês optaram por usar o MongoDb via cloud, vejam como o nosso usuário foi realmente cadastrado lá:

Screen Shot 04-14-17 at 02.14 AM

Screen Shot 04-14-17 at 02.15 AM

Agora sim…. provado que tudo está funcionando perfeitamente! Assim que….

200w_d

Considerações Finais:

Esse é um projeto bem mas bem simplista mas realista de como trabalhar com JWT em APIs com Node.Js. Acredito que com esse tutorial fica mais claro como usar e desenvolver uma aplicação um pouco mais robusta que necessite criar e fornecer tokens específicos criando assim, uma API mais robusta e cheia de recursos.

O código fonte de todo o projeto encontra-se: [AQUI]

Momento Jabá: Não deixem de curtir, compartilhar e de se inscrever no meu canal do Youtube [INSCREVA-SE AQUI]. Estarei postando videos semanalmente no meu canal sobre a série sobre Introdução a TDD com C# & nUnit e assim que eu terminar essa série começarei o curso de Asp.NET MVC 5 com EF – Básico. E estarei postando mais artigos/tutoriais aqui no meu site também. Então….. Fiquem ligados!!! 😀

E o final desse post, dedico ao meu querido e amado cachorro que faleceu no última segunda-feira (10/04/2017), foi em poucas horas que o meu cachorro morreu – tipo levou apenas 12 horas e com base nisso, minha família e eu acreditamos que ele pode ter sido envenenado…. (até onde pode ir a maldade do ser humano?!!!)

Mas, enfim… dedico esse post ao meu cachorro – Jake. Que nos trouxe inúmeras felicidades para minha familia em momentos bons e principalmente nos momentos mais tristes. Tá sendo difícil para mim e principalmente para os meus pais a perda precoce do Jake (tinha 11 anos). Saudades de você mi perrito querido! 😦 😦 😦

Jake Lemos

❤️️ 11/05/2005

☠ 10/04/2017

Lomogram_2015-01-06_08-46-26-PM[1]

Até a próxima pessoal! ❤ ❤ ❤

Anúncios

9 comentários sobre “Autenticando APIs Node.Js com JWT

  1. Colocado as referências Renato! Basta olhar no final do post.
    Resolvi fazer esse post, uma vez q é um tema q todos querem e tem certa dificuldade e procurei adotar o que o artigo do Scotch.io tinha feito.
    Mas, colocada as referências!

    Abraços,

    Glaucia Lemos

  2. Belo artigo/tutorial. Parabéns.
    Apenas uma observação: Na dica do nodemon, o comando p rodar está ‘node server.js’ em vez de ‘nodemon server.js’

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s