Widget de Login

Este guia explica como integrar o Widget de Login em suas páginas web, permitindo que seus usuários façam login e acessem funcionalidades como consulta de saldo e informações do perfil.

Sumário

Visão Geral
Instalação
Configuração Básica
API do Widget
Exemplos de Uso
Personalização
Solução de Problemas
Integrando o Widget de Login com o Widget de Busca

Visão Geral

O Widget de Login é uma solução que permite integrar facilmente funcionalidades de autenticação em suas páginas web. Após a inicialização, o widget expõe um objeto global NIARA que fornece métodos para login, verificação de status de autenticação, obtenção de saldo e mais.

Instalação

Para integrar o widget em sua página, você precisa adicionar um elemento HTML para servir como container e um script para carregar e inicializar o widget.

Snippet de Código para Integração

Copie e cole o código abaixo onde você deseja que o widget seja carregado:

<!-- Container para o widget -->
<div id="otabuilder-login-widget">Carregando...</div>

<!-- Script de inicialização do widget -->
<script>
  function loadJS(url, location) {
    var scriptTag = document.createElement('script')
    scriptTag.src = url
    scriptTag.crossOrigin = 'anonymous'
    scriptTag.defer = true
    scriptTag.async = true
    location.appendChild(scriptTag)
    return scriptTag
  }

  function initOtabuilderLoginWidget(storefrontId, elementId) {
    var _k = '_OTABUILDER_EMBEDDED_LOGIN_INIT_'
    var loaded = false

    // Configuração dos parâmetros do widget
    window['_OTABUILDER_EMBEDDED_LOGIN_PARAMS_'] = [
      document.getElementById(elementId),
      {
        storefrontId: storefrontId,
        onLoginSuccess: function (response) {
          console.log('Login realizado com sucesso:', response)
          // Seu código para tratar o login bem-sucedido
        },
        onLoginError: function (error) {
          console.error('Erro no login:', error)
          // Seu código para tratar erros de login
        },
      },
    ]

    var _i = function (initLoginWidget) {
      if (!loaded) {
        loaded = true
        initLoginWidget(...window['_OTABUILDER_EMBEDDED_LOGIN_PARAMS_'])
      }
    }

    if (window[_k]) {
      _i(window[_k])
    } else {
      const listener = function (e) {
        if (e.detail && e.detail.initLoginWidget) {
          _i(e.detail.initLoginWidget)
        }
      }
      document.addEventListener('otabuilder-login-ready', listener)
    }
  }

  // Inicializar o widget
  initOtabuilderLoginWidget(
    'SEU_STOREFRONT_ID' /**** Substitua pelo seu storefrontId ****/,
    'otabuilder-login-widget' // ID do elemento container
  )

  // Carregar o script do widget
  loadJS(
    'https://app.otabuilder.com/static/js/widgetLogin.js', // URL do widget
    document.body
  )
</script>

Configuração Básica

Parâmetros Obrigatórios

storefrontId: ID da sua loja no sistema OTA Builder / Motor Niara
elementId: ID do elemento HTML que servirá como container para o widget

Após a inicialização bem-sucedida, o widget expõe o objeto global window.NIARA com os seguintes métodos:

Método	Descrição	Parâmetros	Retorno
`login(username, password)`	Realiza o login do usuário	`username`: nome de usuário `password`: senha	Promise que resolve para um objeto com dados do usuário, token e saldo
`getUser()`	Obtém dados do usuário logado	-	Objeto com dados do usuário ou `null` se não estiver logado
`getToken()`	Obtém o token de autenticação	-	String com o token ou `null` se não estiver logado
`isLoggedIn()`	Verifica se o usuário está logado	-	Boolean (`true` se logado, `false` caso contrário)
`getBalance()`	Obtém o saldo do usuário	-	Promise que resolve para um objeto com dados do saldo
`logout()`	Realiza o logout do usuário	-	Promise que resolve para `true` quando o logout é bem-sucedido

Exemplos de Uso

<form id="loginForm">
  <input type="text" id="username" placeholder="Usuário" required />
  <input type="password" id="password" placeholder="Senha" required />
  <button type="submit">Entrar</button>
</form>

<div id="resultArea"></div>

