Pré-requisitos
Configuração do serviço
O authService.ts é o arquivo central de autenticação do front-end. Ele configura a biblioteca oidc-client-ts para se comunicar com o Kodigos Identity e expõe funções que o resto da aplicação usa: login, logout, renovar token, buscar dados do usuário.
Instalação
É preciso instalar a biblioteca que utiliza o protocolo OpenID Connect no navegador, permitindo redirecionar para o Identity Server, processar o callback e armazenar o token.npm install oidc-client-ts
Configurar as variáveis de ambiente
Antes de criar o authService.ts, as variáveis de ambiente precisam estar definidas no arquivo .env na raiz do projeto. Cada variável corresponde a uma configuração da aplicação no painel do Kodigos IDVITE_AUTH_AUTHORITY=https://seu-kodigos-id.com/identity
VITE_AUTH_CLIENT_ID=seu-client-id
VITE_AUTH_CLIENT_SECRET=seu-client-secret
VITE_AUTH_REDIRECT_URI=http://localhost:5173/auth
VITE_AUTH_POST_LOGOUT_REDIRECT_URI=http://localhost:5173/login
A VITE_AUTH_REDIRECT_URI deve estar cadastrada exatamente igual no painel do Kodigos ID como redirect permitida. Se houver qualquer diferença (incluindo barra final ou protocolo), o login falha com erro de redirect mismatch.
Criar o arquivo authService.ts
Com as variáveis configuradas, crie o arquivo em src/auth/authService.ts. O UserManager é a classe principal da oidc-client-ts. A partir dela é poss’ível gerenciar todo o fluxo OAuth2 internamente, desde o redirect até o armazenamento do token.import { UserManager } from 'oidc-client-ts';
const oidcConfig = {
// URL a qual o usuário será redirecionado ao fazer login.
authority: import.meta.env.VITE_AUTH_AUTHORITY,
// Identificador da aplicação cadastrada no Kodigos ID.
client_id: import.meta.env.VITE_AUTH_CLIENT_ID,
// URL para onde o Kodigos ID redireciona após o login.
// Deve apontar para a rota /auth que processa o callback.
redirect_uri: import.meta.env.VITE_AUTH_REDIRECT_URI,
// Tipo de resposta do fluxo OAuth2
response_type: 'code',
// Escopos solicitados ao Kodigos ID:
// 'profile' → dados do usuário (nome)
// 'roles' → papéis do usuário
// 'email' → email do usuário
scope: 'profile roles email',
// URL de redirect após o logout.
post_logout_redirect_uri: import.meta.env.VITE_AUTH_POST_LOGOUT_REDIRECT_URI,
// Busca dados adicionais do usuário no endpoint /userinfo.
loadUserInfo: true,
// Segredo da aplicação.
client_secret: import.meta.env.VITE_AUTH_CLIENT_SECRET,
// Renova o token automaticamente antes de expirar,sem o usuário perceber.
automaticSilentRenew: true,
// URL da rota que processa a renovação silenciosa
silent_redirect_uri: window.location.origin + '/silent-renew'
};
export const userManager = new UserManager(oidcConfig);
// Redireciona o navegador para a tela de login
// Salva a rota atual no parametro state. para, após o login, voltar exatamente para onde estava
export async function login() {
await userManager.signinRedirect({state: window.location.pathname + window.location.search });
}
// Encerra a sessão tanto na aplicação quanto no Kodigos ID
// Redireciona para post_logout_redirect_uri
export async function logout() {
await userManager.signoutRedirect();
}
// Renova o token automaticamente sem que o usuário perceba
export async function renewToken() {
const user = await userManager.signinSilent();
return user;
}
// Processa o callback após o redirect de volta e armazena a sessão
export async function completeLogin() {
const user = await userManager.signinRedirectCallback();
return user;
}
// Retorna o usuário logado com todas as suas informações
// Retorna null se não houver sessão ativa
export async function getUser() {
return await userManager.getUser();
}
Consultar dados do usuário
Após o login, a função getUser() retorna um objeto com todas as informações do usuário autenticado. As claims de permissão ficam dentro do profile
const user = await getUser();
if (user) {
user.access_token // "eyJhbGciOi..." — JWT para enviar à API
user.expired // false se o token ainda é válido
user.expires_at // Timestamp de expiração
user.profile.email // "joao@empresa.com"
user.profile.name // "João Silva"
user.profile.sub // "user-id-123"
// Claims de permissão:
user.profile["Clientes"] // ["clientes:view", "clientes:edit"]
user.profile["Projetos"] // ["projetos:view", "projetos:edit", "projetos:delete"]
}
Componentes auxiliares
Além do authService.ts, é necessário implementar componentes auxiliares que processam os redirects do Identity.
Callback
O Callback.vue é um componente renderizado quando o Kodigos ID redireciona de volta após o login. Ele chama completeLogin() para trocar o código de autorização por um token de acesso, e depois redireciona o usuário para a rota que ele estava antes do login.
<template>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import { completeLogin } from '../auth/authService';
import { useRouter } from 'vue-router';
const router = useRouter();
onMounted(async () => {
try {
const user = await completeLogin();
const targetPath = user?.state || (import.meta.env.BASE_URL ?? '/');
setTimeout(() => {
router.replace(targetPath);
}, 600);
} catch (error) {
console.error("Erro no callback de autenticação:", error);
router.push('/login');
}
});
</script>
Silent Renew
O SilentRenew.vue é carregado dentro de um iframe oculto quando o token está prestes a expirar. Ele processa a resposta da renovação silenciosa.
<template>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import { userManager } from '../auth/authService';
onMounted(async () => {
try {
await userManager.signinSilentCallback();
} catch (error) {
console.error("Erro no Silent Renew via Vue:", error);
}
});
</script>
Ambos os componentes precisam ter suas rotas registradas no router.ts como rotas públicas (sem guard de autenticação).
