Autenticação com JWT(Json Web Token) com PHP#01 - Criando estrutura do back e frontend - [PHP JWT]

e eu vou mostrar nessa aula como que você faz uma autenticação utilizando o Jason web token O que que é uma autenticação ou supor que você tenha o front-end e o back-end ou front-end trabalhando com JavaScript e obediente trabalhando com o PHP em condições normais normais entre "como que funciona o front-end faz uma inscrição lá para o beck and e o pé quente ele retorna O que o front-end ele pediu mas só que algumas partes do seu sistema você não quer liberar o acesso para todo mundo você quer ter algumas partes onde somente quem é altenticado Ou seja somente Quem fez o login no seu sistema ele pode acessar essas informações para isso que eu vou trabalhar com o Jason webhook para ter essa autenticação dá só uma olhada nessa imagem que eu mostrar para você hoje nessa aula eu vou fazer exatamente como está nessa imagem onde eu tenho uma requisição do tipo post para fazer uma autenticação onde eu vou fazer o login onde eu vou passar o username eu peço onde mas no meu caso nessa aula eu vou trabalhar com o e-mail e o pedestre o meu beck and que eu vou trabalhar com PHP ele vai verificar o e-mail e a senha se estiver correto vai gerar o token e vai esse tom quem lá para o front-end daí agora depois eu ter feito o login depois de eu estar autenticado ou supor que eu queira acessar essa or&mi/usar mas somente quem é altenticado pode acessar essa rota Então vou mandar uma requisição do tipo Jet onde eu vou mandar o meu toque E no caso o DOC ele foi gerado aqui no pé quente na que fez o login foi mandado lá para o front-end lá para o lado do cliente e citou Quem foi armazenado no navegador Agora toda vez que eu fiz uma requisição para alguma rota específico como por exemplo hippie/user eu vou mandar um header para ele com o authorisation utilizando estiver iceberg não é tão necessário assim mais nessa aula eu vou trabalhar e depois logo depois desse Berry eu vou colocar o Talk então eu vou mandar o token lá para o beck and e o meu beck and ele vai verificar se o token ele é válido ou não se o token é válido quer dizer que o usuário ele está alto indicado ele tem permissão E se ele tem permissão ou b-king vai retornar a resposta lá para o front-end então assim que eu vou trabalhar nessa aula eu vou usar eu vou criar a estrutura de pastas aqui o direito eu vou criar uma nova pasta onde eu vou ter bem separado o front-end do backend ela aqui vai ser a pasta front-end e agora vou criar uma pasta chamada Becky and onde no meu pé quente eu falei para você que eu vou trabalhar com o PHP então eu abro aqui o meu terminal a c d e um CDB 500 como eu vou trabalhar com o PHP no meu pé quente que eu fazer por favor iniciar o meu composer eu só dá um ente aqui não Inter e tá dando para colocar o autor então quê que eu vou fazer esse Alexandre e tá dando que o autor tem que ser nesse formato o nome depois colocar entre essa e sinal de menor e o sinal de maior e colocar o e-mail vamos km para por lá isso aqui e é isso mesmo da Inter Inter perfeito é esse mesmo aquilo que eu quero é isso mesmo então foi gerado aqui no meu beck and o composer ponto de Alison agora vou trabalhar com o autoload tá pegando a pasta EP e com namespaces rap perfeito agora eu venho aqui vai ser composer dump-autoload traço ou agora vou criar mais uma pasta aqui dentro da Candy que vai ser a pasta ep é claro e como eu vou fazer o login real aqui eu vou fazer uma inscrição lá para o banco de dados para verificar se o e-mail assim estão corretos daí sim gerar o toque então que eu fazer eu vou criar aqui dentro da pasta ep criar uma outra pasta chamada data-base para ter a conexão com o banco de dados tudo certinho mas por enquanto eu ainda não vou querer essa conexão agora vou criar também dentro do meu beck and uma pasta chamada pública onde eu vou criar um arquivo chamado index. ph P onde eu vou aqui também criar um arquivo chamado login. Pega P1 e nesse nessa aula eu não vou trabalhar com um sistema de rotas eu vou trabalhar com um arquivo normal por exemplo login.

