Ir para o console

Autenticar com o Firebase e um número de telefone usando JavaScript

Use o Firebase Authentication para fazer o login de um usuário. Basta enviar uma mensagem SMS para o telefone dele. O usuário faz login com um código de uso único contido na mensagem SMS.

A maneira mais fácil de adicionar o login com número de telefone ao app é usar a FirebaseUI. Ela inclui um widget drop-in que implementa fluxos para logins com número de telefone, bem como logins por senha ou federados. Este documento descreve como implementar um fluxo de login com número de telefone por meio do SDK do Firebase.

Antes de começar

Copie o snippet de inicialização do Console do Firebase para o projeto, conforme descrito na página Adicionar o Firebase a seu projeto do JavaScript, se ainda não tiver feito isso.

Preocupações com segurança

A autenticação usando apenas um número de telefone é conveniente, porém menos segura do que os outros métodos disponíveis, já que um número de telefone pode ser facilmente transferido entre usuários. Além disso, em dispositivos com vários perfis de usuário, qualquer um que receba mensagens SMS pode fazer login em uma conta usando o número de telefone do dispositivo.

Caso use o login por número de telefone no seu app, você precisa oferecê-lo junto com métodos de login mais seguros e informar aos usuários as implicações de segurança do uso desse tipo de login.

Ativar o login com número de telefone para o projeto do Firebase

Para fazer login de usuários por SMS, ative primeiro o método de login com número de telefone para o projeto do Firebase:

  1. No Console do Firebase, abra a seção Autenticação.
  2. Na página Método de login, ative o método de login por Número de telefone.
  3. Na mesma página, adicione o domínio que hospedará o app se ele não estiver listado na seção Domínios de redirecionamento OAuth.

A cota de solicitação de login por número de telefone do Firebase é alta o suficiente, de modo que a maioria dos apps não é afetada. No entanto, se for necessário fazer login de um grande volume de usuários com autenticação por telefone, atualize o plano de preços. Consulte a página de preços.

Configurar o verificador reCAPTCHA

Antes de poder fazer login de usuários com os números de telefone deles, é preciso configurar o verificador reCAPTCHA do Firebase. O Firebase usa reCAPTCHA para evitar abusos, como ao assegurar que a solicitação de verificação por número de telefone provenha de um dos domínios permitidos do app.

Não é necessário configurar manualmente um cliente reCAPTCHA. Quando você usa o objeto RecaptchaVerifier do SDK do Firebase, ele cria e processa automaticamente as chaves e os segredos de cliente necessários.

O objeto RecaptchaVerifier é compatível com o reCAPTCHA invisível (em inglês), que geralmente verifica o usuário sem exigir nenhuma ação dele. Ele também é compatível com o widget reCAPTCHA, que sempre exige a interação do usuário para ser concluído.

O local do reCAPTCHA renderizado detalhado pode ser determinado de acordo com a preferência do usuário. Para isso, basta atualizar o código do idioma na instância de Auth antes de renderizar o reCAPTCHA. A mensagem SMS enviada ao usuário com o código de verificação ficará no mesmo local mencionado acima.

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

Usar reCAPTCHA invisível

Para usar um reCAPTCHA invisível, crie um objeto RecaptchaVerifier com o parâmetro size configurado como invisible, especificando o ID do botão que envia o formulário de login. Por exemplo:

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': function(response) {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
});

Usar o widget reCAPTCHA

Para usar o widget visível reCAPTCHA, crie um elemento na página para conter o widget e, em seguida, crie um objeto RecaptchaVerifier, especificando o ID do contêiner quando você fizer isso. Por exemplo:

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');

Opcional: especificar parâmetros do reCAPTCHA

Você também tem a opção de definir funções de retorno de chamada no objeto RecaptchaVerifier que são chamadas quando o usuário resolve o reCAPTCHA ou quando o reCAPTCHA expira antes que o usuário envie o formulário:

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
  'size': 'normal',
  'callback': function(response) {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': function() {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
});

Opcional: pré-renderizar o reCAPTCHA

Se você quiser pré-renderizar o reCAPTCHA antes de enviar uma solicitação de login, chame render:

recaptchaVerifier.render().then(function(widgetId) {
  window.recaptchaWidgetId = widgetId;
});

Quando render é resolvido, você recebe o código do widget do reCAPTCHA, que pode ser usado para fazer chamadas para a API reCAPTCHA (em inglês):

var recaptchaResponse = grecaptcha.getResponse(window.recaptchaWidgetId);

Enviar um código de verificação ao telefone do usuário

