{"id":2038,"date":"2026-06-22T12:43:31","date_gmt":"2026-06-22T15:43:31","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=2038"},"modified":"2026-06-22T12:44:09","modified_gmt":"2026-06-22T15:44:09","slug":"como-os-sites-sabem-quem-esta-logado-node-js-mysql","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=2038","title":{"rendered":"Como os Sites Sabem Quem Est\u00e1 Logado? | Node.js + MySQL"},"content":{"rendered":"\n<p>Voc\u00ea j\u00e1 se perguntou como os sites conseguem saber quem est\u00e1 logado?<\/p>\n\n\n\n<p>Quando voc\u00ea entra no Instagram, Gmail ou qualquer outro sistema, existe uma s\u00e9rie de processos acontecendo por tr\u00e1s dos bastidores.<\/p>\n\n\n\n<p>Neste projeto vamos criar um sistema de autentica\u00e7\u00e3o utilizando Node.js, Express e MySQL, entendendo como ocorre a comunica\u00e7\u00e3o entre Front-end, Back-end e Banco de Dados.<\/p>\n\n\n\n<p>Mais importante do que decorar c\u00f3digo, \u00e9 entender como a tecnologia funciona.<\/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 preenche:<\/p>\n\n\n\n<ul>\n<li>E-mail<\/li>\n\n\n\n<li>Senha<\/li>\n<\/ul>\n\n\n\n<p>Essas informa\u00e7\u00f5es s\u00e3o enviadas para o servidor.<\/p>\n\n\n\n<p>O servidor consulta o banco de dados e verifica se o usu\u00e1rio existe.<\/p>\n\n\n\n<p>Se os dados forem v\u00e1lidos, o sistema permite o acesso.<\/p>\n\n\n\n<p>Caso contr\u00e1rio, uma mensagem de erro \u00e9 exibida.<\/p>\n\n\n\n<p>Esse processo acontece milhares de vezes todos os dias em aplica\u00e7\u00f5es reais.<\/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>Neste projeto utilizamos:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Front-end<\/h2>\n\n\n\n<ul>\n<li>HTML<\/li>\n\n\n\n<li>CSS<\/li>\n\n\n\n<li>JavaScript<\/li>\n\n\n\n<li>Fetch API<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Back-end<\/h2>\n\n\n\n<ul>\n<li>Node.js<\/li>\n\n\n\n<li>Express<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Banco de dados<\/h2>\n\n\n\n<ul>\n<li>MySQL<\/li>\n\n\n\n<li>Procedures<\/li>\n\n\n\n<li>Query parametrizada<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Criando a rota de login<\/h1>\n\n\n\n<p>No Express criamos uma rota:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>POST \/login\n<\/code><\/pre>\n\n\n\n<p>Essa rota recebe:<\/p>\n\n\n\n<ul>\n<li>email<\/li>\n\n\n\n<li>senha<\/li>\n<\/ul>\n\n\n\n<p>Os dados chegam atrav\u00e9s do req.body.<\/p>\n\n\n\n<p>Depois disso, o servidor faz a consulta no banco de dados para verificar se existe um usu\u00e1rio correspondente.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Evitando SQL Injection<\/h1>\n\n\n\n<p>Uma pr\u00e1tica importante \u00e9 utilizar par\u00e2metros na consulta.<\/p>\n\n\n\n<p>Em vez de concatenar valores diretamente no SQL, utilizamos:<\/p>\n\n\n\n<ul>\n<li>Interroga\u00e7\u00f5es (?)<\/li>\n\n\n\n<li>Query parametrizada<\/li>\n<\/ul>\n\n\n\n<p>Essa abordagem aumenta a seguran\u00e7a da aplica\u00e7\u00e3o e evita ataques de SQL Injection.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Conectando ao banco de dados<\/h1>\n\n\n\n<p>Ap\u00f3s receber os dados do usu\u00e1rio, o Node.js realiza uma consulta no MySQL.<\/p>\n\n\n\n<p>Caso exista um usu\u00e1rio cadastrado, retornamos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"sucesso\": true\n}\n<\/code><\/pre>\n\n\n\n<p>Caso contr\u00e1rio:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"sucesso\": false\n}\n<\/code><\/pre>\n\n\n\n<p>Esse retorno ser\u00e1 utilizado pelo Front-end.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Testando a API<\/h1>\n\n\n\n<p>Antes de integrar o HTML com o Back-end, utilizamos o Thunder Client.<\/p>\n\n\n\n<p>Essa etapa \u00e9 muito importante porque permite validar:<\/p>\n\n\n\n<ul>\n<li>A rota;<\/li>\n\n\n\n<li>O banco de dados;<\/li>\n\n\n\n<li>A resposta do servidor;<\/li>\n<\/ul>\n\n\n\n<p>Fazer testes por partes facilita a depura\u00e7\u00e3o e economiza muito tempo.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Capturando os dados do formul\u00e1rio<\/h1>\n\n\n\n<p>No Front-end utilizamos JavaScript para capturar:<\/p>\n\n\n\n<ul>\n<li>E-mail;<\/li>\n\n\n\n<li>Senha.<\/li>\n<\/ul>\n\n\n\n<p>Com getElementById() conseguimos acessar os inputs e recuperar seus valores.<\/p>\n\n\n\n<p>Depois disso, enviamos essas informa\u00e7\u00f5es 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\">Enviando dados utilizando Fetch API<\/h1>\n\n\n\n<p>A comunica\u00e7\u00e3o entre Front-end e Back-end foi feita utilizando:<\/p>\n\n\n\n<ul>\n<li>Fetch API;<\/li>\n\n\n\n<li>M\u00e9todo POST;<\/li>\n\n\n\n<li>Headers;<\/li>\n\n\n\n<li>Content-Type application\/json;<\/li>\n\n\n\n<li>JSON.stringify().<\/li>\n<\/ul>\n\n\n\n<p>Essa \u00e9 uma estrutura muito comum em 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\">Tratando a resposta do servidor<\/h1>\n\n\n\n<p>Ap\u00f3s a consulta no banco de dados, o servidor retorna uma resposta.<\/p>\n\n\n\n<p>Se o login for v\u00e1lido:<\/p>\n\n\n\n<p>\u2705 Usu\u00e1rio autenticado.<\/p>\n\n\n\n<p>Caso contr\u00e1rio:<\/p>\n\n\n\n<p>\u274c Usu\u00e1rio ou senha inv\u00e1lidos.<\/p>\n\n\n\n<p>Essa pr\u00e1tica \u00e9 mais segura do que informar exatamente qual dado est\u00e1 incorreto.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Navegando entre p\u00e1ginas<\/h1>\n\n\n\n<p>Ap\u00f3s a autentica\u00e7\u00e3o, utilizamos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>window.location.href\n<\/code><\/pre>\n\n\n\n<p>para redirecionar o usu\u00e1rio para outra p\u00e1gina.<\/p>\n\n\n\n<p>Esse \u00e9 um exemplo simples, mas ajuda a entender o fluxo completo da autentica\u00e7\u00e3o.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Persist\u00eancia do login<\/h1>\n\n\n\n<p>Uma das partes mais importantes \u00e9 manter o usu\u00e1rio autenticado.<\/p>\n\n\n\n<p>Existem diversas formas de fazer isso:<\/p>\n\n\n\n<ul>\n<li>LocalStorage;<\/li>\n\n\n\n<li>Cookies;<\/li>\n\n\n\n<li>JWT (JSON Web Token);<\/li>\n\n\n\n<li>Session;<\/li>\n\n\n\n<li>Arquivos JSON;<\/li>\n\n\n\n<li>Banco de dados.<\/li>\n<\/ul>\n\n\n\n<p>Neste projeto foi constru\u00edda a base para posteriormente adicionar autentica\u00e7\u00e3o utilizando JWT.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Seguran\u00e7a em sistemas reais<\/h1>\n\n\n\n<p>Em aplica\u00e7\u00f5es profissionais normalmente utilizamos:<\/p>\n\n\n\n<p>\u2705 JWT<\/p>\n\n\n\n<p>\u2705 Hash de senha<\/p>\n\n\n\n<p>\u2705 Criptografia<\/p>\n\n\n\n<p>\u2705 Middleware<\/p>\n\n\n\n<p>\u2705 Cookies<\/p>\n\n\n\n<p>\u2705 Expira\u00e7\u00e3o autom\u00e1tica<\/p>\n\n\n\n<p>\u2705 Rotas protegidas<\/p>\n\n\n\n<p>Tudo isso torna o sistema mais seguro.<\/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 aprendeu<\/h1>\n\n\n\n<ul>\n<li>Node.js<\/li>\n\n\n\n<li>Express<\/li>\n\n\n\n<li>MySQL<\/li>\n\n\n\n<li>Fetch API<\/li>\n\n\n\n<li>HTML<\/li>\n\n\n\n<li>JavaScript<\/li>\n\n\n\n<li>Login<\/li>\n\n\n\n<li>Autentica\u00e7\u00e3o<\/li>\n\n\n\n<li>SQL Injection<\/li>\n\n\n\n<li>Query parametrizada<\/li>\n\n\n\n<li>Thunder Client<\/li>\n\n\n\n<li>Comunica\u00e7\u00e3o Front-end e Back-end<\/li>\n\n\n\n<li>Persist\u00eancia de dados<\/li>\n\n\n\n<li>Seguran\u00e7a<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83c\udfa5 V\u00eddeo deste projeto<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Como os Sites Sabem Quem Est\u00e1 Logado? | Node.js + MySQL<\/h2>\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 Sabem Quem Est\u00e1 Logado? | Node.js + MySQL\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/ek7ONBqMgtE?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<h1 class=\"wp-block-heading\">\ud83d\udcfa Live completa<\/h1>\n\n\n\n<p>Quer acompanhar toda a constru\u00e7\u00e3o do projeto e ver cada etapa sendo desenvolvida ao vivo?<\/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=\"Pare de expor dados! Aprenda a blindar sua aplica\u00e7\u00e3o com MySQL e Node.js\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/A8n9wBi9dqs?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<h1 class=\"wp-block-heading\">Conclus\u00e3o<\/h1>\n\n\n\n<p>Quando voc\u00ea faz login em um site, existe muito mais acontecendo do que simplesmente comparar um e-mail e uma senha.<\/p>\n\n\n\n<p>Existe comunica\u00e7\u00e3o entre Front-end, Back-end e Banco de Dados.<\/p>\n\n\n\n<p>Existe valida\u00e7\u00e3o.<\/p>\n\n\n\n<p>Existe seguran\u00e7a.<\/p>\n\n\n\n<p>Existe persist\u00eancia da autentica\u00e7\u00e3o.<\/p>\n\n\n\n<p>E \u00e9 justamente isso que buscamos aqui no Desvendando o C\u00f3digo.<\/p>\n\n\n\n<p>Eu n\u00e3o ensino programa\u00e7\u00e3o.<\/p>\n\n\n\n<p>Eu ajudo as pessoas a entenderem como a tecnologia funciona.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voc\u00ea j\u00e1 se perguntou como os sites conseguem saber quem est\u00e1 logado? Quando voc\u00ea entra no Instagram, Gmail ou qualquer outro sistema, existe uma s\u00e9rie de processos acontecendo por tr\u00e1s dos bastidores. Neste projeto vamos criar um sistema de autentica\u00e7\u00e3o utilizando Node.js, Express e MySQL, entendendo como ocorre a comunica\u00e7\u00e3o entre Front-end, Back-end e Banco de Dados. Mais importante do que decorar c\u00f3digo, \u00e9 entender como a tecnologia funciona. Como funciona um sistema de login? Quando o usu\u00e1rio preenche: Essas informa\u00e7\u00f5es s\u00e3o enviadas para o servidor. O servidor consulta o banco de dados e verifica se o usu\u00e1rio existe. Se os dados forem v\u00e1lidos, o sistema permite o acesso. Caso contr\u00e1rio, uma mensagem de erro \u00e9 exibida. Esse processo acontece milhares de vezes todos os dias em aplica\u00e7\u00f5es reais. Tecnologias utilizadas Neste projeto utilizamos: Front-end Back-end Banco de dados Criando a rota de login No Express criamos uma rota: Essa rota recebe: Os dados chegam atrav\u00e9s do req.body. Depois disso, o servidor faz a consulta no banco de dados para verificar se existe um usu\u00e1rio correspondente. Evitando SQL Injection Uma pr\u00e1tica importante \u00e9 utilizar par\u00e2metros na consulta. Em vez de concatenar valores diretamente no SQL, utilizamos: Essa abordagem aumenta a seguran\u00e7a da aplica\u00e7\u00e3o e evita ataques de SQL Injection. Conectando ao banco de dados Ap\u00f3s receber os dados do usu\u00e1rio, o Node.js realiza uma consulta no MySQL. Caso exista um usu\u00e1rio cadastrado, retornamos: Caso contr\u00e1rio: Esse retorno ser\u00e1 utilizado pelo Front-end. Testando a API Antes de integrar o HTML com o Back-end, utilizamos o Thunder Client. Essa etapa \u00e9 muito importante porque permite validar: Fazer testes por partes facilita a depura\u00e7\u00e3o e economiza muito tempo. Capturando os dados do formul\u00e1rio No Front-end utilizamos JavaScript para capturar: Com getElementById() conseguimos acessar os inputs e recuperar seus valores. Depois disso, enviamos essas informa\u00e7\u00f5es para o servidor. Enviando dados utilizando Fetch API A comunica\u00e7\u00e3o entre Front-end e Back-end foi feita utilizando: Essa \u00e9 uma estrutura muito comum em aplica\u00e7\u00f5es modernas. Tratando a resposta do servidor Ap\u00f3s a consulta no banco de dados, o servidor retorna uma resposta. Se o login for v\u00e1lido: \u2705 Usu\u00e1rio autenticado. Caso contr\u00e1rio: \u274c Usu\u00e1rio ou senha inv\u00e1lidos. Essa pr\u00e1tica \u00e9 mais segura do que informar exatamente qual dado est\u00e1 incorreto. Navegando entre p\u00e1ginas Ap\u00f3s a autentica\u00e7\u00e3o, utilizamos: para redirecionar o usu\u00e1rio para outra p\u00e1gina. Esse \u00e9 um exemplo simples, mas ajuda a entender o fluxo completo da autentica\u00e7\u00e3o. Persist\u00eancia do login Uma das partes mais importantes \u00e9 manter o usu\u00e1rio autenticado. Existem diversas formas de fazer isso: Neste projeto foi constru\u00edda a base para posteriormente adicionar autentica\u00e7\u00e3o utilizando JWT. Seguran\u00e7a em sistemas reais Em aplica\u00e7\u00f5es profissionais normalmente utilizamos: \u2705 JWT \u2705 Hash de senha \u2705 Criptografia \u2705 Middleware \u2705 Cookies \u2705 Expira\u00e7\u00e3o autom\u00e1tica \u2705 Rotas protegidas Tudo isso torna o sistema mais seguro. O que voc\u00ea aprendeu \ud83c\udfa5 V\u00eddeo deste projeto Como os Sites Sabem Quem Est\u00e1 Logado? | Node.js + MySQL \ud83d\udcfa Live completa Quer acompanhar toda a constru\u00e7\u00e3o do projeto e ver cada etapa sendo desenvolvida ao vivo? Conclus\u00e3o Quando voc\u00ea faz login em um site, existe muito mais acontecendo do que simplesmente comparar um e-mail e uma senha. Existe comunica\u00e7\u00e3o entre Front-end, Back-end e Banco de Dados. Existe valida\u00e7\u00e3o. Existe seguran\u00e7a. Existe persist\u00eancia da autentica\u00e7\u00e3o. E \u00e9 justamente isso que buscamos aqui no Desvendando o C\u00f3digo. Eu n\u00e3o ensino programa\u00e7\u00e3o. Eu ajudo as pessoas a entenderem como a tecnologia funciona.<\/p>\n","protected":false},"author":1,"featured_media":2039,"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\/2038"}],"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=2038"}],"version-history":[{"count":3,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2038\/revisions"}],"predecessor-version":[{"id":2042,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2038\/revisions\/2042"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/2039"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2038"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2038"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2038"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}