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. Esse recurso permite 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 nenhuma credencial estiver disponível 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, ele rejeita a promessa silenciosamente, permitindo que você forneça métodos de login alternativos, por exemplo, um formulário de login, sem interromper a experiência do usuário.
Em maio de 2026, o Chrome é o único navegador que oferece suporte ao modo de interface imediata.
Verificar os pré-requisitos
Para usar o modo de interface imediata, o usuário já precisa ter credenciais qualificadas disponíveis localmente no dispositivo. No Chrome, essas credenciais incluem:
- Chaves de acesso salvas em um provedor de chaves de acesso, como o Gerenciador de senhas do Google, Windows Hello ou o Chaveiro do iCloud.
- Senhas salvas no Gerenciador de senhas do Google.
Se não houver credenciais locais, a API rejeitará a solicitação sem mostrar a caixa de diálogo de login imediato.
Detectar suporte a recursos
Antes de chamar o modo de interface imediata, verifique se o navegador oferece suporte ao recurso immediateGet usando o método PublicKeyCredential.getClientCapabilities(). Se estiver indisponível, volte aos 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 um suporte mais amplo do navegador, use o polyfill disponível no WebAuthn Polyfills repositório do GitHub.
Solicitar credenciais
Para acionar o fluxo de login imediato, chame navigator.credentials.get() com o
uiMode campo definido como 'immediate'.
Ao incluir password: true na solicitação, os usuários poderão aproveitar esta
experiência se o navegador oferecer suporte a 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 fornecer uma experiência de login alternativa.
Processar fluxos de login
É possível implementar o modo de interface imediata para dois cenários principais.
Fazer login com um botão
Forneça um botão de login dedicado que ofereça uma experiência limpa sem avisos inesperados.
- O usuário clica em um botão Fazer login.
- Seu site chama
navigator.credentials.get()comuiMode: "immediate". - O navegador verifica se há credenciais locais.
- Se o navegador encontrar credenciais, ele vai apresentar uma caixa de diálogo de login imediato para o usuário selecionar uma conta.
- 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. - Se um
NotAllowedErrorfor gerado, seu site vai continuar com a página de login padrão.
Fazer login antes de finalizar a compra
Ofereça credenciais proativamente antes que um usuário execute 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 selecionam entre fazer login em uma conta atual 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.
- O usuário inicia uma ação, como clicar em um botão Finalizar compra durante um fluxo de compras.
- Seu site chama
navigator.credentials.get()comuiMode: "immediate". - Se houver credenciais, o usuário vai selecionar uma para concluir o login.
- Se não houver credenciais, 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 fornecer outras opções de login ou um formulário de finalização da compra como convidado.
Analisar medidas de privacidade e segurança
O navegador implementa medidas importantes para proteger a privacidade do usuário:
- Requisito de gesto do usuário: é necessário iniciar a chamada de API com um gesto do usuário, como um clique, para evitar a detecção silenciosa. A chamada não consome a ativação.
- Restrições do modo de navegação anônima: as solicitações em sessões anônimas ou privadas
sempre geram um
NotAllowedError. - Sem listas de permissões: as solicitações com uma lista
allowCredentialsnão vazia geram umNotAllowedErrorpara evitar o rastreamento entre sessões. - Sem cancelamento programático: não é possível usar o
signalparâmetro para dispensar programaticamente a caixa de diálogo de login imediato.