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
Vinicios Neves
Vinicios Neves

Compartilhe

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 promocional da Alura, com um design futurista em tons de azul, apresentando o texto

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.

Vinicios Neves
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 Lisboa 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.

Veja outros artigos sobre Front-end