DEV Community

Bruno Souza
Bruno Souza

Posted on

Exemplo prático OAuth2 Authorization Code PKCE

Olá Mentes Tech, recentemente conclui um novo curso de OAuth avançado, e resolvi colocar em prática os aprendizados, e hoje vou escrever sobre OAuth2 e o fluxo authorization code com PKCE Proof Key for Code Exchange ou "pixie" para os íntimos.
Vou implementar um servidor de autorização e um exemplo para ilustrarmos a leitura ;)

Referências:
OAuth 2
OAuth2 - Authorization Code
OAuth2 - PKCE
Repositório auth-server-example

O Protocolo de Concessão de Credenciais de Cliente (PKCE) é uma extensão do OAuth 2.0 projetada para melhorar a segurança em aplicativos que acessam recursos protegidos por um servidor de autorização.
Ao contrário do fluxo de Cliente Confidencial padrão, que confia na segurança do cliente para proteger seu segredo, o PKCE é especialmente útil em aplicativos móveis e de navegador, onde os segredos do cliente podem ser facilmente expostos.

Em resumo, o PKCE estende o OAuth 2.0, adicionando um desafio de verificador secreto (code_verifier) ao fluxo de autorização. Este desafio é criptograficamente vinculado a um código de autorização temporário (code) que é retornado pelo servidor de autorização. O cliente envia então o código de autorização e o verificador secreto (code_verifier) para obter o token de acesso.

O PKCE não substitui os fluxos de cliente confidencial do OAuth 2.0, mas é uma adição valiosa, especialmente em cenários onde a segurança do cliente não pode ser totalmente garantida.
Ele fornece uma camada adicional de segurança sem exigir que o cliente compartilhe um segredo.
Isso o torna ideal para aplicativos móveis, de navegador e outros ambientes onde a segurança do cliente não pode ser garantida

Fluxo Authorization Code with PKCE

Bora codar ?

O objetivo aqui é criar um exemplo prático do fluxo OAuth2 Authorization Code With PKCE.

Aos engenheiros frontend peço desculpas pelas penalidades que aqui serão cometidas.

Alguns conceitos serão representados, mas não seguem toda a recomendação proposta nas RFCS, este é um exemplo não produtivo.

Sugiro que baixe o repositório que está no início do texto.

Ferramentas escolhidas:

  • Git
  • Docker
  • Golang
  • JavaScript + TailwindCss
  • VsCode

Iniciando o fluxo no frontend

//calcula o code challenge usando o code verifier
async function generateCodeChallenge(codeVerifier) 

//Gera e armazena o código para ser usado em outras etapas do fluxo
function generateCodeVerifier()

//funções de apoio para encodar e adicionar segurança usando um state
function base64urlencode(str)
function generateState()

//função para ativar o start do fluxo
async function auth()

Enter fullscreen mode Exit fullscreen mode

Authorization Server

// endpoint que gera a url de authorização com PKCE
func GenerateAuthorizationURLWithPKCE(w http.ResponseWriter, r *http.Request) 

//calcula o code challenge usando o code verifier
func generateCodeChallenge(verifier string) string

//Gera um código de autorização que será trocado pelo token
func generateAuthorizationCode() string

//endpoint para retornar o token usando o authorization code
func TokenHandler(w http.ResponseWriter, r *http.Request)

//endpoint para logar usuário e solicitar consentimento
func LoginHandler(w http.ResponseWriter, r *http.Request)

Enter fullscreen mode Exit fullscreen mode

Note que o fluxo com PKCE foi iniciado com sucesso, existe um code_challenger que será validada pelo servidor de autorização.

Imagem contém uma url construída no backend com fluxo iniciado no frontend

Etapa de consentimento
Exemplo etapa consentimento exibe as permissões que o usuário deve dar o consentimento e nele contém dois botões para aceitar ou declinar

Acesso autorizado

Imagem com dashboard após consentimento do usuário em compartilhar informações

E para finalizar...

Motivos para usar Authorization Code with PKCE no seu frontend

Top comments (0)