Autopreenchimento de OTP por SMS: Android, iOS e Web

Your Example code is 123456.

@example.com #123456

Como funciona o autopreenchimento de OTP na web?

Adicione primeiro o atributo e depois o JavaScript para os navegadores que o suportam.

<input type="text" inputmode="numeric"
       autocomplete="one-time-code" name="otp" />

A documentação do Chrome recomenda o atributo para compatibilidade entre navegadores e diz que o Safari o usa para sugerir o código de um SMS formatado corretamente, embora não tenha a API JavaScript WebOTP.

No Chrome para Android, chame o WebOTP com o transporte sms. A API exige uma origem segura (HTTPS), e um AbortController permite cancelar a solicitação pendente se o usuário digitar o código manualmente.

if ("OTPCredential" in window) {
  const ac = new AbortController();
  const form = document.querySelector("form");
  const input = document.querySelector("input[autocomplete=one-time-code]");

  form.addEventListener("submit", () => ac.abort());

  navigator.credentials
    .get({ otp: { transport: ["sms"] }, signal: ac.signal })
    .then((otp) => {
      input.value = otp.code;
      form.submit();
    })
    .catch(() => {}); // user dismissed, or no matching SMS
}

O SMS deve seguir o formato vinculado à origem da especificação WICG e do guia do Chrome: um código de quatro a dez caracteres alfanuméricos com pelo menos um número antes da última linha e, depois, uma última linha que começa com @, o host, um único espaço e # mais o código. O host não pode conter espaços em branco.

Um único SMS funciona no Android, no iOS e na web?

Muitas vezes sim, porque as regras são compatíveis. Coloque o texto legível primeiro, o hash do Android em uma linha acima do final e a linha vinculada ao domínio por último. Esse layout foi montado a partir das regras documentadas, não é uma garantia dos fornecedores, então teste.

Your Example code is 483921. Do not share it.
Ab3dE+9xYz1
@example.com #483921

Por que essa ordem: a Apple e a especificação web querem o domínio e o código na última linha. O Google exige o hash de 11 caracteres em algum ponto da mensagem, mas, na página que verificamos, não fixa a posição. O exemplo acima tem 78 bytes em caracteres latinos simples, bem dentro do limite de 140 bytes.

Checklist antes de publicar:

1. O código é um único token, bem separado dos demais números do texto.
2. O domínio da última linha corresponde ao site e ao domínio associado do app.
3. O tamanho total fica dentro de 140 bytes na variante com Retriever.
4. O hash corresponde à chave de assinatura da build em teste.
5. Teste feito em um aparelho de cada plataforma, nas operadoras pelas quais você realmente envia.

E com texto em árabe e Unicode?

Mantenha o código e as duas partes legíveis por máquina em texto simples. O limite do Google é em bytes, e um SMS Unicode comporta bem menos caracteres que um GSM-7: 70 contra 160 em um único segmento (veja limites de caracteres do SMS e Unicode). Uma frase em árabe consome o orçamento rapidamente, e um único caractere fora do GSM converte a mensagem inteira para Unicode.

Abordagem segura: mantenha o código em dígitos latinos, @domínio #código em ASCII e o texto em árabe curto. Não encontramos documentação oficial sobre o autopreenchimento de códigos escritos em outros sistemas de dígitos, por isso deixamos esse ponto de fora e recomendamos testar antes de usar.

Como os templates de autenticação do WhatsApp tratam o autopreenchimento?

Os templates de autenticação da Meta vêm com três estilos de botão, cada um com um texto de corpo fixo no formato <code> is your verification code.

A documentação da Meta também observa que, no iOS 26 e posteriores, as sugestões do teclado oferecem o autopreenchimento sem integração, e que usuários de plataformas sem zero toque recebem um botão de copiar código. Você pode definir uma expiração com code_expiration_minutes, e a API de prévia aceita valores de 1 a 90 minutos. Compare os canais em OTP por WhatsApp vs OTP por SMS.

Exemplo prático: login em um app de transporte por aplicativo

A "Qafila Rides" (fictícia) tem um app Android, um app iOS e um site móvel em qafila.example.

1. O app Android inicia o SMS Retriever quando o usuário toca em "Enviar código".
2. O backend gera um código de seis dígitos, válido por alguns minutos, e envia a mensagem de três linhas acima pela API de SMS.
3. O Android entrega a mensagem ao app. O iOS oferece o código acima do teclado. No site móvel, o Safari o sugere e o Chrome o preenche via WebOTP.
4. O servidor valida o código uma única vez, rejeita reutilização e códigos expirados, e limita a taxa de solicitações.
5. Se o SMS não for confirmado em um curto intervalo, o backend oferece um template de autenticação do WhatsApp como segundo caminho.

Quais são os erros mais comuns?

• Código misturado com outros números. Números extras (telefone, preço, data) ao lado do código confundem a detecção. Use um código por mensagem.
• Hash errado. O hash acompanha o certificado de assinatura. Um hash de uma chave de debug não corresponde a uma build de produção.
• Domínio diferente. @example.com deve corresponder ao site ou ao domínio associado; caso contrário, o iOS e o WebOTP não oferecem o código.
• Última linha quebrada. Qualquer coisa depois de #code, um espaço faltando ou espaços em branco dentro do domínio quebram o formato.
• Mensagem longa demais ou carregada de Unicode, o que ultrapassa o limite de 140 bytes do Retriever.
• Escutar tarde demais. A User Consent API ignora mensagens recebidas antes de ser iniciada.
• Usar o autopreenchimento como segurança. O autopreenchimento é uma conveniência. Continue validando no servidor, expirando os códigos e limitando as tentativas, e fique atento à fraude de SMS pumping.
• Escopo. Este guia cobre o comportamento documentado no momento da redação. As regras das plataformas mudam, então confira as fontes linkadas antes do lançamento.

Para a redação da mensagem e a escolha da expiração, veja nosso guia de mensagens de OTP e autenticação.

Como a OmniChannels.ai ajuda

A OmniChannels.ai envia OTP por SMS e WhatsApp pela conectividade direta com operadoras da BroadNet, para que você controle o texto exato da mensagem de que o seu formato de autopreenchimento depende. Os templates do WhatsApp cobrem a autenticação com copiar código, um toque e zero toque. O fallback entre canais, por exemplo WhatsApp e depois SMS, é configurado por caso de uso, e os status de entrega chegam em um único formato de webhook. Veja a documentação da API de SMS, a documentação da API do WhatsApp e a solução de OTP.