• Home

    Escolha seu Plano

    Carreiras Alura

    Evolua com profundidade técnica, direção clara e aplicação prática.

    Jornadas guiadas do básico ao avançado com checkpoints práticos, desenhadas para quem busca profundidade e protagonismo técnico.

    Iniciante

    Comece do zero com uma trilha clara e progressiva.

    Fundamentos práticos para dar os primeiros passos com segurança e construir uma base sólida.

    Intermediário

    Continue sua evolução com cursos que conectam fundamentos, ferramentas e prática profissional. Ganhe autonomia, e avance para projetos mais completos.

    Avançado

    Aprofunde temas técnicos e estratégicos para enfrentar desafios mais complexos. Explore boas práticas, arquitetura, performance com visão profissional.

    Cursos

    Ver mais cursos de Back-end
    • Pensamento computacional: fundamentos da computação e lógica de programação
    • Lógica de programação: mergulhe em programação com JavaScript
    • DDD: fundamentos do design orientado a domínio
    • ASP.NET: autenticação e autorização em APIs e aplicações web
    • Microsserviços: migração de monólitos e modularização

    Cursos

    Ver mais cursos de Dados
    • Python para Dados: primeiros passos
    • Excel: domine o editor de planilhas
    • Engenharia de Dados: Orquestração de Pipelines com Apache Airflow
    • Power BI Desktop: construindo meu primeiro dashboard
    • Governança e Arquitetura de Dados

    Cursos

    Ver mais cursos de Inteligência Artificial
    • IA: Explorando o Potencial da Inteligência Artificial Generativa
    • Engenharia de Prompt: Criando Prompts Eficazes para IA Generativa
    • Claude para Análise de Dados: prompts, integrações e automações
    • Agno: criando agentes e sistemas multiagente
    • Engenharia de software na era da IA: segurança de aplicações com agentes, MCPs e código gerado por IA

    Cursos

    Ver mais cursos de Front-end
    • HTML e CSS: ambiente, estrutura e estilo
    • React: realizando testes avançados com Jest e Testing Library
    • React: integrando TypeScript em projetos
    • JavaScript: aprendendo a programar
    • React: aplicando arquiteturas de Micro frontends

    Cursos

    Ver mais cursos de DevOps
    • Sistema Operacional Linux: fundamentos e administração prática
    • Containers e Docker: empacotamento, isolamento e gestão
    • Redes: dos conceitos iniciais à criação de uma intranet
    • Linux: gerenciando diretórios, arquivos, permissões e processos
    • Cibersegurança: Fundamentos e práticas integradas

    Cursos

    Ver mais cursos de UX & Design
    • UX Research: mapeando a experiência da pessoa usuária
    • UX/UI Design: Entregando produtos digitais com IA
    • UI Design: Prototipação e animações interativas
    • Figma: Conhecendo o programa
    • Product Design: métricas e ciclo de vida do produto

    Cursos

    Ver mais cursos de Gestão & Negócios
    • Canva: Criação de landing pages e e-mail marketing
    • Agilidade: como ela pode ajudar a criar um time de alta performance
    • Google Analytics 4: Extrair insights e configurar eventos
    • Management 3.0: gerencie o ambiente, não as pessoas
    • Automação de processos com n8n: Inteligência de dados para Marketing

    Cursos

    Ver mais cursos de Mobile
    • React Native: Estilização e Layouts com Flexbox e StyleSheet
    • Flutter: Graphql e suporte offline
    • Android com Gemini: Trabalhando com textos e imagens na IA
    • Dart: trabalhando com orientação a objetos
    • React Native: Dominando Listas com FlatList e ScrollView

    Carreiras

    Ver mais carreiras
    • Especialista em IA
    • Engenharia de IA
    • Ai native software engineering
    • Arquitetura de Soluções com IA
    • AI Product Design
    • Engenharia de Machine Learning
    • Desenvolvimento Front-End React
    • Engenharia de Dados
    • Cloud Security
    • Social Media Marketing
    • Engenharia de Agentes de IA

    Cursos

    • Engenharia de Prompt: Prompts Eficazes para IA Generativa
    • Claude Code: Criando sua Primeira Aplicação
    • Python: Crie sua Primeira Aplicação
    • Git e GitHub: Compartilhando e Colaborando
    • N8N: Fluxos de Trabalho Avançados

    Cursos

    • Copilot Studio: Solução Multiagentes
    • Padrões de API HTTP e Modelagem de APIs
    • Python para Análise de Dados com SQL
    • Docker: Criando e Gerenciando Containers
    • Design com IA: Otimizando o Processo Criativo

    Cursos

    • Model Context Protocol (MCP)
    • Spec-Driven Development: Dev Assistido por Agentes
    • Arquitetura de Sistemas Distribuídos com Java
    • Governança de Modelos e Reprodutibilidade
    • Pentest: Vulnerabilidades em Aplicações Web

    Escolha seu Plano

    Skills & Go

    O Skills & Go é para Tech Leads, Product Managers, estrategistas e early adopters que transformam ideias em soluções de alto impacto. Em cursos ao vivo e 100% online, você domina a nova era da IA em tempo real.

    Aulas ao vivo

    Saiba mais
    • Agentic Engineering: orquestre múltiplos agentes com confiabilidade
    • Building AI Products: transforme ideias em produtos reais com IA
    • AI Data Strategy: transforme dados em decisões estratégicas com IA

    Escolha seu Plano

    Eventos Alura

    Nossos eventos são pensados para quem quer estar à frente das mudanças em tecnologia, IA e inovação. Em experiências presenciais, você acompanha tendências e se conecta com especialistas que estão moldando o futuro.

    Próximos eventos

    • Imersão Engenharia de Software: Dev na Era da IA
    • IA Conference
    • Alura Signals
  • Talent Lab
  • IA

    Escolha seu Plano

    Conteúdos gratuitos

    Explore conteúdos gratuitos para aprender tecnologia no seu ritmo. Encontre artigos com conteúdos técnicos para aprender na prática, notícias para acompanhar as principais tendências do mercado e o Alura Labs, com análises e reflexões de especialistas sobre tecnologia, IA e carreira.

    Conteúdos gratuitos

    • Artigos
    • Notícias
    • Alura Labs
  • Para Empresas
