{"id":2112,"date":"2026-06-29T20:49:16","date_gmt":"2026-06-29T23:49:16","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=2112"},"modified":"2026-06-29T20:49:19","modified_gmt":"2026-06-29T23:49:19","slug":"como-criar-um-sistema-de-login-completo-com-javascript-session-e-cookies","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=2112","title":{"rendered":"Como Criar um Sistema de Login Completo com JavaScript, Session e Cookies"},"content":{"rendered":"\n<p>Voc\u00ea j\u00e1 percebeu que, depois de fazer login em um site, basta atualizar a p\u00e1gina e sua conta continua conectada?<\/p>\n\n\n\n<p>Ou que mesmo fechando uma aba e abrindo outra voc\u00ea ainda permanece autenticado?<\/p>\n\n\n\n<p>Isso n\u00e3o acontece por acaso.<\/p>\n\n\n\n<p>Existe toda uma comunica\u00e7\u00e3o entre o navegador e o servidor utilizando <strong>Sessions<\/strong> e <strong>Cookies<\/strong>, permitindo que o sistema reconhe\u00e7a quem \u00e9 voc\u00ea em cada nova requisi\u00e7\u00e3o.<\/p>\n\n\n\n<p>Neste projeto vamos construir o <strong>Front-end completo de um sistema de login<\/strong>, conectando uma aplica\u00e7\u00e3o HTML, CSS e JavaScript a uma API desenvolvida em Node.js.<\/p>\n\n\n\n<p>Ao final voc\u00ea ter\u00e1 um sistema de autentica\u00e7\u00e3o totalmente funcional, utilizando exatamente os mesmos conceitos presentes em aplica\u00e7\u00f5es profissionais.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Como funciona um sistema de login?<\/h1>\n\n\n\n<p>Quando o usu\u00e1rio informa seu login e senha, essas informa\u00e7\u00f5es s\u00e3o enviadas para o servidor.<\/p>\n\n\n\n<p>O servidor verifica se as credenciais est\u00e3o corretas.<\/p>\n\n\n\n<p>Caso estejam, ele cria uma <strong>Session<\/strong> para aquele usu\u00e1rio e envia um <strong>Cookie<\/strong> para o navegador.<\/p>\n\n\n\n<p>Nas pr\u00f3ximas requisi\u00e7\u00f5es, o navegador envia automaticamente esse Cookie ao servidor.<\/p>\n\n\n\n<p>Assim, o servidor consegue identificar quem fez a requisi\u00e7\u00e3o sem precisar solicitar usu\u00e1rio e senha novamente.<\/p>\n\n\n\n<p>\u00c9 exatamente esse processo que faz com que voc\u00ea continue logado mesmo depois de atualizar a p\u00e1gina.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Construindo a interface de Login<\/h1>\n\n\n\n<p>O primeiro passo foi desenvolver toda a interface utilizando HTML e CSS.<\/p>\n\n\n\n<p>Criamos um formul\u00e1rio contendo:<\/p>\n\n\n\n<ul>\n<li>Campo de usu\u00e1rio<\/li>\n\n\n\n<li>Campo de senha<\/li>\n\n\n\n<li>Bot\u00e3o de login<\/li>\n\n\n\n<li>Estrutura organizada para futuras expans\u00f5es<\/li>\n<\/ul>\n\n\n\n<p>Embora seja uma interface simples, ela representa exatamente o ponto de entrada da autentica\u00e7\u00e3o.<\/p>\n\n\n\n<p>Toda a l\u00f3gica acontece a partir do envio desses dados para o servidor.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Consumindo a API com Fetch<\/h1>\n\n\n\n<p>Depois da interface pronta, chegou o momento de conectar o Front-end ao Backend.<\/p>\n\n\n\n<p>Para isso utilizamos a <strong>Fetch API<\/strong>, respons\u00e1vel por realizar requisi\u00e7\u00f5es HTTP utilizando JavaScript.<\/p>\n\n\n\n<p>Quando o usu\u00e1rio clica no bot\u00e3o de login, o navegador envia uma requisi\u00e7\u00e3o para a API contendo:<\/p>\n\n\n\n<ul>\n<li>Usu\u00e1rio<\/li>\n\n\n\n<li>Senha<\/li>\n<\/ul>\n\n\n\n<p>O servidor recebe essas informa\u00e7\u00f5es, realiza a valida\u00e7\u00e3o e devolve a resposta informando se o acesso foi autorizado.<\/p>\n\n\n\n<p>Essa comunica\u00e7\u00e3o entre Front-end e Backend \u00e9 um dos conceitos mais importantes do desenvolvimento web moderno.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Sessions e Cookies na pr\u00e1tica<\/h1>\n\n\n\n<p>Muitos iniciantes acreditam que o Cookie guarda todas as informa\u00e7\u00f5es do usu\u00e1rio.<\/p>\n\n\n\n<p>Na realidade, normalmente ele armazena apenas um identificador da sess\u00e3o.<\/p>\n\n\n\n<p>Quem realmente guarda os dados \u00e9 o servidor.<\/p>\n\n\n\n<p>O fluxo acontece assim:<\/p>\n\n\n\n<ol>\n<li>O usu\u00e1rio realiza o login.<\/li>\n\n\n\n<li>O servidor cria uma Session.<\/li>\n\n\n\n<li>Um Cookie \u00e9 enviado ao navegador.<\/li>\n\n\n\n<li>O navegador envia esse Cookie automaticamente nas pr\u00f3ximas requisi\u00e7\u00f5es.<\/li>\n\n\n\n<li>O servidor identifica a Session correspondente e autoriza o acesso.<\/li>\n<\/ol>\n\n\n\n<p>Esse mecanismo torna a autentica\u00e7\u00e3o muito mais segura e organizada.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Protegendo p\u00e1ginas privadas<\/h1>\n\n\n\n<p>Depois do login, nem todas as p\u00e1ginas da aplica\u00e7\u00e3o podem ficar dispon\u00edveis para qualquer pessoa.<\/p>\n\n\n\n<p>Por isso implementamos uma \u00e1rea protegida.<\/p>\n\n\n\n<p>Sempre que uma p\u00e1gina privada \u00e9 acessada, o sistema verifica se existe uma sess\u00e3o v\u00e1lida.<\/p>\n\n\n\n<p>Caso exista, o acesso \u00e9 liberado.<\/p>\n\n\n\n<p>Caso contr\u00e1rio, o usu\u00e1rio \u00e9 redirecionado novamente para a tela de login.<\/p>\n\n\n\n<p>Esse processo impede que algu\u00e9m simplesmente digite a URL da p\u00e1gina protegida tentando acessar informa\u00e7\u00f5es restritas.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Redirecionamento ap\u00f3s autentica\u00e7\u00e3o<\/h1>\n\n\n\n<p>Outro recurso importante implementado foi o redirecionamento autom\u00e1tico.<\/p>\n\n\n\n<p>Depois que o login \u00e9 realizado com sucesso, o usu\u00e1rio \u00e9 enviado diretamente para a Dashboard da aplica\u00e7\u00e3o.<\/p>\n\n\n\n<p>Esse comportamento melhora bastante a experi\u00eancia de uso e faz parte do funcionamento esperado em praticamente qualquer sistema web.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Implementando o Logout<\/h1>\n\n\n\n<p>T\u00e3o importante quanto entrar no sistema \u00e9 conseguir sair dele corretamente.<\/p>\n\n\n\n<p>Durante o projeto implementamos o processo completo de Logout.<\/p>\n\n\n\n<p>Ao clicar no bot\u00e3o de sair:<\/p>\n\n\n\n<ul>\n<li>A Session \u00e9 destru\u00edda no servidor.<\/li>\n\n\n\n<li>O Cookie deixa de ser v\u00e1lido.<\/li>\n\n\n\n<li>O usu\u00e1rio perde a autentica\u00e7\u00e3o.<\/li>\n\n\n\n<li>Novos acessos \u00e0s p\u00e1ginas protegidas s\u00e3o bloqueados.<\/li>\n<\/ul>\n\n\n\n<p>Esse processo garante que outras pessoas n\u00e3o consigam utilizar a mesma sess\u00e3o posteriormente.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Utilizando o DevTools para entender Sessions e Cookies<\/h1>\n\n\n\n<p>Um dos momentos mais interessantes do projeto acontece quando analisamos o funcionamento utilizando as ferramentas do navegador.<\/p>\n\n\n\n<p>Com o DevTools \u00e9 poss\u00edvel observar:<\/p>\n\n\n\n<ul>\n<li>Os Cookies sendo armazenados.<\/li>\n\n\n\n<li>As requisi\u00e7\u00f5es HTTP.<\/li>\n\n\n\n<li>Os Headers enviados.<\/li>\n\n\n\n<li>As respostas da API.<\/li>\n\n\n\n<li>O comportamento da sess\u00e3o durante Login e Logout.<\/li>\n<\/ul>\n\n\n\n<p>Visualizar essas informa\u00e7\u00f5es ajuda muito a compreender o que realmente acontece por tr\u00e1s das aplica\u00e7\u00f5es web.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Tecnologias utilizadas<\/h1>\n\n\n\n<p>Durante o desenvolvimento utilizamos:<\/p>\n\n\n\n<ul>\n<li>HTML5<\/li>\n\n\n\n<li>CSS3<\/li>\n\n\n\n<li>JavaScript<\/li>\n\n\n\n<li>Fetch API<\/li>\n\n\n\n<li>Node.js<\/li>\n\n\n\n<li>Express<\/li>\n\n\n\n<li>express-session<\/li>\n\n\n\n<li>Sessions<\/li>\n\n\n\n<li>Cookies<\/li>\n<\/ul>\n\n\n\n<p>Essas tecnologias formam uma excelente base para quem deseja aprender autentica\u00e7\u00e3o em aplica\u00e7\u00f5es web.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">O que voc\u00ea aprende neste projeto<\/h1>\n\n\n\n<p>Ao concluir esta aula voc\u00ea ter\u00e1 praticado:<\/p>\n\n\n\n<ul>\n<li>Constru\u00e7\u00e3o de interface de Login<\/li>\n\n\n\n<li>Comunica\u00e7\u00e3o Front-end e Backend<\/li>\n\n\n\n<li>Fetch API<\/li>\n\n\n\n<li>Requisi\u00e7\u00f5es HTTP<\/li>\n\n\n\n<li>Sessions<\/li>\n\n\n\n<li>Cookies<\/li>\n\n\n\n<li>Autentica\u00e7\u00e3o de usu\u00e1rios<\/li>\n\n\n\n<li>Prote\u00e7\u00e3o de p\u00e1ginas privadas<\/li>\n\n\n\n<li>Logout<\/li>\n\n\n\n<li>Organiza\u00e7\u00e3o de projetos<\/li>\n\n\n\n<li>Boas pr\u00e1ticas de desenvolvimento<\/li>\n<\/ul>\n\n\n\n<p>Mais importante do que copiar um sistema pronto \u00e9 entender por que cada etapa existe e como todas trabalham juntas.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Aulas completas<\/h1>\n\n\n\n<p>Este sistema de autentica\u00e7\u00e3o foi desenvolvido em duas etapas para que voc\u00ea compreenda todo o fluxo de funcionamento, desde a cria\u00e7\u00e3o da API at\u00e9 a constru\u00e7\u00e3o da interface utilizada pelo usu\u00e1rio.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Parte 1 \u2014 Backend (Node.js, Express, Session e Cookies)<\/h2>\n\n\n\n<p>Na primeira aula desenvolvemos toda a infraestrutura respons\u00e1vel pela autentica\u00e7\u00e3o.<\/p>\n\n\n\n<p>Voc\u00ea aprender\u00e1 a criar uma API completa utilizando Node.js, configurar o <strong>express-session<\/strong>, criar Sessions, trabalhar com Cookies, proteger rotas e controlar o acesso dos usu\u00e1rios.<\/p>\n\n\n\n<p><strong>Assista \u00e0 aula do Backend:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Como os Sites Continuam Logados Mesmo Depois do F5? | Session e Cookies no Node.js\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/8lSOxEQu3kM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Parte 2 \u2014 Front-end (HTML, CSS e JavaScript)<\/h2>\n\n\n\n<p>Nesta segunda aula conectamos o Front-end \u00e0 API criada anteriormente e desenvolvemos toda a interface do sistema de login.<\/p>\n\n\n\n<p>Durante o projeto voc\u00ea aprender\u00e1 a:<\/p>\n\n\n\n<ul>\n<li>Criar a tela de Login<\/li>\n\n\n\n<li>Consumir a API utilizando Fetch<\/li>\n\n\n\n<li>Enviar usu\u00e1rio e senha para o servidor<\/li>\n\n\n\n<li>Trabalhar com Sessions e Cookies<\/li>\n\n\n\n<li>Redirecionar usu\u00e1rios autenticados<\/li>\n\n\n\n<li>Proteger p\u00e1ginas privadas<\/li>\n\n\n\n<li>Implementar o Logout<\/li>\n\n\n\n<li>Visualizar o funcionamento da autentica\u00e7\u00e3o atrav\u00e9s do DevTools<\/li>\n<\/ul>\n\n\n\n<p><strong>Assista \u00e0 aula do Front-end:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Como Criar um Sistema de Login Completo | JavaScript + Session + Cookies\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/M3rlxITj17U?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>As duas aulas juntas mostram exatamente como funciona um sistema de autentica\u00e7\u00e3o utilizado em aplica\u00e7\u00f5es reais, desde o Backend at\u00e9 a interface acessada pelo usu\u00e1rio.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Por que entender Sessions e Cookies \u00e9 t\u00e3o importante?<\/h1>\n\n\n\n<p>Muitos desenvolvedores conseguem implementar um login copiando c\u00f3digo da internet, mas poucos realmente entendem o que acontece quando o usu\u00e1rio clica no bot\u00e3o <strong>Entrar<\/strong>.<\/p>\n\n\n\n<p>Quando voc\u00ea compreende como o navegador envia Cookies, como o servidor mant\u00e9m uma Session ativa e como as p\u00e1ginas protegidas validam essa autentica\u00e7\u00e3o, passa a enxergar o funcionamento interno de praticamente qualquer sistema web.<\/p>\n\n\n\n<p>Esse conhecimento ser\u00e1 \u00fatil em frameworks como React, Angular, Vue, Next.js ou qualquer outra tecnologia utilizada para desenvolver aplica\u00e7\u00f5es modernas.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Conclus\u00e3o<\/h1>\n\n\n\n<p>Criar um sistema de login vai muito al\u00e9m de verificar usu\u00e1rio e senha.<\/p>\n\n\n\n<p>O verdadeiro desafio est\u00e1 em manter a autentica\u00e7\u00e3o entre diferentes p\u00e1ginas e requisi\u00e7\u00f5es de forma segura.<\/p>\n\n\n\n<p>Quando entendemos como <strong>Sessions<\/strong>, <strong>Cookies<\/strong> e a comunica\u00e7\u00e3o entre Front-end e Backend funcionam, deixamos de apenas utilizar bibliotecas prontas e passamos a compreender como aplica\u00e7\u00f5es reais mant\u00eam milh\u00f5es de usu\u00e1rios conectados todos os dias.<\/p>\n\n\n\n<p>Essa \u00e9 a filosofia do <strong>Desvendando o C\u00f3digo<\/strong>: aprender programa\u00e7\u00e3o entendendo o que acontece por tr\u00e1s da tecnologia.<\/p>\n\n\n\n<p>Quando voc\u00ea entende os conceitos, deixa de decorar c\u00f3digo e passa a construir solu\u00e7\u00f5es com seguran\u00e7a, sabendo exatamente por que cada parte do sistema existe e como todas trabalham juntas.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voc\u00ea j\u00e1 percebeu que, depois de fazer login em um site, basta atualizar a p\u00e1gina e sua conta continua conectada? Ou que mesmo fechando uma aba e abrindo outra voc\u00ea ainda permanece autenticado? Isso n\u00e3o acontece por acaso. Existe toda uma comunica\u00e7\u00e3o entre o navegador e o servidor utilizando Sessions e Cookies, permitindo que o sistema reconhe\u00e7a quem \u00e9 voc\u00ea em cada nova requisi\u00e7\u00e3o. Neste projeto vamos construir o Front-end completo de um sistema de login, conectando uma aplica\u00e7\u00e3o HTML, CSS e JavaScript a uma API desenvolvida em Node.js. Ao final voc\u00ea ter\u00e1 um sistema de autentica\u00e7\u00e3o totalmente funcional, utilizando exatamente os mesmos conceitos presentes em aplica\u00e7\u00f5es profissionais. Como funciona um sistema de login? Quando o usu\u00e1rio informa seu login e senha, essas informa\u00e7\u00f5es s\u00e3o enviadas para o servidor. O servidor verifica se as credenciais est\u00e3o corretas. Caso estejam, ele cria uma Session para aquele usu\u00e1rio e envia um Cookie para o navegador. Nas pr\u00f3ximas requisi\u00e7\u00f5es, o navegador envia automaticamente esse Cookie ao servidor. Assim, o servidor consegue identificar quem fez a requisi\u00e7\u00e3o sem precisar solicitar usu\u00e1rio e senha novamente. \u00c9 exatamente esse processo que faz com que voc\u00ea continue logado mesmo depois de atualizar a p\u00e1gina. Construindo a interface de Login O primeiro passo foi desenvolver toda a interface utilizando HTML e CSS. Criamos um formul\u00e1rio contendo: Embora seja uma interface simples, ela representa exatamente o ponto de entrada da autentica\u00e7\u00e3o. Toda a l\u00f3gica acontece a partir do envio desses dados para o servidor. Consumindo a API com Fetch Depois da interface pronta, chegou o momento de conectar o Front-end ao Backend. Para isso utilizamos a Fetch API, respons\u00e1vel por realizar requisi\u00e7\u00f5es HTTP utilizando JavaScript. Quando o usu\u00e1rio clica no bot\u00e3o de login, o navegador envia uma requisi\u00e7\u00e3o para a API contendo: O servidor recebe essas informa\u00e7\u00f5es, realiza a valida\u00e7\u00e3o e devolve a resposta informando se o acesso foi autorizado. Essa comunica\u00e7\u00e3o entre Front-end e Backend \u00e9 um dos conceitos mais importantes do desenvolvimento web moderno. Sessions e Cookies na pr\u00e1tica Muitos iniciantes acreditam que o Cookie guarda todas as informa\u00e7\u00f5es do usu\u00e1rio. Na realidade, normalmente ele armazena apenas um identificador da sess\u00e3o. Quem realmente guarda os dados \u00e9 o servidor. O fluxo acontece assim: Esse mecanismo torna a autentica\u00e7\u00e3o muito mais segura e organizada. Protegendo p\u00e1ginas privadas Depois do login, nem todas as p\u00e1ginas da aplica\u00e7\u00e3o podem ficar dispon\u00edveis para qualquer pessoa. Por isso implementamos uma \u00e1rea protegida. Sempre que uma p\u00e1gina privada \u00e9 acessada, o sistema verifica se existe uma sess\u00e3o v\u00e1lida. Caso exista, o acesso \u00e9 liberado. Caso contr\u00e1rio, o usu\u00e1rio \u00e9 redirecionado novamente para a tela de login. Esse processo impede que algu\u00e9m simplesmente digite a URL da p\u00e1gina protegida tentando acessar informa\u00e7\u00f5es restritas. Redirecionamento ap\u00f3s autentica\u00e7\u00e3o Outro recurso importante implementado foi o redirecionamento autom\u00e1tico. Depois que o login \u00e9 realizado com sucesso, o usu\u00e1rio \u00e9 enviado diretamente para a Dashboard da aplica\u00e7\u00e3o. Esse comportamento melhora bastante a experi\u00eancia de uso e faz parte do funcionamento esperado em praticamente qualquer sistema web. Implementando o Logout T\u00e3o importante quanto entrar no sistema \u00e9 conseguir sair dele corretamente. Durante o projeto implementamos o processo completo de Logout. Ao clicar no bot\u00e3o de sair: Esse processo garante que outras pessoas n\u00e3o consigam utilizar a mesma sess\u00e3o posteriormente. Utilizando o DevTools para entender Sessions e Cookies Um dos momentos mais interessantes do projeto acontece quando analisamos o funcionamento utilizando as ferramentas do navegador. Com o DevTools \u00e9 poss\u00edvel observar: Visualizar essas informa\u00e7\u00f5es ajuda muito a compreender o que realmente acontece por tr\u00e1s das aplica\u00e7\u00f5es web. Tecnologias utilizadas Durante o desenvolvimento utilizamos: Essas tecnologias formam uma excelente base para quem deseja aprender autentica\u00e7\u00e3o em aplica\u00e7\u00f5es web. O que voc\u00ea aprende neste projeto Ao concluir esta aula voc\u00ea ter\u00e1 praticado: Mais importante do que copiar um sistema pronto \u00e9 entender por que cada etapa existe e como todas trabalham juntas. Aulas completas Este sistema de autentica\u00e7\u00e3o foi desenvolvido em duas etapas para que voc\u00ea compreenda todo o fluxo de funcionamento, desde a cria\u00e7\u00e3o da API at\u00e9 a constru\u00e7\u00e3o da interface utilizada pelo usu\u00e1rio. Parte 1 \u2014 Backend (Node.js, Express, Session e Cookies) Na primeira aula desenvolvemos toda a infraestrutura respons\u00e1vel pela autentica\u00e7\u00e3o. Voc\u00ea aprender\u00e1 a criar uma API completa utilizando Node.js, configurar o express-session, criar Sessions, trabalhar com Cookies, proteger rotas e controlar o acesso dos usu\u00e1rios. Assista \u00e0 aula do Backend: Parte 2 \u2014 Front-end (HTML, CSS e JavaScript) Nesta segunda aula conectamos o Front-end \u00e0 API criada anteriormente e desenvolvemos toda a interface do sistema de login. Durante o projeto voc\u00ea aprender\u00e1 a: Assista \u00e0 aula do Front-end: As duas aulas juntas mostram exatamente como funciona um sistema de autentica\u00e7\u00e3o utilizado em aplica\u00e7\u00f5es reais, desde o Backend at\u00e9 a interface acessada pelo usu\u00e1rio. Por que entender Sessions e Cookies \u00e9 t\u00e3o importante? Muitos desenvolvedores conseguem implementar um login copiando c\u00f3digo da internet, mas poucos realmente entendem o que acontece quando o usu\u00e1rio clica no bot\u00e3o Entrar. Quando voc\u00ea compreende como o navegador envia Cookies, como o servidor mant\u00e9m uma Session ativa e como as p\u00e1ginas protegidas validam essa autentica\u00e7\u00e3o, passa a enxergar o funcionamento interno de praticamente qualquer sistema web. Esse conhecimento ser\u00e1 \u00fatil em frameworks como React, Angular, Vue, Next.js ou qualquer outra tecnologia utilizada para desenvolver aplica\u00e7\u00f5es modernas. Conclus\u00e3o Criar um sistema de login vai muito al\u00e9m de verificar usu\u00e1rio e senha. O verdadeiro desafio est\u00e1 em manter a autentica\u00e7\u00e3o entre diferentes p\u00e1ginas e requisi\u00e7\u00f5es de forma segura. Quando entendemos como Sessions, Cookies e a comunica\u00e7\u00e3o entre Front-end e Backend funcionam, deixamos de apenas utilizar bibliotecas prontas e passamos a compreender como aplica\u00e7\u00f5es reais mant\u00eam milh\u00f5es de usu\u00e1rios conectados todos os dias. Essa \u00e9 a filosofia do Desvendando o C\u00f3digo: aprender programa\u00e7\u00e3o entendendo o que acontece por tr\u00e1s da tecnologia. Quando voc\u00ea entende os conceitos, deixa de decorar c\u00f3digo e passa a construir solu\u00e7\u00f5es com seguran\u00e7a, sabendo exatamente por que cada parte do sistema existe e como todas trabalham juntas.<\/p>\n","protected":false},"author":1,"featured_media":2113,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2112"}],"collection":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2112"}],"version-history":[{"count":2,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2112\/revisions"}],"predecessor-version":[{"id":2115,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2112\/revisions\/2115"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/2113"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}