← Voltar para publicações

A Jornada OIDC: Como Transformamos a Autenticação da Cara Core em uma Aventura de Aprendizado

Era uma tarde comum de setembro quando recebemos um requisito aparentemente simples: "Precisamos implementar autenticação segura com Google e Microsoft no site da Cara Core". O que parecia ser uma tarefa de algumas horas se transformou em uma jornada épica de descobertas, frustrações e, principalmente, muito aprendizado.

Esta é a história real de como implementamos OpenID Connect (OIDC) do zero, os obstáculos que enfrentamos e as lições valiosas que aprendemos no caminho.

Capítulo 1: O Primeiro Contato com OIDC

// Nossa primeira tentativa (spoiler: não funcionou)
function login() {
    window.location.href = "https://accounts.google.com/oauth/authorize?...";
    // E agora? Como eu capturo a resposta?
}

A Realidade Bate à Porta

Depois de algumas horas tentando "fazer funcionar na unha", percebemos que precisávamos entender o que realmente estava acontecendo. Foi aí que descobrimos conceitos como:

• Authorization Code Flow com PKCE
• Tokens JWT e sua validação
• Scopes e claims
• Redirect URIs e suas peculiaridades

Cada termo era um novo universo a ser explorado.

Capítulo 2: A Escolha das Ferramentas

O Dilema da Biblioteca

Após pesquisar por horas, encontramos várias opções:

Nossa escolha: oidc-client-ts - uma biblioteca robusta que suportava ambos os provedores.

// O momento "eureka" - descobrindo o UserManager
import { UserManager } from 'oidc-client-ts';

const userManager = new UserManager({
    authority: 'https://accounts.google.com',
    client_id: 'nossa-client-id-super-secreta',
    redirect_uri: 'http://localhost:8000/callback',
    // ... mais configurações que não fazíamos ideia do que faziam
});

Capítulo 3: O Inferno dos Redirect URIs

O Erro que Nos Perseguiu

Se há um erro que todo desenvolvedor OIDC conhece, é este. E nós conhecemos muito bem - ele apareceu centenas de vezes durante nossa implementação.

A Guerra dos Ambientes

O problema era simples de entender, mas complexo de resolver:

• Desenvolvimento: http://localhost:8000
• Staging: https://nossa-url-temporaria.com
• Produção: https://chmulato.github.io/cara-core

Cada ambiente precisava de sua própria configuração no Google Cloud Console. Mas nós só descobrimos isso depois de muito sofrimento.

// Nossa solução "gambiarrada" inicial
const redirectUri = window.location.hostname === 'localhost' 
    ? 'http://localhost:8000/secure/index.html'
    : 'https://chmulato.github.io/cara-core/secure/index.html';

O Momento de Iluminação

Até que tivemos uma ideia: configuração dinâmica baseada no ambiente!

// A solução elegante que desenvolvemos
function generateGoogleConfig() {
    const baseUrl = window.location.origin;
    return {
        authority: "https://accounts.google.com",
        client_id: "nossa-client-id",
        redirect_uri: `${baseUrl}/secure/index.html`,
        // Funciona em qualquer ambiente!
    };
}

Capítulo 4: O Sistema de Logs que Salvou Nossas Vidas

O Debugging Nightmare

Quando algo dá errado em OIDC, descobrir o que aconteceu é como procurar uma agulha no palheiro... no escuro... com vendas nos olhos.

As ferramentas de desenvolvedor do navegador ajudavam, mas precisávamos de algo mais robusto para entender o fluxo completo:

1. Iniciação do login
2. Redirecionamento para o provedor
3. Callback com authorization code
4. Troca do code por tokens
5. Validação e armazenamento

A Solução: Sistema de Logs Personalizado

Desenvolvemos um sistema de logging específico para OIDC que se tornou nosso melhor amigo:

class OIDCLogger {
    constructor() {
        this.logs = [];
        this.sessionId = this.generateSessionId();
    }
    
    authEvent(event, data = {}) {
        this.addLog('INFO', `Auth Event: ${event}`, {
            event: event,
            provider: this.getCurrentProvider(),
            ...data
        });
    }
    
    authError(error, context = {}) {
        this.addLog('ERROR', 'Authentication Error', {
            error: error.message || error,
            stack: error.stack,
            provider: this.getCurrentProvider(),
            context: context
        });
    }
}