Ver planos
Links principais
  • Planos e Promoções
  • Links complementares do menu mobile
  • Talent lab
  • Inteligência Artificial
  • Pós Graduações
  • Para Empresas
  • Sobre a Alura
  • Grupo Alun
  • Entrar
    • Home
    • Carreiras
    • Skills & Go
    • Talent Lab
    • Inteligência Artificial
    • Pós Graduações
    • Artigos
    • Sobre a Alura
    • Grupo Alun
    LoginContato
    • LinkedIn
    • Instagram
    • YouTube
    1. Página inicial
    2. Front-end
    3. Autenticação moderna com OAuth 2.0 e OpenID Connect: dicas para desenvolvedores frontend

    Autenticação moderna com OAuth 2.0 e OpenID Connect: dicas para desenvolvedores frontend

    9 min9 minutos de leitura

    9 min9 minutos de leitura

    Publicado: 20/05/2024

    Última atualização: 26/02/2026

    1. OAuth 1.0, 1.0A e 2.0
    2. Como isso afeta o desenvolvimento front-end?
    3. Analisando o fluxo de OAuth 2.0
    4. OpenID Connect
    5. Conclusão

    Hoje eu tô aqui para explorarmos juntos um tema crucial para quem trabalha com desenvolvimento front-end: autenticação e autorização usando Next.js.

    Você já notou como, ao entrar em sites como o GitHub ou o LinkedIn, é oferecida a opção de fazer login usando sua conta do Google ou Facebook?

    Esse é um exemplo clássico de autenticação e autorização sendo implementadas na prática.

    Mas como isso é feito de forma segura, usando tecnologias modernas como OAuth 2.0 e OpenID Connect?

    Neste artigo, vamos explorar exatamente isso. Vamos mergulhar nos conceitos de OAuth 1.0, 1.0A, 2.0, e OpenID Connect, entender as diferenças entre eles, e mostrar como você pode implementá-los no seu projeto Next.js para garantir que somente pessoas autorizadas tenham acesso às informações corretas.

    Gif de um homem fazendo login em uma tela de computador.

    OAuth 1.0, 1.0A e 2.0

    O OAuth 1.0 foi o primeiro passo na criação de um padrão aberto para autorização segura.

    Ele permite que os usuários concedam acesso a suas informações armazenadas em um serviço a outro serviço sem compartilhar suas credenciais.

    As principais características do OAuth 1.0 incluem:

    • Assinaturas de requisição: Todas as requisições são assinadas, garantindo que os dados não sejam alterados durante a transmissão.
    • Tokens de acesso: Em vez de usar o nome de usuário e a senha, são utilizados tokens de acesso.

    No entanto, OAuth 1.0 tinha algumas vulnerabilidades. Para resolver isso, OAuth 1.0A foi introduzido, adicionando o processo de verificação de "nonce" (um valor único para cada requisição) e a inclusão de um campo oauth_verifier para aumentar a segurança durante o processo de troca de tokens.

    OAuth-2.0.

    Já o OAuth 2.0 trouxe uma série de melhorias e mudanças significativas. Ele resolve o problema de como permitir que uma aplicação (cliente) acesse recursos protegidos em nome de um usuário, sem expor as credenciais do usuário.

    Por exemplo, um usuário pode permitir que um aplicativo de terceiros publique em seu feed de redes sociais sem fornecer a senha da rede social ao aplicativo.

    Principais características do OAuth 2.0

    Vamos passar por algumas de suas principais características:

    • Fluxos de autorização simplificados: O OAuth 2.0 introduz diferentes fluxos de autorização (ou grant types) para diferentes casos de uso, como o fluxo de autorização, o fluxo implícito, o fluxo de credenciais do proprietário da senha e o fluxo de credenciais do cliente.
    • Tokens de acesso e refresh tokens: Em vez de apenas tokens de acesso, OAuth 2.0 também utiliza refresh tokens para obter novos tokens de acesso sem pedir ao usuário para fazer login novamente.
    • Escopos (Scopes): Permitem que você especifique exatamente o que seu aplicativo pode acessar, proporcionando um controle mais granular sobre os recursos.
    • Compatibilidade com OpenID Connect: OAuth 2.0 serve de base para o OpenID Connect, que adiciona uma camada de autenticação sobre o protocolo de autorização.
    Banner do Guia Tático Alura sobre carreira em tecnologia, destacando o mapa da carreira tech. A imagem convida a explorar diferentes caminhos profissionais, comparar possibilidades e encontrar a próxima fase da carreira na área de tecnologia, com chamada “Explore o mapa”.

    Como isso afeta o desenvolvimento front-end?

    Como pessoa desenvolvedora front-end, você frequentemente precisa integrar sua aplicação com APIs externas que requerem autenticação e autorização.

    Com OAuth 2.0, você pode:

    • Garantir a segurança das requisições: usando tokens de acesso, você evita a necessidade de enviar credenciais do usuário com cada requisição.
    • Melhorar a experiência do usuário: com refresh tokens, você pode manter os usuários autenticados sem exigir repetidos logins.
    • Gerenciar permissões de forma granular: utilizando escopos, você pode solicitar apenas as permissões necessárias, aumentando a confiança dos usuários.

    Entender os conceitos de autenticação e autorização pode parecer um pouco abstrato no começo.

    Por isso, analisar um fluxo de OAuth 2.0 pode nos ajudar a entender como a coisa toda funciona na prática.

    Vamos analisar a imagem abaixo para ilustrar um exemplo concreto pensando no GitHub como nosso provedor de autenticação.

    Fluxo abstrato do protocolo OAuth 2.0 mostrando a interação entre a aplicação cliente, o usuário, o servidor de autorização e o servidor de recurso. A aplicação solicita autorização ao usuário, o usuário concede a autorização, a aplicação recebe um código de autorização, troca esse código por um token de acesso com o servidor de autorização, e finalmente usa o token de acesso para acessar recursos protegidos no servidor de recurso.

    Analisando o fluxo de OAuth 2.0

    Aqui está um passo a passo do fluxo de OAuth 2.0:

    Passo 1: Solicitação de autorização

    Tudo começa quando a aplicação (cliente) precisa acessar recursos protegidos em nome do usuário.

    Vamos supor que estamos desenvolvendo uma aplicação que quer acessar os repositórios privados do usuário no GitHub.

    Para isso, a aplicação redireciona o usuário para a página de autorização do GitHub, solicitando permissão para acessar os dados.

    Passo 2: Concessão de autorização

    O Usuário visualiza a solicitação de permissão e decide se quer conceder acesso ou não.

    Se o usuário concordar, o GitHub concede uma autorização, que normalmente é um código de autorização temporário.

    Passo 3: Concessão de autorização

    Esse código de autorização é enviado de volta para a aplicação. Este código é apenas um intermediário e não pode ser usado diretamente para acessar os recursos protegidos.

    Passo 4: Token de acesso

    A aplicação então envia o código de autorização recebido para o Servidor de Autorização do GitHub, solicitando um Token de Acesso.

    Se o código de autorização for válido, o servidor de autorização do GitHub retorna um token de acesso.

    Passo 5: Token de acesso

    Com o token de acesso em mãos, a aplicação agora pode fazer requisições autenticadas para o Servidor de Recurso do GitHub.

    Este token serve como uma chave que prova que a aplicação tem permissão para acessar os recursos do usuário.

    Passo 6: Recurso protegido

    Finalmente, a aplicação usa o token de acesso para solicitar os recursos protegidos do Servidor de Recurso (por exemplo, os repositórios privados do usuário).

    O servidor verifica o token e, se for válido, retorna os dados solicitados.

    OpenID Connect

    Logo do OpenID.

    Entender como o OpenID Connect (OIDC) funciona é crucial para desenvolver aplicações seguras e amigáveis para o usuário.

    O OIDC é uma extensão do OAuth 2.0 que adiciona uma camada de identidade, permitindo que as aplicações autentiquem usuários de maneira segura e padronizada.

    Isso é especialmente útil para implementar login único (SSO), onde um usuário pode usar uma única conta para acessar várias aplicações diferentes, melhorando a experiência do usuário e aumentando a segurança.

    Então, por que precisamos do OpenID Connect? No mundo moderno, a segurança e a privacidade são fundamentais.

    O OIDC facilita a verificação da identidade do usuário de uma maneira padronizada e segura.

    Ele resolve problemas comuns de autenticação, como a necessidade de os usuários lembrarem múltiplas senhas para diferentes aplicações.

    Além disso, garante que as aplicações não precisem lidar diretamente com credenciais sensíveis, minimizando o risco de vazamentos de dados.

    Vamos entender como o OpenID Connect funciona por debaixo dos panos, vem comigo.

    Imagine que sua aplicação quer autenticar um usuário. Primeiro, ela redireciona o usuário para o provedor de identidade, como o Google ou o Facebook.

    Esse redirecionamento inclui informações como o ID do cliente da aplicação, a URL de redirecionamento para onde o usuário deve ser enviado após a autenticação e os escopos solicitados, como openid, profile e email.

    Quando o usuário chega ao provedor de identidade, ele vê uma interface de login onde insere suas credenciais.

    Se as credenciais estiverem corretas, o provedor de identidade autentica o usuário. Após a autenticação bem-sucedida, o provedor redireciona o usuário de volta para a aplicação com um código de autorização.

    Este código é um intermediário temporário que a aplicação pode usar para obter tokens.

    A aplicação então usa este código de autorização para solicitar tokens ao provedor de identidade através de uma requisição segura.

    Em resposta, a aplicação recebe um token de acesso para autorização e um ID token para autenticação.

    O ID token é um JWT (JSON Web Token) que contém informações sobre o usuário, como seu identificador único, nome e email.

    Este token é assinado digitalmente pelo provedor de identidade para garantir sua integridade e autenticidade. A aplicação decodifica este token para obter as informações do usuário.

    Se necessário, a aplicação pode fazer uma requisição ao endpoint UserInfo do provedor de identidade para obter informações adicionais sobre o usuário, usando o token de acesso.

    Isso permite que a aplicação tenha todas as informações necessárias para personalizar a experiência do usuário sem comprometer a segurança.

    O OpenID Connect traz muitos benefícios para pessoas desenvolvedoras front-end. Ele melhora a segurança ao garantir que as credenciais do usuário sejam manipuladas pelo provedor de identidade, não pela aplicação.

    Isso reduz o risco de exposição de dados sensíveis. Além disso, simplifica a experiência do usuário, que pode usar uma única conta para acessar várias aplicações, eliminando a necessidade de lembrar várias senhas.

    Conclusão

    Chegamos ao fim deste mergulho nos protocolos de autenticação e autorização, focando especialmente no OAuth 2.0 e no OpenID Connect.

    Ao longo desta série, discutimos a evolução do OAuth, começando com as versões 1.0 e 1.0A, e culminando com o OAuth 2.0, que trouxe melhorias significativas em segurança e usabilidade.

    Também exploramos o OpenID Connect, que adiciona uma camada essencial de autenticação sobre o OAuth 2.0, permitindo que as aplicações verifiquem a identidade do usuário de forma segura e padronizada.

    O OAuth 2.0 é fundamental para autorizar o acesso a recursos protegidos sem expor as credenciais do usuário.

    Já o OpenID Connect é crucial para autenticar a identidade do usuário, proporcionando uma experiência de login única (SSO) que é segura e conveniente.

    Analisamos um fluxo típico de OAuth 2.0, entendendo como a aplicação interage com o provedor de identidade para obter tokens de acesso e ID tokens.

    Esses tokens são a chave para acessar recursos protegidos e obter informações do usuário, tudo de forma segura.

    Ao compararmos o login via credenciais tradicionais com o login via OAuth, a diferença principal está na segurança e na experiência do usuário.

    O login via credenciais exige que os usuários lembrem e gerencie múltiplas senhas, o que pode ser complicado e menos seguro, especialmente se a aplicação não implementar as melhores práticas de segurança, como o armazenamento seguro de senhas e a proteção contra ataques de força bruta.

    Por outro lado, o login via OAuth, especialmente quando combinado com OpenID Connect, oferece uma camada adicional de segurança e simplicidade.

    O usuário pode usar uma única conta para acessar várias aplicações, reduzindo a necessidade de gerenciar múltiplas senhas.

    No entanto, ao implementar OAuth, é crucial garantir que as comunicações entre a aplicação e o provedor de identidade sejam seguras.

    Isso inclui o uso de HTTPS, a validação correta dos tokens recebidos e a proteção contra ataques de redirecionamento e falsificação de requisições.

    Além disso, é importante estar ciente da gestão de tokens. Tokens de acesso devem ser armazenados com segurança e, idealmente, devem ter um tempo de vida limitado para reduzir o risco de uso indevido.

    O uso de refresh tokens pode ajudar a manter a sessão do usuário ativa sem exigir novos logins frequentes, mas também deve ser tratado com cuidado para evitar vazamentos.

    Banner do Guia Tático Alura sobre carreira em tecnologia, destacando o mapa da carreira tech. A imagem convida a explorar diferentes caminhos profissionais, comparar possibilidades e encontrar a próxima fase da carreira na área de tecnologia, com chamada “Explore o mapa”.

    Avalie este artigo

    • Foto de Vinicios Neves

      Autor(a)

      Vinicios Neves

      Vinicios Neves, Tech Lead e Educador, mistura código e didática há mais de uma década. Especialista em TypeScript, lidera equipes full-stack em Portugal e inspira futuros desenvolvedores na FIAP e Alura. Com um pé no código e outro no ensino, ele prova que a verdadeira engenharia de software vai além das linhas de código. Além de, claro, ser senior em falar que depende.

    Explore por tópico

    • Back-end
    • Dados
    • DevOps
    • Front-end
    • Gestão & Negócios
    • Institucionais
    • Inteligência Artificial
    • Mobile
    • UX & Design

    Leia também

    • 28/10/2021

      Tailwind: Qual framework usar? Bootstrap vs Tailwind

      Ler mais
    • 18/07/2022

      Como iniciar os estudos de Front-end: um passo a passo de como começar a estudar Front-end

      Ler mais
    • 23/09/2024

      Micro-frontends e suas arquiteturas: mais escalabilidade e independência

      Ler mais
    Ver mais conteúdos

    Inscreva-se em nossa Newsletter

    Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.

    Institucional

    • Sobre nós
    • Trabalhe Conosco
    • Para Empresas
    • Para Escolas
    • Política de Privacidade
    • Compromisso de Integridade
    • Termos de Uso
    • Canal de Ética
    • Código de Ética
    • Fale Conosco
    • Documentos Institucionais
    • Status
    Institucional
    • Sobre nós
    • Trabalhe Conosco
    • Para Empresas
    • Para Escolas
    • Política de Privacidade
    • Compromisso de Integridade
    • Termos de Uso
    • Canal de Ética
    • Código de Ética
    • Fale Conosco
    • Documentos Institucionais
    • Status

    A Alura

    • Como Funciona
    • Inteligência Artificial
    • Plataforma
    • Depoimentos
    • Instrutores(as)
    • Dev em <T>
    • Luri, a Inteligência Artificial da Alura
    • IA Conference
    • Cursos Imersivos
    • Perguntas Frequentes
    A Alura
    • Como Funciona
    • Inteligência Artificial
    • Plataforma
    • Depoimentos
    • Instrutores(as)
    • Dev em <T>
    • Luri, a Inteligência Artificial da Alura
    • IA Conference
    • Cursos Imersivos
    • Perguntas Frequentes

    Conteúdos

    • Alura Cases
    • Imersão Engenharia de Software: Dev na Era da IA
    • Artigos
    • Podcasts
    • Artigos de educação corporativa
    Conteúdos
    • Alura Cases
    • Imersão Engenharia de Software: Dev na Era da IA
    • Artigos
    • Podcasts
    • Artigos de educação corporativa
    Uma Empresa do GrupoLogo Grupo Alun

    Outras empresas do Grupo Alun

    • FIAP
    • STARTSE
    • PM3
    • LUMINA

    Ao submeter seu e-mail, você concorda com a política de privacidade da Alura.

    Redes Sociais & Apps

    instagram
    youtube
    tiktok
    x
    appStore
    googlePlay
    Uma Empresa do GrupoLogo Grupo Alun

    Outras empresas do Grupo Alun

    • FIAP
    • STARTSE
    • PM3
    • LUMINA

    Ao submeter seu e-mail, você concorda com a política de privacidade da Alura.

    Redes Sociais & Apps

    instagram
    youtube
    tiktok
    x
    appStore
    googlePlay
    Alura