Exemplo prático OAuth2 Authorization Code PKCE
Tags: oauth, programming
Published: 2024-04-25 00:29:09

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](https://oauth.net/2/)
[OAuth2 - Authorization Code](https://oauth.net/2/grant-types/authorization-code/)
[OAuth2 - PKCE](https://oauth.net/2/pkce/)
[Repositório auth-server-example] (https://github.com/devxbr/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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pcsopn9fjllr8ttonxet.png)

**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()

```

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)

```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ndbxvmw3acdqikwmyjs.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mtyizr7ie09trdx95tes.png)

Acesso autorizado


![Imagem com dashboard após consentimento do usuário em compartilhar informações](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4ih6d1j2ftzhl93khnm.png)

E para finalizar...

[Motivos para usar Authorization Code with PKCE no seu frontend](https://www.google.com/search?q=motivos+para+usar+oauth2+com+pkce&sca_esv=45843383d781bdbb&sca_upv=1&sxsrf=ACQVn099Fu2uE6bIdMOrw9a6fi-aQQC2UA%3A1713967790254&ei=rhIpZs2FD56b5OUP5fmUqAg&ved=0ahUKEwjNlK3Kg9uFAxWeDbkGHeU8BYUQ4dUDCBA&uact=5&oq=motivos+para+usar+oauth2+com+pkce&gs_lp=Egxnd3Mtd2l6LXNlcnAiIW1vdGl2b3MgcGFyYSB1c2FyIG9hdXRoMiBjb20gcGtjZTIIEAAYgAQYogQyCBAAGIAEGKIEMggQABiABBiiBDIIEAAYgAQYogRIxSBQ2A1Yth5wA3gBkAEAmAHqAaABlxmqAQYwLjE1LjO4AQPIAQD4AQGYAgagAoEFwgIKEAAYsAMY1gQYR5gDAIgGAZAGCJIHBTMuMi4xoAenOw&sclient=gws-wiz-serp)