Widgets

Você pode conectar os usuários do seu sistema com a habilitar.me através do widget de login.

Com um fluxo de login customizado e seguro, o seu usuário poderá compartilhar as informações da CNH dele com você.

Gerenciamento

Gerencie os widgets da sua organização através do Console da habilitar.me.

Após a criação, é disponibilizado um link de acesso que permite você incluir no seu código, ou compartilhar com seus usuários.

Veja abaixo as customizações disponíveis para o widget de login.

Customizações

Name
Nome da Organização
Description
Nome da organização que será exibido no widget.
Name
Cor Principal
Description
Cor de botões de links do widget.
Name
Logo
Description
Logo da organização que será exibida no widget.

Quando o widget é incorporado como iframe na sua aplicação, ele emite eventos para a janela pai utilizando window.postMessage. Isso permite que a sua aplicação reaja a ações do usuário dentro do widget, como login concluído ou certificado registrado.

Recebendo eventos

Para receber os eventos, adicione um listener de message na janela pai. Todos os eventos possuem o prefixo hme: no campo type.

Listener de eventos

window.addEventListener('message', (event) => {
  if (!event.data?.type?.startsWith('hme:')) return

  switch (event.data.type) {
    case 'hme:login:success':
      console.log('Login concluído', event.data.redirectUrl)
      break
    case 'hme:auth:success':
      console.log('Autenticação concluída', event.data.redirectUrl)
      break
    case 'hme:subscription:success':
      console.log('Assinatura concluída', event.data.redirectUrl)
      break
    case 'hme:certificate:success':
      console.log('Certificado registrado', event.data.company)
      break
    case 'hme:certificate:error':
      console.log('Erro no certificado', event.data.message)
      break
  }
})

Tipos de eventos

Name
hme:login:success
Description
O usuário completou o fluxo de login com sucesso. Inclui redirectUrl com a URL de redirecionamento configurada no widget.
Name
hme:login:error
Description
Ocorreu um erro durante o fluxo de login.
Name
hme:auth:success
Description
O usuário foi autenticado com sucesso (via token, API externa ou fingerprint). Inclui redirectUrl com a URL de destino.
Name
hme:subscription:success
Description
A assinatura do usuário foi concluída com sucesso. Inclui redirectUrl com a URL de redirecionamento.
Name
hme:certificate:success
Description
O certificado digital foi registrado com sucesso. Inclui company e certificate com os dados do certificado.
Name
hme:certificate:error
Description
Ocorreu um erro na validação do certificado digital. Inclui message com a descrição do erro.

Payload dos eventos

Todos os eventos incluem o campo type. Os campos adicionais variam conforme o tipo do evento.

Name
type
Type
string
Description
Tipo do evento com prefixo hme:.
Name
redirectUrl
Type
string
Description
URL de redirecionamento configurada no widget. Presente nos eventos de login:success, auth:success e subscription:success.
Name
company
Type
object
Description
Dados da empresa associada ao certificado. Presente em certificate:success.
Name
certificate
Type
object
Description
Dados do certificado digital. Presente em certificate:success.
Name
message
Type
string
Description
Mensagem de erro. Presente em certificate:error.

Exemplo: login:success

{
  "type": "hme:login:success",
  "redirectUrl": "https://app.exemplo.com/dashboard"
}

Exemplo: certificate:success

{
  "type": "hme:certificate:success",
  "company": {
    "id": 1,
    "name": "Empresa Exemplo Ltda",
    "tax_id": "12345678000190"
  },
  "certificate": {
    "status": "active",
    "issue_date": "2025-01-01",
    "expiration_date": "2026-01-01"
  }
}

Quando o widget não está incorporado em um iframe (acesso direto), o redirecionamento é feito normalmente via navegação do navegador para a URL configurada.