Modo de interface imediato para logins

Eiji Kitamura
José Luis Zapata

Publicado em: 12 de maio de 2026

O modo de interface imediata para logins é um recurso da Web projetado para simplificar os fluxos de login. Com esse recurso, você pode oferecer proativamente chaves de acesso e senhas gerenciadas diretamente aos usuários quando eles chegam a um momento de login, como clicar em um botão Fazer login ou Finalizar compra.

Resumo

O modo de interface imediata fornece um modo que falha imediatamente se não houver credenciais disponíveis localmente. Esse comportamento reflete as APIs preferImmediatelyAvailableCredentials encontradas em plataformas móveis como Android e iOS. Quando as credenciais existem, o navegador apresenta uma caixa de diálogo de login imediato ao usuário. Caso contrário, ela rejeita a promessa silenciosamente, permitindo que você ofereça métodos de login alternativos, por exemplo, um formulário de login, sem prejudicar a experiência do usuário.

Em maio de 2026, o Chrome será o único navegador compatível com o modo de interface imediato.

Verificar os pré-requisitos

Para usar o modo de interface imediato, o usuário precisa ter credenciais qualificadas disponíveis localmente no dispositivo. No Chrome, essas credenciais incluem:

  • Chaves de acesso salvas em um provedor, como o Gerenciador de senhas do Google, o Windows Hello ou o conjunto de chaves do iCloud.
  • Senhas salvas no Gerenciador de senhas do Google.

Se não houver credenciais locais, a API vai rejeitar a solicitação sem mostrar a caixa de diálogo de login imediato.

Suporte ao recurso de detecção

Antes de chamar o modo de interface imediato, verifique se o navegador oferece suporte à capacidade immediateGet usando o método PublicKeyCredential.getClientCapabilities(). Se estiver indisponível, use os métodos de login atuais, como formulários de e-mail e senha, verificação de número de telefone ou logins sociais.

async function checkImmediateAvailability() {
  try {
    const capabilities = await PublicKeyCredential.getClientCapabilities();
    if (capabilities.immediateGet) {
      console.log("Immediate UI mode is supported.");
    } else {
      console.log("Immediate UI mode is NOT supported.");
    }
  } catch (error) {
    console.error("Error checking client capabilities:", error);
  }
}

Para uma compatibilidade mais ampla com navegadores, use o polyfill disponível no repositório do GitHub de polyfills do WebAuthn.

Solicitar credenciais

Para acionar o fluxo de login imediato, chame navigator.credentials.get() com o campo uiMode definido como 'immediate'.

Ao incluir password: true na sua solicitação, os usuários podem aproveitar essa experiência se o navegador for compatível com credenciais de senha.

// This call must follow a user gesture, like a button click
button.addEventListener('click', async (event) => {
  event.preventDefault();
  try {
    const cred = await navigator.credentials.get({
      password: true,
      publicKey: {
        challenge: serverGeneratedChallenge,
        rpId: 'example.com'
      },
      uiMode: 'immediate',
    });
    // Handle successful sign-in
  } catch (error) {
    if (error.name === 'NotAllowedError') {
      // Provide a fallback sign-in experience
      showFallbackUI();
    }
  }
});

Você precisa processar o NotAllowedError em um bloco catch para oferecer uma experiência de login alternativa.

Processar fluxos de login

É possível implementar o modo de interface imediato para dois cenários principais. Para mais orientações de UX e antipadrões a serem evitados, consulte Padrões de UX para o modo de interface imediata.

Fazer login com um botão

Ofereça um botão de login dedicado que proporcione uma experiência limpa sem solicitações inesperadas.

  1. O usuário clica em um botão Fazer login.
  2. Seu site chama navigator.credentials.get() com uiMode: "immediate".
  3. O navegador verifica as credenciais locais.
  4. Se o navegador encontrar credenciais, ele vai mostrar uma caixa de diálogo de login imediato para o usuário selecionar uma conta.
  5. Se o navegador não encontrar credenciais ou o usuário dispensar a caixa de diálogo de login imediato, ele vai gerar um NotAllowedError.
  6. Se uma NotAllowedError for gerada, seu site vai continuar com a página de login padrão.

Fazer login antes de finalizar a compra

Ofereça credenciais de forma proativa antes que um usuário realize uma ação que se beneficiaria da autenticação, como iniciar um processo de finalização da compra em uma vitrine on-line.

No e-commerce, os usuários convidados geralmente escolhem entre fazer login em uma conta existente ou finalizar a compra como convidado. Fornecer uma caixa de diálogo de login imediato pode simplificar o processo de finalização da compra para clientes recorrentes.

  1. O usuário inicia uma ação, como clicar em um botão Finalizar compra durante um fluxo de compras.
  2. Seu site chama navigator.credentials.get() com uiMode: "immediate".
  3. Se houver credenciais, o usuário seleciona uma para concluir o login.
  4. Se as credenciais não existirem, o navegador vai gerar um erro e não mostrará uma caixa de diálogo de login imediato. A experiência do usuário permanece inalterada, e você pode levar o usuário à tela de finalização da compra atual, que pode oferecer outras opções de login ou um formulário de finalização da compra como visitante.

Revise as medidas de privacidade e segurança

O navegador implementa medidas importantes para proteger a privacidade do usuário:

  • Requisito de gesto do usuário: você precisa iniciar a chamada de API com um gesto do usuário, como um clique, para evitar a sondagem silenciosa. A chamada não consome a ativação.
  • Restrições do modo de navegação anônima: solicitações em sessões anônimas ou privadas sempre geram um NotAllowedError.
  • Sem listas de permissão: solicitações com uma lista allowCredentials não vazia geram um NotAllowedError para evitar o rastreamento entre sessões.
  • Nenhuma cancelamento programático: não é possível usar o parâmetro signal para dispensar programaticamente a caixa de diálogo de login imediato.