Introdução à Verificação por SMS

A verificação por código SMS é comum em aplicativos web para autenticação ou recuperação de senha. Este artigo demonstra como integrar um serviço de SMS com o ASP.NET MVC, focando na API da AliDayu.

1. Registro da Aplicação

Crie uma conta no portal do prvoedor de SMS e registre uma nova aplicação para obter as credenciais necessárias. Anote o AppKey e App Secret fornecidos.

2. Configuração da Assinatura

No painel de administração, acesse a seção de configuração de assinaturas. Defina um nome curto que aparecerá no início do conteúdo do SMS, como "MinhaEmpresa". Este processo pode levar algumas horas para ser aprovado.

3. Configuração do Modelo de Mensagem

Crie ou selecione um modelo pré-definido para organizar o corpo do SMS. Certifique-se de incluir placeholders para variáveis dinâmicas, como o código de verificação.

4. Teste da Aplicação

Utilize a ferramenta de teste no portal do provedor para enviar uma mensagem SMS de exemplo. Insira a assinatura, o número de telefone e selecione o modelo configurado.

5. Implementação do Código no Backend

Integre a biblioteca do SDK no projeto. Para comunicação segura, utilize o endpoint HTTPS fornecido pelo provedor. Abaixo, um exemplo em C# para enviar um código aleatório por SMS.

using System;
using System.Web.Mvc;
using Top.Api;
using Top.Api.Request;

namespace ProjetoMVC.Controllers
{
    public class VerificacaoSmsController : Controller
    {
        private const string EndpointApi = "https://eco.taobao.com/router/rest";
        private const string ChaveApp = "SEU_APP_KEY";
        private const string SegredoApp = "SEU_APP_SECRET";

        public ActionResult Index()
        {
            var resultado = EnviarCodigoSms("5511999998888", "usuario_teste");
            return Json(resultado, JsonRequestBehavior.AllowGet);
        }

        public dynamic EnviarCodigoSms(string telefone, string nomeUsuario)
        {
            var cliente = new DefaultTopClient(EndpointApi, ChaveApp, SegredoApp);
            var requisicao = new AlibabaAliqinFcSmsNumSendRequest
            {
                SmsType = "normal",
                SmsFreeSignName = "MinhaApp",
                SmsTemplateCode = "TEMPLATE_123456"
            };

            var codigo = GerarCodigoAleatorio();
            requisicao.SmsParam = $"{{\"nome\":\"{nomeUsuario}\",\"codigo\":\"{codigo}\"}}";
            requisicao.RecNum = telefone;

            var resposta = cliente.Execute(requisicao);
            return new
            {
                Sucesso = !resposta.IsError,
                Mensagem = resposta.ErrMsg,
                CodigoErro = resposta.ErrCode
            };
        }

        private int GerarCodigoAleatorio()
        {
            var gerador = new Random();
            return gerador.Next(1000, 9999);
        }
    }
}

Este controlador define métodos para enviar o código SMS e gerar um valor aleatório de quatro dígitos.

6. Interface do Usuário e Validação no Frontend

No lado do cliente, crie um formulário para coletar o número de telefone e exibir os campos para o código de verificação. Use JavaScript para solicitar o envio do código e adicionar um temporizador de cooldown.

<div id="formulario-verificacao">
    <input type="tel" id="campo-telefone" placeholder="Número de telefone">
    <button id="btn-solicitar-codigo">Obter Código</button>
    <div id="campos-codigo">
        <input type="text" maxlength="1">
        <input type="text" maxlength="1">
        <input type="text" maxlength="1">
        <input type="text" maxlength="1">
    </div>
</div>

$(document).ready(function() {
    $("#btn-solicitar-codigo").click(function() {
        var telefone = $("#campo-telefone").val();
        if (!/^\d{10,11}$/.test(telefone)) {
            alert("Número de telefone inválido.");
            return;
        }

        $.post("/VerificacaoSms/EnviarCodigoSms", { telefone: telefone }, function(resposta) {
            if (resposta.Sucesso) {
                alert("Código enviado com sucesso!");
                iniciarCooldown();
            }
        });
    });

    function iniciarCooldown() {
        var segundos = 60;
        var botao = $("#btn-solicitar-codigo");
        botao.prop("disabled", true).text(segundos + "s");

        var intervalo = setInterval(function() {
            segundos--;
            botao.text(segundos + "s");
            if (segundos <= 0) {
                clearInterval(intervalo);
                botao.prop("disabled", false).text("Obter Código");
            }
        }, 1000);
    }

    $("#campos-codigo input").on("input", function() {
        if ($(this).val().length === 1) {
            $(this).next("input").focus();
        }
    });
});

7. Armazenamento e Validação dos Códigos

Implemente um serviço para persistir os códigos enviados e validar se o código inserido pelo usuário corresponde ao último enviado para aquele número. Inclua uma verificação de tempo de expiração.

using System;
using System.Linq;

public class ServicoCodigoSms
{
    private readonly Repositorio<codigosms> _repositorio;

    public ServicoCodigoSms(Repositorio<codigosms> repositorio)
    {
        _repositorio = repositorio;
    }

    public void Salvar(CodigoSms codigo)
    {
        _repositorio.Adicionar(codigo);
    }

    public bool Validar(string codigo, string telefone)
    {
        var tempoLimite = DateTime.Now.AddMinutes(-15);
        return _repositorio.Consultar()
            .Any(c => c.DataCriacao >= tempoLimite && c.NumeroTelefone == telefone && c.Codigo == codigo);
    }
}

public class CodigoSms
{
    public int Id { get; set; }
    public string NumeroTelefone { get; set; }
    public string Codigo { get; set; }
    public DateTime DataCriacao { get; set; }
}
</codigosms></codigosms>

8. Cenários de Uso

Integre a verificação por SMS em fluxos como cadastro de novos usuários ou redefinição de senha. No controlador, valide o código antes de processar a ação solicitada.

public ActionResult RegistrarUsuario(string telefone, string nome, string senha, string codigo)
{
    var codigoValido = _servicoCodigo.Validar(codigo, telefone);
    if (!codigoValido)
    {
        return Json("Código inválido ou expirado.");
    }

    // Lógica para criar o usuário
    return Json("Cadastro realizado com sucesso.");
}

public ActionResult EsqueciSenha(string telefone, string codigo, string novaSenha)
{
    var codigoValido = _servicoCodigo.Validar(codigo, telefone);
    if (!codigoValido)
    {
        return Json("Código inválido.");
    }

    // Lógica para alterar a senha
    return Json("Senha atualizada com sucesso.");
}

No frontend, colete todos os campos necessários, incluindo o código, e envie para o controlador correspondente. Após a validação bem-sucedida, redirecione o usuário ou exiba uma mensagem de confirmação.