O Dashboard de Logs

Criamos até uma interface web para visualizar os logs em tempo real:

Isso nos permitiu debuggar problemas em produção que seriam impossíveis de rastrear de outra forma.

Capítulo 5: A Integração com Microsoft - Um Plot Twist

O Microsoft tem suas próprias peculiaridades:

• Tenant ID obrigatório
• Scopes diferentes
• Endpoints específicos
• Formato de claims diferente

A Abstração Salvadora

Para não duplicar código, criamos uma abstração que funcionasse com ambos os provedores:

class OIDCAuthManager {
    async switchProvider(newProvider) {
        if (this.currentProvider === newProvider) return;
        
        // Logout do provedor atual
        await this.logoutLocal();
        
        // Inicializar com novo provedor
        await this.initialize(newProvider);
        
        console.log(`Provedor alterado para: ${newProvider}`);
    }
}

Capítulo 6: Os Problemas de Produção

O Deploy que Quebrou Tudo

Nosso primeiro deploy para produção foi... traumático. Tudo funcionava perfeitamente em desenvolvimento, mas em produção:

A Solução: Compatibilidade Multi-Ambiente

Desenvolvemos um sistema que detecta automaticamente o ambiente e se adapta:

function detectEnvironment() {
    const hostname = window.location.hostname;
    
    // GitHub Pages
    if (hostname.includes('github.io')) {
        return {
            type: 'production',
            baseUrl: `${protocol}//${hostname}`,
            isGitHubPages: true
        };
    }
    
    // Localhost
    if (hostname === 'localhost') {
        return {
            type: 'development',
            baseUrl: `${protocol}//${hostname}${port}`,
            isLocalhost: true
        };
    }
    
    // Custom domain
    return {
        type: 'production',
        baseUrl: `${protocol}//${hostname}`,
        isCustomDomain: true
    };
}

Capítulo 7: As Lições Aprendidas

Capítulo 8: O Resultado Final

Uma Arquitetura Robusta

Após semanas de desenvolvimento e refinamento, conseguimos criar um sistema que:

O Código que Orgulha

// O resultado final - elegante e funcional
window.OIDCAuth = {
    async login(provider = 'google') {
        try {
            await this.switchProvider(provider);
            await this.userManager.signinRedirect();
        } catch (error) {
            window.logOIDC.authError(error, { context: 'login' });
            throw error;
        }
    },
    
    async handleCallback() {
        try {
            const user = await this.userManager.signinRedirectCallback();
            window.logOIDC.authEvent('user_authenticated', {
                provider: this.currentProvider,
                userId: user.profile?.sub
            });
            return user;
        } catch (error) {
            window.logOIDC.authError(error, { context: 'callback' });
            throw error;
        }
    }
};

Reflexões Finais: O Que Aprendemos Além do Código

1. A Importância da Documentação

Durante nossa jornada, percebemos como a documentação inadequada pode tornar uma implementação simples em um pesadelo. Por isso, documentamos extensivamente nossa solução.

2. Open Source é Poderoso

Utilizamos bibliotecas como oidc-client-ts que nos pouparam meses de desenvolvimento. Contribuir de volta para a comunidade é fundamental.

3. Segurança é um Processo, não um Produto

Implementar OIDC nos ensinou que segurança não é algo que você "adiciona" ao final - ela precisa ser pensada desde o início.

4. A Experiência do Usuário Final

Por trás de toda a complexidade técnica, existe um usuário que só quer fazer login e usar o sistema. Manter isso em mente foi crucial para nossas decisões de design.

Conclusão: A Jornada Continua

Implementar OIDC na Cara Core foi muito mais do que apenas "adicionar autenticação". Foi uma jornada de aprendizado que nos ensinou sobre protocolos de segurança modernos, arquitetura de sistemas distribuídos, debugging avançado, User Experience em sistemas seguros e desenvolvimento multi-ambiente.

Hoje, quando vemos aqueles dois botões simples - "Continuar com Google" e "Continuar com Microsoft" - sabemos que por trás deles existe uma arquitetura robusta, testada e monitorada que garante segurança e uma excelente experiência do usuário.

Hashtags

---

Contato

• E-mail: suporte@caracore.com.br
• Site: www.caracore.com.br
• LinkedIn: Cara Core Informática