Para dar início ao login por número de telefone, apresente ao usuário uma interface que solicite o número de telefone dele e, em seguida, chame signInWithPhoneNumber para pedir que o Firebase envie um código de autenticação ao telefone do usuário por SMS:

  1. Solicite o número de telefone do usuário.

    Os requisitos legais variam, mas como prática recomendada e para definir as expectativas dos usuários, informe a eles que, se fizerem login com telefone, poderão receber uma mensagem SMS para verificação. Além disso, poderão ser cobrados por esse serviço.

  2. Chame signInWithPhoneNumber, passando a ele o número de telefone do usuário e o RecaptchaVerifier que você criou antes.
    var phoneNumber = getPhoneNumberFromUserInput();
    var appVerifier = window.recaptchaVerifier;
    firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
        .then(function (confirmationResult) {
          // SMS sent. Prompt user to type the code from the message, then sign the
          // user in with confirmationResult.confirm(code).
          window.confirmationResult = confirmationResult;
        }).catch(function (error) {
          // Error; SMS not sent
          // ...
        });
    Se signInWithPhoneNumber resultar em um erro, reinicie o reCAPTCHA para que o usuário possa tentar novamente:
    grecaptcha.reset(window.recaptchaWidgetId);
    
    // Or, if you haven't stored the widget ID:
    window.recaptchaVerifier.render().then(function(widgetId) {
      grecaptcha.reset(widgetId);
    }
    

O método signInWithPhoneNumber emite o desafio reCAPTCHA ao usuário e, se o usuário passar no desafio, solicita que o Firebase Authentication envie uma mensagem SMS com um código de verificação ao telefone do usuário.

Fazer login do usuário com o código de verificação

Depois que a chamada para signInWithPhoneNumber for bem-sucedida, solicite ao usuário que digite o código de verificação que recebeu por SMS. Em seguida, faça o login do usuário passando o código para o método confirm do objeto ConfirmationResult que foi passado para o gerenciador de preenchimento do signInWithPhoneNumber (ou seja, o bloco then dele). Por exemplo:

var code = getCodeFromUserInput();
confirmationResult.confirm(code).then(function (result) {
  // User signed in successfully.
  var user = result.user;
  // ...
}).catch(function (error) {
  // User couldn't sign in (bad verification code?)
  // ...
});

Se a chamada para confirm tiver sido bem-sucedida, o usuário iniciará a sessão com sucesso.

Conseguir o objeto AuthCredential intermediário

Se você precisa conseguir um objeto AuthCredential para a conta do usuário, passe o código de verificação do resultado de confirmação e o código de verificação para PhoneAuthProvider.credential em vez de chamar confirm:

var credential = firebase.auth.PhoneAuthProvider.credential(confirmationResult.verificationId, code);

Então, será possível fazer login do usuário com a credencial:

firebase.auth().signInWithCredential(credential);

Testar com números de telefone na lista de permissões

Use o Console do Firebase para adicionar números de telefone à lista de permissões para o desenvolvimento. Essa ação é vantajosa por estes motivos:

  • A autenticação do número de telefone é feita sem consumir sua cota de uso.
  • A autenticação do número de telefone é feita sem enviar uma mensagem SMS real.
  • Testes consecutivos são executados com o mesmo número de telefone, sem que haja limitação. Isso minimiza o risco de rejeição durante o processo de revisão da App store, caso o revisor use o mesmo número de telefone para teste.
  • O teste em ambientes de desenvolvimento é feito prontamente e sem esforço extra, como a capacidade de desenvolver um simulador do iOS ou um emulador do Android sem o Google Play Services.
  • A gravação de testes de integração é feita sem que haja bloqueio por verificações de segurança, normalmente aplicadas a números de telefone reais em um ambiente de produção.

Os números de telefone da lista de permissões precisam atender aos seguintes requisitos:

  1. Use números fictícios. Não é permitido, pelo Firebase Authentication, a colocação de números de telefones existentes na lista de permissões. Uma opção é usar números com 555 e prefixos, como números de telefone de teste dos EUA, por exemplo: +1 650-555-3434
  2. Os números de telefone precisam estar formatados corretamente para atender a restrições como o tamanho. Eles ainda passarão pela mesma validação dos números de usuários reais.
  3. Você pode adicionar até dez números de telefone para desenvolvimento.
  4. Use números de telefone/códigos de teste difíceis de adivinhar e altere-os com frequência.

Colocar números de telefone e códigos de verificação na lista de permissões

  1. No Console do Firebase, abra a seção Autenticação.
  2. Na guia Método de login, ative o provedor de telefone, se ainda não o fez.
  3. Abra o menu suspenso Números de telefone para testes.
  4. Informe o número de telefone que você quer testar, por exemplo: +1 650-555-3434.
  5. Informe o código de verificação de seis dígitos para esse número específico, por exemplo: 654321.
  6. Adicione o número. Se precisar, você pode excluir o número de telefone e o código. Basta passar o cursor sobre a linha correspondente e clicar no ícone da lixeira.

Teste manual

É possível começar a usar um número de telefone da lista de permissões diretamente no aplicativo. Dessa maneira, você pode executar testes manuais durante as etapas de desenvolvimento sem problemas de cotas ou limitações. Também é possível testar diretamente, a partir de um simulador do iOS ou emulador do Android, sem a instalação do Google Play Services.

Quando você informa o número de telefone da lista de permissões e envia o código de verificação, não ocorre o envio de um SMS real. Em vez disso, é necessário informar o código de verificação configurado anteriormente para concluir o login.

Quando o login é concluído, um usuário do Firebase é criado com aquele número de telefone. Este usuário tem o mesmo comportamento e propriedades de um usuário com um número de telefone real e pode acessar o Realtime Database/Cloud Firestore e outros serviços da mesma forma. O token de código gerado durante esse processo tem a mesma assinatura de um usuário com um número de telefone real.

Outra opção é definir um papel de teste por meio de declarações personalizadas nesses usuários para diferenciá-los como usuários falsos, se você quiser restringir ainda mais o acesso.

Teste de integração

Além do teste manual, o Firebase Authentication conta com APIs para ajudar a escrever testes de integração para o teste de autenticação por telefone. Para desativar a verificação de aplicativos, essas APIs desativam o requisito reCAPTCHA nas notificações push na Web e silenciosas no iOS. Isso possibilita testes de automação nesses fluxos e facilita a implementação. Além disso, fica mais fácil testar os fluxos de verificação instantânea no Android.

Na Web, defina appVerificationDisabledForTesting como true antes de renderizar o firebase.auth.RecaptchaVerifier. Isso resolve o reCAPTCHA automaticamente para que você possa passar o número de telefone sem precisar resolvê-lo manualmente. Observe que, mesmo com o reCAPTCHA desativado, o login não é concluído se for usado um número de telefone não listado entre os permitidos. Somente números de telefone permitidos podem ser usados com essa API.

// Turn off phone auth app verification.
firebase.auth().settings.appVerificationDisabledForTesting = true;

var phoneNumber = "+16505554567";
var testVerificationCode = "123456";

// This will render a fake reCAPTCHA as appVerificationDisabledForTesting is true.
// This will resolve after rendering without app verification.
var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
// signInWithPhoneNumber will call appVerifier.verify() which will resolve with a fake
// reCAPTCHA response.
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
    .then(function (confirmationResult) {
      // confirmationResult can resolve with the whitelisted testVerificationCode above.
      return confirmationResult.confirm(testVerificationCode)
    }).catch(function (error) {
      // Error; SMS not sent
      // ...
    });

O comportamento dos verificadores de aplicativo reCAPTCHA simulados visíveis e invisíveis varia quando a verificação de apps está desativada:

  • reCAPTCHA visível: quando o reCAPTCHA visível é renderizado por meio de appVerifier.render(), ele é resolvido automaticamente após uma fração de segundo. Isso equivale a um usuário que clica no reCAPTCHA imediatamente após a renderização. A resposta reCAPTCHA expira após algum tempo e é resolvida automaticamente outra vez.
  • reCAPTCHA invisível: o reCAPTCHA invisível não é resolvido automaticamente na renderização, mas sim na chamada appVerifier.verify() ou quando a âncora de botão do reCAPTCHA é clicada após uma fração de segundo. Da mesma forma, a resposta expira após algum tempo e só é resolvida automaticamente após a chamada de appVerifier.verify() ou quando a âncora de botão do reCAPTCHA é clicada novamente.

Sempre que um reCAPTCHA simulado é resolvido, a função de retorno de chamada correspondente é acionada como esperado com a resposta falsa. Se um retorno de chamada de expiração também for especificado, ele será acionado quando a resposta expirar.

Próximas etapas

Depois que um usuário faz login pela primeira vez, uma nova conta é criada e vinculada às credenciais, que podem ser o número do telefone, o nome de usuário e a senha ou as informações do provedor de autenticação. Essa nova conta é armazenada como parte do projeto do Firebase. Ela pode ser usada para identificar um usuário em todos os apps do projeto, independentemente do método de login usado.

  • Nos seus apps, a maneira recomendada para descobrir o status de autenticação do usuário é definir um observador no objeto Auth. Você pode coletar as informações básicas do perfil do usuário do objeto User. Consulte Gerenciar usuários.

  • Nas Regras de segurança do Firebase Realtime Database e do Cloud Storage, é possível usar a variável auth para encontrar o código exclusivo do usuário conectado. Utilize essa informação para controlar o acesso dele aos dados.

Os usuários podem fazer login no app usando vários provedores de autenticação. Basta vincular as credenciais desses provedores a uma conta de usuário.

Para desconectar um usuário, chame signOut:

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});