HP então lá no fontina que eu for fazer requisição para o meu beck and eu vou chamar o login. HP eu não vou chamar uma rota específico porque esse meu projeto não vai ter um sistema de rotas ela aqui dentro pobre que vai ser um novo arquivo chamado Austin a outra esse ponto pega P aqui no index. php por enquanto também não vou colocar nada vou fechar isso eu vou fechar isso aqui eu não vou instalar o Jason hábito assim agora eu vou estar a um pouquinho mais para frente agora eu vou vir aqui dentro do meu data-base criar um novo arquivo o arquivo de conexão com o banco de dados Então vai ser meio pega P Class vai ser Connection vai ser uma conexão muito muito simples Connection como é que eu vou criar um método Public function on Connect é que eu só vou retornar a conexão direto Vai ser mil Petrópolis a onde eu vou colocar aqui o mais Kelly que vai ser o meu driver e o host mas ser igual local host o dbm o bebê menino vai ser igual largo porque eu já tenho se eu não me engano um banco de dados chamado Lar viu onde já tem uma tabela chamada usar tudo organizado tudo certinho usuário vai ser root EA senha vai ser vazio a e na hora que eu for pegar o retorno da corda que eu fui fazer vou quero que o retorno seja no formato de um objeto Então como que eu fazer isso eu vou colocar aqui em Peró dois pontos: as TTR underline que full PT é que eu tenho que importar espelho vamos ver se eu consigo colocar uma conta a barra aqui se ele para de dar esse erro parou agora vai ser de novo:: a TTR é de fumar Agora sim apareceu a TTR the full fat mod é esse aqui onde eu vou colocar perder ó:: fértil Object Object Object no caso que vai ser somente o BJ é que também colocar uma contra/ou alguém aqui direto em cima eu coloco o zipper ó e não preciso mais colocar essa conta a barra aqui que você encontra Barras a contra barra e essa conta a barra perder o fat aqui vai ser dois.

: É mais serfet Object Agora sim é porque agora o retorno da cueca que eu fui fazer eu quero que retorne no formato de um objeto por exemplo se eu tiver pegando os dados lado a tabela users eu vou chamar user for se name desse jeito e não for se meme dessa maneira Mas isso é a maneira que eu gosto de trabalhar deixa eu só dar uma organizada aqui e eu vou inicializar o mais Kelly agora eu vou trabalhar lá no meu front-end tô aqui dentro meu pontinho de vai ter somente um arquivo index. HTML então que vai ser novo arquivo index ponta HTML eu já tenho pronto o HTML que eu vou trabalhar aqui só vou copiar aqui rapidinho HTML colocar aqui dentro e já vai vir com a formatação tudo certinho contra o tipo de bebê vai ser Live server e ele abriu mas só que abriu no outro monitor Deixa só colocar aqui colocar a tela inteira Então tá aqui o meu layout que eu vou trabalhar como que a funcionar eu vou clicar aqui em login vai ser verificado esse meio e essa senha lá no meu beck and se usuário assim bater em que vai acontecer eu vou gerar o toque mandar o token aqui para o meu front-end eu vou guardar o topo indo lá no meu sucesso storge e na qual clicar aqui verificar a autenticação eu vou mandar requisição de novo lá para o meu bequinho que mas só que agora para o arquivo ao tipo pega P nem lá vamos fazer toda a verificação se o DOC ele é válido ou não voltando para o index. hu ML eu preciso dar um jeito de pegar a ação de submit desse formulário para poder pegar tanto o e-mail como a senha e o e-mail e a senha eu já deixei digitado aqui nos campos por quê Porque eu não quero ter que toda hora que eu tenho que fazer um teste eu tenho que vir em editar o e-mail e a senha no formulário então e já deixei digitado preenchido tanto e-mail como a senha agora aqui dentro do script eu vou pegar esse formulário com esse The Form cont forme vai ser igual documentos.

com. br selector guest lecturer se forme agora eu vou pegar esse forme e vou colocar add event listener eu vou escutar o evento de submit deste formulário então quando o usuário clicar no botãozinho aqui definite vai ser executado esse callback aqui É só colocar aqui vo function e um caso event que vai ser o evento aqui do in the submit console.