Autentica con Firebase y número de teléfono (Web)

La autenticación por teléfono o Two Factor Authentication es uno de los métodos de registro e inicio de sesión más modernos y seguros pues nos permite tener menos usuarios falsos y verificar a los que se registran en nuestra aplicación a un nivel más seguro que con correo y contraseña a través del número de teléfono del usuario al que por medio de SMS se le enviará un código con el que tendrá acceso a la aplicación.

Uno de los métodos de Inicio de Sesión que Firebase utiliza es justamente este, y nos permite implementarlo de una manera súper sencilla.

Para usar la autenticación por teléfono de firebase vamos a crear un proyecto web con JavaScript puro, tendremos una pequeña sección que tendrá el formulario de Login y otra pequeña sección que nos permitirá mostrar un perfil básico donde podremos editar nuestra información personal.

Es importante mencionar que para esto usaremos un CAPTCHA con el que podremos controlar las peticiones que se hagan a nuestra app, si no no podremos usar este método de inicio de sesión con firebase.

Para comenzar es necesario tener ya un proyecto de firebase, en la consola del mismo vamos a la sección de autenticación y en métodos de inicio de sesión vamos a activar teléfono .

Vamos a crear un archivo index.html y en el crearemos nuestro formulario de login.

index.html

<section>
  <h1>LogIn</h1>
  <div>
    <input type="text" id="number" placeholder="number" value="">
    <button class="number" id="numberButton"> LogIn Number </button>
    <p id="recaptcha-container"></p>
  </div>
  <div class="validate">
    <input type="text" id="code" placeholder="code">
    <button class="validatebtn" id="validate">Validate</button>
  </div>
</section>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase.js"></script>
<script>
  // Initialize Firebase
    var config = {
    apiKey: "Your-API-KEY",
    authDomain: "Your-domain",
    databaseURL: "your-dbUrl",
    projectId: "your-project-id",
    storageBucket: "your-storage-bucket",
    messagingSenderId: "your-messaging-sender-id"
  };
firebase.initializeApp(config);
</script>
<script src="app.js"></script>

En este section hemos estructurado todo lo que nuestro formulario necesita, tiene varios id’s con los que podremos seleccionar estas etiquetas y sus valores vía javascript.

Tenemos div con un input para el número de teléfono del usuario, un button que ejecutará el envío del SMS y un p que levantará el CAPTCHA para asegurarnos de que no somos 🤖.

Y el segundo div con un input para el código que llegará al celular del usuario y un button que ejecutará el registro/inicio de sesión.

Y finalmente tres etiquetas script la primera nos permite traer firebase a nuestro proyecto, la segunda contiene las llaves de nuestro proyecto, y la última que traerá el archivo app.js donde haremos la magia de esta pequeña app. Por ahora si abrimos este archivo en el navegador podremos ver esto.

Es mega importante que estes corriendo tu app en un servidor local, puede ser mediante web server for chrome o con python, yo lo haré con python desde la terminal con el comando python3 -m http.server el cual correrá mi app en el puerto 8000.

app.js

var numberButton = document.getElementById('numberButton')
numberButton.addEventListener('click', function(){
 var number = document.getElementById('number').value
  window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
  var appVerifier = window.recaptchaVerifier;
  firebase.auth().signInWithPhoneNumber(number, appVerifier)
    .then(function (confirmationResult) {
      window.confirmationResult = confirmationResult
    })
    .catch(function (error) {
      console.log(error)
    });
})

Tomamos el botón que tiene el id numberButton y le agregamos una función a través del evento click, la cual tomará el valor que esté en nuestro input con el id number (el número de teléfono del usuario), luego activará el CAPTCHA de firebase a través de una instancia de la clase firebase.auth().RecaptchaVerifier('recaptcha-container') (recaptcha-container es el id de la etiqueta que contedrá al CAPTCHA) y almacenará su valor en la variable appVerifier. Seguido de esto el método signInWithPhoneNumber de firebase se ejecutará recibiendo como parámetros el número de teléfono y el CAPTCHA verificado, con esto se estaría enviando el SMS y solo nos quedaría probar.

Es importante que el número de teléfono que ingresemos en el input tenga la lada del país, en nuestro caso agregaremos +52 1 y luego los diez dígitos del teléfono.

Si todo está bien y probamos agregando algún número de teléfono, al dar click, saldrá el CAPTCHA y una vez resuelto, estaremos recibiendo un SMS en nuestro celular 😱.

Ahora solo nos queda usar ese código para enviárselo a firebase y que nos registre en esta aplicación.

var validateButton = document.getElementById('validate')
validateButton.addEventListener('click', function(){
  var code = document.getElementById('code').value 
  window.confirmationResult.confirm(code)
    .then(function (result) {
      var user = result.user;
      console.log(user)
      //todo lo que quieras hacer con el usuario
    })
    .catch(function (error) {
        console.log(error)
    });
})

Ahora tomamos el button con el id validate y de la misma manera le agregamos el evento click con el que enviaremos a firebase el código que llegó en el SMS a través del valor del input con el id code en la función confirm que viene del objeto ConfirmationResult que almacenamos al validar el CAPTCHA de firebase.

Como resultado de la promesa obtendremos un objeto de firebase en la variable result, y dentro de ella la llave user, que contiene todos los campos del modelo user de firebase como el UID y el número de teléfono con el que nos dimos de alta, esto podemos verlo en la consola.

Y para comprobar que efectivamente mi usuario se ha registrado en firebase, vamos a la consola y mostrar la lista de usuarios.

¡Genial! hemos logrado autenticar un usuario vía número de teléfono, posteriormente tu podrías guardar al usuario en la base de datos, crearle un perfil, etc.

Para un demo más completo usando este gran feature de firebase puedes ver este increíble repo 😎.