Login em um site estático com OpenID Connect, OAuth 2.0 e PKCE

Colocar em uma página dois botões, Entrar com Google e Entrar com Microsoft, é fácil. O trabalho começa quando perguntamos o que acontecerá depois do clique. Quem confirmará a identidade da visitante? Onde viverá a conta usada pelo nosso aplicativo? Como o navegador provará, nos pedidos seguintes, que já existe uma sessão? E qual parte desse sistema pode existir em um site cujos arquivos são públicos?

Essas perguntas pertencem a camadas diferentes. Misturá-las produz soluções aparentemente simples, como guardar um token no localStorage ou publicar um Client Secret junto com o JavaScript. Nenhuma delas sobrevive a uma inspeção séria.

Vamos começar, portanto, antes do OAuth 2.0. Primeiro compararemos as alternativas de login e de sessão. Depois escolheremos a arquitetura adequada ao nosso caso: o GitHub Pages continuará publicando HTML, CSS e JavaScript, enquanto um Cloudflare Worker executará o protocolo OpenID Connect, manterá sessões em um banco D1 e entregará ao navegador apenas um cookie opaco. Google e Microsoft confirmarão a identidade. O Worker, não o navegador, guardará os segredos dos clientes.

Trilha do laboratório: a mesma fronteira em um único projeto

O artigo conservará essa arquitetura como referência de produção. No laboratório, aplicaremos o mesmo contrato de segurança com uma implantação mais curta: os arquivos públicos ficarão no Cloudflare Pages, as rotas dinâmicas serão Pages Functions e ambos compartilharão https://NOME-DO-PROJETO.pages.dev. O D1, os cookies opacos, PKCE, state, nonce e os dois provedores não mudam. Muda apenas a forma de hospedar e publicar. A integração entre GitHub e Pages substituirá o uso local de Node.js, npm, npx e Wrangler.

Não haverá uma lista artificial de exercícios no final. O próprio artigo será o exercício: cada seção acrescentará uma peça verificável ao sistema, e o tutorial terminará com testes que distinguem um botão bonito de uma autenticação funcional.

No exemplo, substitua equipe-exemplo, projetoexemplo.com.br, NOME-DO-PROJETO e todos os identificadores ilustrativos pelos valores do seu projeto. Nunca reutilize segredos mostrados em uma aula, captura de tela ou repositório.

Conteúdo Exclusivo

Quer continuar lendo?

Este artigo completo contém estratégias práticas e dados exclusivos reservados para nossos membros cadastrados.

Continuar com Google Acesso gratuito e instantâneo com sua conta Google