Olá pessoal! Tudo bem? Faz um tempinho que não faço um tutorial aqui e claro que eu não iria abandonar vocês!

Bom, no último post [AQUI], eu fiz um tutorial ensinando como desenvolver uma aplicação com autenticação em JWT com Node.Js. Assim que vocês puderam aprender pelo lado do Back-End como realizar essa autenticação. Mas, ficou faltando: como fazer no lado do Front-End?! Foi pensando nessa pergunta que eu resolvi fazer esse tutorial que será dividido em 2 partes. Querem saber mais?! Então continuem com a leitura e ….

 

kbln01

 

Breve Introdução…

Bom, como já mencionado, estarei realizando esse tutorial em duas partes:

  1. Autenticação JWT com AngularJs (versão 1.x);
  2. Autenticação JWT com Angular (versão 2/4);

Talvez vocês estejam se perguntando: “Mas, Glaucia!!! Por que perder tempo ensinando a versão 1.x do AngularJs, uma vez que houve mudança para a versão 2/4? Simples. Existe muito sistema legado e tem muita empresa que ainda faz uso do AngularJs (1.x). Então para que fique claro como realizar uma aplicação de Autenticação JWT tanto com o AngularJs 1 tanto com o Angular 2/4, resolvi fazer para ambas as versões. E espero que vocês possam vir a gostar do material proposto aqui! 😀 😀 😀

O que vamos desenvolver?!

Será uma aplicação simples, visando ensinar os conceitos básicos de autenticação usando o jwt.ioAssim que a nossa aplicação Angular irá enviar o  usuário codificado em base64 e a senha prefixada como ‘Basic’. E consequentemente o JWT irá enviar um token Json codificado para a base64 (JWT). Caso queiram entender mais sobre o assunto entrem no site do jwt.io.

Como vocês podem perceber na demo acima, a aplicação usa um Back-End falso, com ajuda do service do angular: $httpBackEnd, a qual faz parte do módulo ngMockE2E. Isso é feito para que o exemplo possa vir a funcionar sem um backend real. Caso você queira fazer uso do seu BackEnd, basta remover o script mock-backend.js do arquivo principal: index.html. 

Quando estiver bem explicado para todos o conceito do Back-End e Front-End aqui no meu site, estarei realizando um tutorial que irá ser zero to hero! Ou seja, um tutorial que irá explicar o desenvolvimento de uma aplicação MEAN (Mongo, Express, Angular, Node), que tratará desde o Back até o Front End! Assim que….

SoonRacoon

O que vamos precisar?!

Assim como nos outros tutoriais:

Estarei disponibilizando o código fonte do projeto [AQUI]. Assim que, sintam-se à vontade em fazer um fork, compartilhar o código ou dar um star no repositório! 😉

Estrutura do projeto

Peço que vocês abram a IDE desejada de vocês, no meu caso será o Visual Studio Code. Criam um diretório para o projeto que iremos desenvolver e criem pastas e arquivos como segue a imagem abaixo:

Screen Shot 05-06-17 at 01.47 AM

Caso vocês não sabem, existem um padrão na organização na estrutura de um projeto Angular. Visando não perder o conceito MV*. Assim que super recomendo a todos, caso usem ou pretendem usar o AngularJs em projeto de grande escala a leitura do post do Cliff Meyers, que explica como deve ser feito e organizado um estrutura de um projeto AngularJs. (Leitura recomendada: [AQUI].

Conforme vamos passando aqui no tutorial, vou estar explicando o que é cada pasta e arquivo nesse projeto para fique claro para todos as suas funções e objetivos na aplicação! Assim que vamos que vamos! 😀

1) Pasta: Content

Como vocês podem perceber no arquivo contido nessa pasta, essa pasta é responsável por conter arquivos estáticos, como por exemplo: css, imagens, fontes, dentre outros arquivos.

1.1) Arquivo: app.css (content/app.css):

Já o arquivo app.css contido na pasta content é onde estará todo estilo personalizado da nossa aplicação angular. No código abaixo estou personalizando o tamanho da fonte das mensagem de validação no formulário de login que estaremos criando. 😉

Peço que vocês incluam no projeto os arquivos package.json  e o bower.json na raiz principal e com o seguinte pacotes a serem instalados:

  • Package.json:

  • bower.json:

Esse package.json é o modelo do angular-seed, localizado no repositório do GitHub para ajudar os desenvolvedores a iniciar um determinado projeto AngularJs [AQUI]. Como vamos ficar testando para saber se a nossa aplicação está funcionando vamos precisar basicamente somente do bower e do script para iniciar o serviço! 😀

Como de praste… depois que vocês incluirem esse arquivo no projeto, peço que vocês executem npm install para que seja instalada as dependências necessárias para o projeto. 😉

Vamos dar continuidade porque tem muita coisa ainda para desenvolvermos! 😀

2) Pasta: Helpers

É na pasta helpers que estaremos mockeando (não sei se existe esse verbo…. mas enfim….) é onde estará os nossos dados falsos que irá simular um Back-End na aplicação.

2.1) Arquivo: mock-backend.js

Como já explicado, esse back-end falso irá permitir que o exemplo seja executado sem que haja o desenvolvimento de uma api de um back-end real. Também, como já explicado acima, estaremos usando o service do Angular: $httpBackEnd. Caso queiram saber mais sobre esse service do Angular, bastam clicar [AQUI]. Esse service, ele é provido do módulo ngMockE2E [AQUI].

Mas, o que esse módulo faz? Simples. Ele irá interceptar as solicitações via HTTP feitas pela aplicação Angular e enviará respostas falsas para o servidor…. simulando assim uma api no BackEnd.