<script>
  document.getElementById('loginForm').addEventListener('submit', async function (event) {
    event.preventDefault()

    if (!window.NIARA || !window.NIARA.login) {
      alert('Widget de login ainda não foi inicializado')
      return
    }

    const username = document.getElementById('username').value
    const password = document.getElementById('password').value
    const resultArea = document.getElementById('resultArea')

    try {
      resultArea.textContent = 'Realizando login...'

      const response = await window.NIARA.login(username, password)
      resultArea.textContent = 'Login realizado com sucesso!'

      // Opcional: redirecionar para outra página após login
      // window.location.href = '/pagina-restrita';
    } catch (error) {
      resultArea.textContent = 'Erro no login: ' + error.message
    }
  })
</script>

Exemplo 2 - Verificar Status de Login e Exibir Saldo

<form id="loginForm">
  <input type="text" id="username" placeholder="Usuário" required />
  <input type="password" id="password" placeholder="Senha" required />
  <button type="submit">Entrar</button>
</form>

<div id="resultArea"></div>
<div id="userInfo"></div>
<button id="checkBalanceBtn" style="display: none">Recarregar Saldo</button>
<div id="balanceInfo"></div>

<script>
  document.getElementById('loginForm').addEventListener('submit', async function (event) {
    event.preventDefault()
    if (!window.NIARA || !window.NIARA.login) {
      alert('Widget de login ainda não foi inicializado')
      return
    }

    const username = document.getElementById('username').value
    const password = document.getElementById('password').value
    const resultArea = document.getElementById('resultArea')
    const balanceInfoElement = document.getElementById('balanceInfo')

    document.getElementById('loginForm').reset()

    try {
      resultArea.textContent = 'Realizando login...'
      const response = await window.NIARA.login(username, password)
      resultArea.textContent = 'Login realizado com sucesso!'
      balanceInfoElement.innerHTML = `Saldo: ${response.balance.userBalance} ${response.balance.unitText}<br>Nível: ${
        response.balance.tier || 'N/A'
      }`
      checkLoginStatus()
    } catch (error) {
      resultArea.textContent = 'Erro no login: ' + error.message
    }
  })

  function checkLoginStatus() {
    const resultArea = document.getElementById('resultArea')
    const userInfoElement = document.getElementById('userInfo')
    const checkBalanceBtn = document.getElementById('checkBalanceBtn')

    if (!window.NIARA) {
      userInfoElement.innerHTML = 'Widget de login não inicializado'
      return
    }

    if (window.NIARA.isLoggedIn()) {
      const user = window.NIARA.getUser()
      userInfoElement.innerHTML = `Usuário: ${user.name || user.email} <button id="logoutBtn">Sair</button>`
      checkBalanceBtn.style.display = 'block'
      document.getElementById('logoutBtn').addEventListener('click', async () => {
        await window.NIARA.logout()
        checkLoginStatus()
      })
    } else {
      resultArea.textContent = 'Logout realizado com sucesso'
      userInfoElement.innerHTML = 'Usuário não está logado'
      checkBalanceBtn.style.display = 'none'
      document.getElementById('balanceInfo').textContent = ''
    }
  }

  document.getElementById('checkBalanceBtn').addEventListener('click', async () => {
    const balanceInfoElement = document.getElementById('balanceInfo')
    try {
      balanceInfoElement.textContent = 'Carregando saldo...'
      const balance = await window.NIARA.getBalance()
      balanceInfoElement.textContent = JSON.stringify(balance)
    } catch (error) {
      balanceInfoElement.textContent = 'Erro ao carregar saldo: ' + error.message
    }
  })
</script>

Personalização

O widget de login não possui interface visual própria, apenas expõe a API para autenticação. Isso permite que você crie sua própria interface de usuário personalizada.

Eventos Disponíveis

Evento	Descrição
`otabuilder-login-ready`	Disparado quando o widget está pronto para ser inicializado
`otabuilder-login-initialized`	Disparado quando o widget foi inicializado com sucesso
`otabuilder-login-unload`	Disparado quando o widget é desmontado

Callbacks de Inicialização

Você pode personalizar o comportamento do widget fornecendo callbacks durante a inicialização:

window['_OTABUILDER_EMBEDDED_LOGIN_PARAMS_'] = [
  document.getElementById('otabuilder-login-widget'),
  {
    storefrontId: 'SEU_STOREFRONT_ID',
    onLoginSuccess: function (response) {
      // Seu código para tratar o login bem-sucedido
    },
    onLoginError: function (error) {
      // Seu código para tratar erros de login
    },
  },
]

Solução de Problemas

Verifique se o storefrontId está correto
Confirme se a URL do script está correta para o ambiente que você está usando
Verifique o console do navegador para erros específicos
Certifique-se de que o elemento com o ID especificado existe no DOM

