Cómo Verificar un Número de Teléfono vía SMS

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Final product image — What You'll Be Creating

Introducción

En el episodio anterior, escribí sobre preparar tu aplicación para SMS usando Twilio, un servicio de mensajes de texto comúnmente usado. En el tutorial de hoy, te mostraré cómo verificar números de teléfono de usuario antes de transmitir un volumen alto de textos y elevar tus costos.

Antes de que comencemos, quiero alentarte a publicar preguntas y retroalimentación en los comentarios. Si quisieras estar al tanto de mis futuros tutoriales Envato Tuts+ y otras series, por favor visita mi página de instructor o sigue a @lookahead_io.

Delineando el Proceso

Después de que el usuario proporciona su número de teléfono, queremos realizar un puñado de pasos sencillos:

Genera un código único de 4 dígitos.
Almacena su número de celular y el código de cuatro dígitos en nuestra base de datos (o encripta el código de manera local como una variable oculta de formulario en la página).
Envía un texto al número no verificado con el código de cuatro dígitos.
Muestra un formulario pidiendo al usuario proporcionar el código que recibieron.
Verifica que los códigos empaten.
Designa el número como verificado en la base de datos.

La Página de Contacto del Usuario

En Planificador de Reuniones, cada usuario puede agregar múltiples métodos de contacto, ej. Skype, teléfono, etc. Cada número celular debe ser verificado para ser usado para notificaciones SMS.

La tercera fila de abajo muestra una casilla a la que pueden dar clic para solicitar verificación:

How to Verify a Phone Number via SMS - Contacts list

Dar clic a eso transfiere al usuario al controlador actionVerify() de abajo; nota que los lleva al bloque else al principio porque aún no han enviado código:

public function actionVerify($id)
{
    $model = $this->findModel($id);
    if ($model->load(Yii::$app->request->post())) {
    ...
    } else {
      $canRequest = $model->canRequest();
      if ($canRequest) {
        // send a text to this number
        $model->requestCode();
        return $this->render('verify', [
            'model' => $model,
        ]);
      } else {
        Yii::$app->getSession()->setFlash('error', $canRequest);
        return $this->redirect(['/user-contact']);
      }
    }
}

El método canRequest() revisa si han solicitado códigos repetidamente o demasiado frecuentemente.

public function canRequest() {
    if ($this->request_count<UserContact::MAX_REQUEST_COUNT) {
      if (time() - $this->requested_at>=60) {
        return true;
      } else {
          return Yii::t('frontend','Sorry, you must wait a minute between requests.');
      }
    } else {
      return Yii::t('frontend','You have exceeded the maximum number of attempts.');
    }
  }

Los hago esperar un minuto entre intentos para reducir abuso.

Transmitiendo el Código de Verificación

Si es permitido, este llama a requestCode():

public function requestCode() {
    $this->verify_code = rand(0,9999);
    $this->requested_at = time();
    $this->request_count+=1;
    $this->update();
    $sms = new Sms;
    $sms->transmit($this->info,Yii::t('frontend',
        'Please return to the site and type in {code}',['code'=>sprintf("%04d",$this->verify_code)]));
  }

Esto hace lo siguiente:

Genera un código aleatorio de cuatro dígitos.
Registra el último momento en tiempo (segundos unix) que una petición a verificar fue hecha.
Incrementa los intentos de verificación para este número.
Y almacena todo esto en la base de datos.
Después, transmite un texto con el código que luce como la imagen de abajo.

How to Verify a Phone Number via SMS - Text message with verification code

Después de solicitar el código, guardarlo en la base de datos tras bambalinas y transmitir el código al usuario, este carga el siguiente formulario pidiendo el código:

How to Verify a Phone Number via SMS - Verify Contact Form requesting code

Verificando el Código

Cuando el usuario intenta enviar un código, este ejecuta la parte superior de actionVerify():

public function actionVerify($id)
{
    $model = $this->findModel($id);
    if ($model->load(Yii::$app->request->post())) {
        // display verification form
        $model->verify = Yii::$app->request->post()['UserContact']['verify'];
        if (strval($model->verify_code) == strval($model->verify)) {
          $model->status = UserContact::STATUS_VERIFIED;
          $model->update();
          Yii::$app->getSession()->setFlash('success',Yii::t('frontend','Thank you, your number is confirmed.'));
          return $this->redirect(['/user-contact']);
        } else {
            Yii::$app->getSession()->setFlash('error', Yii::t('frontend','Sorry, that is incorrect. Please request a new code.'));
            return $this->redirect(['/user-contact']);
        }
    } else {
      ...
    }
}

Este revisa que todos los códigos empaten. Si lo hacen, actualiza la base de datos para reflejar que el número ha sido verificado. Y le dice al usuario:

How to Verify a Phone Number via SMS - Successful confirmation notice

Si no, muestra un mensaje de error:

How to Verify a Phone Number via SMS - Error try again after a minute

Inténtalo Tu Mismo

Si quieres ver esto en acción, puedes registrarte en Simple Planner o Planificador de Reuniones (que es sencillo con una cuenta social como Facebook o Google) y agrega un número de teléfono. Después da clic a la casilla de verificación que la lista que verás. Eso es todo.

Concluyendo

Obviamente, si tu aplicación manda muchos mensajes de texto, es un costo notable para el negocio, y quieres limitar el abuso. Eso comienza con establecer un cortafuegos contra números inválidos---o números válidos que no pertenecen realmente al impostor.

Espero que esto te haya sido de utilidad. Si tienes cualquier pregunta o sugerencia, por favor postealas en los comentarios. Si quisieras estar al tanto de mis tutoriales Envato Tuts+ futuros y otras series, por favor visita mi página de instructor o sigue a @lookahead_io. Definitivamente revisa mi serie startup y Planificador de Reunión.