Peço agora que vocês abram o arquivo: mock-backend.js e desenvolvem o seguinte código abaixo:

Vamos entender agora o que esse arquivo está fazendo. Aqui fizemos uma implementação que irá simular uma api/authenticate que irá apontar um nome de usuário e senha válido e consequentemente irá enviar de retorno um token jwt falso se for bem sucedido. Todas as outras solicitações serão passadas para o servidor, de forma que os arquivos estáticos, como por exemplo: .js, .html, .css, sejam exibidos de maneira correta para aplicação Angular.

Novamente…. caso não tenham entendido o que foi feito acima, peço que leiam sobre o uso do service: $httpBackend. Nesse link está explicando detalhadamente o seu uso e com exemplos práticos também! 😀

Vamos continuar….

3) Pasta: Services

A pasta services é usada para manter arquivos de services e factories do Angular. Todas as api de acesso e lógica de negócios devem ser desenvolvidos dentro dessa pasta. Para que posa manter os controladores  do Angular e claro, manter a organização e separação do código, para que fique de fácil entendimento para quem estiver desenvolvendo ou até mesmo para quem for realizar, por exemplo, uma manutenção ou sustentação da aplicação criada.

3.1) Arquivo: auth.service.js

O arquivo auth.service.js será utilizado para realizar o login e o logout da nossa aplicação. Para efetuar o login, a sessão irá registrar as credenciais dos usuários e logo em seguida, a api irá verificar se existe um token jwt via response. Se o login for bem sucedido, então os detalhes do usuário serão armazenados localmente via local storage e o token será adicionado ao header de autorização do HTTP para todas as solicitações feitas via service do Angular: $http.

Os detalhes do usuário registrado serão armazenados num localStorage para que o usuário fique conectado. Então o usuário manterá logado na aplicação se ele atualizar o navegador e entre as sessões do navegador até que faça o logout da aplicação.

Vejam na prática, no código abaixo:

Bom… agora que a lógica está feita vamos focar agora nos Controllers!

4) Pasta: Home

A pasta home contém todos os controllers e as views responsáveis pela seção home da aplicação.

4.1) Arquivo: home/index.controller.js

O arquivo index.controller na pasta home será responsável por lidar com toda a iteração e dados para a exibição do arquivo index.view.html.

4.2) Arquivo: home/index.view.html

Esse arquivo é justamente o html da página que quando o usuário for efetuar o seu login e for bem sucedido entrará na Página Principal.

Acho que nem preciso dizer o que está acontecendo aqui né?! Bom…. vamos continuar então! 😀 😀

5) Pasta: Login

A pasta login terá todos os controllers e as views para a seção do login da aplicação.

5.1) Arquivo: login/index.controller.js

O arquivo index.controller.js da pasta login irá lidar com toda a iteração e dados para a exibição de login. Quando for carregado pela primeira vez, irá garantir que o usuário esteja desconectado (através da função: initController() ), para que assim, quando o usuário for clicar no link ‘Sair’ ele seja redirecionado para página de Login.

A função ‘Login’ exposta pelo viewModel (viewModel.login) usará o método: ‘AuthenticationService’ para validar as credenciais dos usuários e assim redirecionar para a Página Principal da aplicação (se as credenciais forem bem sucedidas) ou exibir uma mensagem de erro (no caso das credenciais vierem a não ser bem sucedidas)

Vejam o código abaixo:

5.2) Arquivo: login/index.view.html

Bom, já o arquivo ‘index.view.html’ da pasta login, irá ter um formulário de login bem padrão, onde terá campos de: usuário e senha. Ambos os campos iremos usar a diretiva: ngMessages, para que possamos exibir mensagens de validação.

Vejam na prática o código abaixo:

6) Arquivo: app.js

O arquivo app.js é o ponto de partida para a aplicação angular. Pois é aí que o módulo é declarado juntamente com as dependências e contém a lógica de configuração e inicialização quando a aplicação é carregada pela primeira vez.

A função config() é usada para definir as rotas da aplicação usando o Angular UI Router. A função run() contém a lógica de inicialização da aplicação, incluindo o código que verifica o armazenamento local para manter o usuário conectado entre as atualizações das páginas e sessões do navegador. E adiciona um evento handler para o $locationChangeStart que irá redirecionar os usuários não autenticados para a página de Login.

Vejam o código abaixo:

6.2) Arquivo: index.html

E finalmente chegamos no arquivo final…. index.html. É o arquivo html principal da aplicação. Nele contém um template modelo e inclui todos os css e scripts necessários para a aplicação.

E o resultado final deverá estar dessa maneira:

Screen Shot 05-12-17 at 01.30 AM

 

Caso queiram realizar a demo, basta clicar [AQUI]

Considerações Finais:

Nesse post eu pude mostrar um pouco do AngularJs (versão 1.x). Como há muitas empresas que ainda fazem uso da primeira versão, por isso que eu resolvi desenvolver esse tutorial.

Recomendo a vocês, caso queiram estudar o AngularJs a fazerem o seguinte curso:

Tudo sobre AngularJs – Rodrigo Branas: [AQUI]

Procurem não se aprofundar muito na versão 1.x, uma vez é que a tendência seja migrar para o Angular(2/4).

Caso queiram ver o código desenvolvido, basta clicar [AQUI]

No futuro próximo estarei desenvolvendo a mesma aplicação, mas usando o Angular 2/4.

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

Então….

thank

 

… e até a próxima! ❤ ❤ ❤

Anúncios

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