Erro de CORS

Se você estiver enfrentando erros de CORS, verifique:

Se está usando HTTPS em ambos os domínios (seu site e o widget)
Se o atributo crossOrigin="anonymous" está presente na tag script

Verificar o status de inicialização

Você pode verificar se o widget foi inicializado corretamente usando o seguinte código:

function checkNiaraStatus() {
  if (window.NIARA) {
    console.log('NIARA disponível com métodos:', Object.keys(window.NIARA).join(', '))
    return true
  } else {
    console.log('NIARA não disponível')

    // Verificar variáveis de inicialização
    const initVars = [
      '_OTABUILDER_EMBEDDED_LOGIN_INIT_',
      '_OTABUILDER_EMBEDDED_LOGIN_PARAMS_',
      '_OTABUILDER_EMBEDDED_LOGIN_FORM_',
    ]

    initVars.forEach((v) => {
      console.log(`${v}: ${window[v] ? 'Presente' : 'Ausente'}`)
    })

    return false
  }
}

É possível utilizar o Widget de Login em conjunto com o Widget de Busca para criar uma experiência completa para seus usuários. Quando integrados, o usuário pode fazer login e, em seguida, realizar buscas que já estarão autenticadas.

Benefícios da Integração

Experiência de usuário contínua
Acesso a preços e disponibilidade específicos para usuários logados
Possibilidade de acumular pontos em buscas e reservas
Acesso a promoções exclusivas para usuários logados

Exemplo de Código de Integração

Para integrar ambos os widgets na mesma página, siga o exemplo abaixo:

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Niara - Login e Busca</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
      }
      .container {
        margin-bottom: 30px;
      }
      .widget-container {
        border: 1px solid #ddd;
        padding: 20px;
        border-radius: 5px;
        margin-bottom: 20px;
      }
      h2 {
        color: #333;
      }
      .user-info {
        background-color: #f5f5f5;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Niara - Exemplo de Integração - Login e Busca</h1>

    <!-- Container para informações do usuário -->
    <div class="user-info" id="userInfo">
      <p>Verificando status de login...</p>
    </div>

    <!-- Container para o widget de login -->
    <div class="container">
      <h2>Login</h2>
      <div id="otabuilder-login-widget">Carregando widget de login...</div>

      <!-- Formulário de login personalizado -->
      <form id="loginForm">
        <input type="text" id="username" placeholder="Usuário" required />
        <input type="password" id="password" placeholder="Senha" required />
        <button type="submit">Entrar</button>
      </form>
    </div>

    <!-- Container para o widget de busca -->
    <div class="container">
      <h2>Busca de Hotéis</h2>
      <div class="widget-container">
        <div id="otabuilder-widget">Carregando widget de busca...</div>
      </div>
    </div>

    <!-- Scripts de inicialização -->
    <script>
      // Função auxiliar para carregar scripts
      function loadJS(url, location) {
        var scriptTag = document.createElement('script')
        scriptTag.src = url
        scriptTag.crossOrigin = 'anonymous'
        scriptTag.defer = true
        scriptTag.async = true
        location.appendChild(scriptTag)
        return scriptTag
      }

      // Inicialização do widget de login
      function initOtabuilderLoginWidget(storefrontId, elementId) {
        var _k = '_OTABUILDER_EMBEDDED_LOGIN_INIT_'
        var loaded = false

        window['_OTABUILDER_EMBEDDED_LOGIN_PARAMS_'] = [
          document.getElementById(elementId),
          {
            storefrontId: storefrontId,
            onLoginSuccess: function (response) {
              console.log('Login realizado com sucesso:', response)
              updateUserInfo()
              // Após login bem-sucedido, podemos atualizar o widget de busca
              // para refletir o estado de autenticação
            },
            onLoginError: function (error) {
              console.error('Erro no login:', error)
            },
          },
        ]

        var _i = function (initLoginWidget) {
          if (!loaded) {
            loaded = true
            initLoginWidget(...window['_OTABUILDER_EMBEDDED_LOGIN_PARAMS_'])
          }
        }

        if (window[_k]) {
          _i(window[_k])
        } else {
          const listener = function (e) {
            if (e.detail && e.detail.initLoginWidget) {
              _i(e.detail.initLoginWidget)
            }
          }
          document.addEventListener('otabuilder-login-ready', listener)
        }
      }

      // Inicialização do widget de busca
      function initOtabuilderWidget(storefrontId, elementId, orientation) {
        var _k = '_OTABUILDER_EMBEDDED_SEARCH_INIT_'
        var loaded = false
        var _i = function (initSearchForm) {
          if (!loaded) {
            loaded = true
            initSearchForm(document.getElementById(elementId), {
              storefrontId: storefrontId,
              orientation: orientation,
            })
          }
        }
        if (window[_k]) {
          _i(window[_k])
        } else {
          const listener = function (e) {
            _i(e.detail.initSearchForm)
          }
          document.addEventListener('otabuilder-search-ready', listener)
        }
      }

      // Função para atualizar informações do usuário na interface
      function updateUserInfo() {
        const userInfoElement = document.getElementById('userInfo')

        if (!window.NIARA) {
          userInfoElement.innerHTML = '<p>Widget de login não inicializado</p>'
          return
        }

        if (window.NIARA.isLoggedIn()) {
          const user = window.NIARA.getUser()
          userInfoElement.innerHTML = `
          <p>Usuário logado: <strong>${user.name || user.email}</strong></p>
          <button id="logoutBtn">Sair</button>
        `

          // Adicionar evento de logout
          document.getElementById('logoutBtn').addEventListener('click', async () => {
            await window.NIARA.logout()
            alert('Logout realizado com sucesso')
            updateUserInfo()
          })
        } else {
          userInfoElement.innerHTML = '<p>Usuário não está logado</p>'
        }
      }

      // Manipulador do formulário de login
      document.getElementById('loginForm').addEventListener('submit', async function (event) {
        event.preventDefault()

        if (!window.NIARA || !window.NIARA.login) {
          alert('Widget de login ainda não foi inicializado')
          return
        }

        const username = document.getElementById('username').value
        const password = document.getElementById('password').value

        try {
          const response = await window.NIARA.login(username, password)
          alert('Login realizado com sucesso!')
          updateUserInfo()
        } catch (error) {
          alert('Erro no login: ' + error.message)
        }
      })

      // Verificar status quando o widget estiver pronto
      document.addEventListener('otabuilder-login-initialized', function () {
        updateUserInfo()
      })

      // Inicializar os widgets
      const STOREFRONT_ID = 'SEU_STOREFRONT_ID' /**** Substitua pelo seu storefrontId ****/

      // Inicializar widget de login
      initOtabuilderLoginWidget(STOREFRONT_ID, 'otabuilder-login-widget')
      loadJS('https://app.otabuilder.com/static/js/widgetLogin.js', document.body)

      // Inicializar widget de busca
      initOtabuilderWidget(STOREFRONT_ID, 'otabuilder-widget', 'HORIZONTAL')
      loadJS('https://app.otabuilder.com/static/js/widget.js', document.body)

      // Verificar periodicamente se o NIARA já está disponível
      const checkInterval = setInterval(function () {
        if (window.NIARA) {
          clearInterval(checkInterval)
          updateUserInfo()
        }
      }, 1000)
    </script>
  </body>
</html>

Como Funciona a Integração

Autenticação Automática: Quando o usuário faz login através do Widget de Login, o token de autenticação é armazenado e utilizado automaticamente pelo Widget de Busca.
Redirecionamento com Autenticação: Quando o usuário clica em um resultado de busca, ele é redirecionado para a página do hotel já autenticado, sem necessidade de fazer login novamente.
Compartilhamento de Estado: Ambos os widgets compartilham o mesmo estado de autenticação através do objeto global window.NIARA.

Considerações Importantes

Certifique-se de usar o mesmo storefrontId para ambos os widgets.
Carregue primeiro o Widget de Login e depois o Widget de Busca para garantir que a autenticação esteja disponível.
O Widget de Busca pode ser configurado com orientação HORIZONTAL ou VERTICAL dependendo do layout desejado.

Widget de Login

Sumário​

Visão Geral​

Instalação​

Snippet de Código para Integração​

Configuração Básica​

Parâmetros Obrigatórios​

API do Widget​

Exemplos de Uso​

Exemplo 1: Formulário de Login Básico​

Exemplo 2: Verificar Status de Login e Exibir Saldo​

Personalização​

Eventos Disponíveis​

Callbacks de Inicialização​

Solução de Problemas​

O widget não inicializa​

Erro de CORS​

Verificar o status de inicialização​

Integrando o Widget de Login com o Widget de Busca​

Benefícios da Integração​

Exemplo de Código de Integração​

Como Funciona a Integração​

Considerações Importantes​