Compartilhar via


Aplicativo do ASP.NET MVC 5 com autenticação de dois fatores por SMS e email

por Rick Anderson

Este tutorial mostra como criar um aplicativo Web ASP.NET MVC 5 com a Autenticação Two-Factor. Você deve concluir Criar um aplicativo Web seguro ASP.NET MVC 5 com logon, confirmação de email e redefinição de senha antes de continuar. Você pode baixar o aplicativo concluído aqui. O download contém auxiliares de depuração que permitem testar a confirmação de email e o SMS sem configurar um email ou um provedor de SMS.

Este tutorial foi escrito por Rick Anderson ( Twitter: @RickAndMSFT ).

Criar um aplicativo MVC ASP.NET

Comece instalando e executando Visual Studio Express 2013 para Web ou superior.

Observação

Aviso: você deve concluir Criar um aplicativo Web seguro ASP.NET MVC 5 com logon, confirmação de email e redefinição de senha antes de continuar. Você deve instalar Visual Studio 2013 Atualização 3 ou superior para concluir este tutorial.

  1. Crie um novo ASP.NET projeto Web e selecione o modelo MVC. Web Forms também dá suporte ao ASP.NET Identity, para que você possa seguir etapas semelhantes em um aplicativo web forms.
    Captura de tela que mostra a janela Novo Projeto DOT NET do A SP. A autenticação padrão, Contas de Usuário Individuais, está realçada.
  2. Deixe a autenticação padrão como Contas de Usuário Individuais. Se você quiser hospedar o aplicativo no Azure, deixe a caixa marcar marcada. Posteriormente, no tutorial, implantaremos no Azure. Você pode abrir uma conta do Azure gratuitamente.
  3. Defina o projeto para usar o SSL.

Configurar o SMS para autenticação de dois fatores

Este tutorial fornece instruções para usar o Twilio ou o ASPSMS, mas você pode usar qualquer outro provedor de SMS.

  1. Criando uma conta de usuário com um provedor de SMS

    Crie um Twilio ou uma conta do ASPSMS .

  2. Instalando pacotes adicionais ou adicionando referências de serviço

    Twilio:
    No Console do Gerenciador de Pacotes, digite o seguinte comando:
    Install-Package Twilio

    ASPSMS:
    A seguinte referência de serviço precisa ser adicionada:

    Captura de tela que mostra a janela Adicionar Referência de Serviço. As barras de entrada Endereço e Namespace estão realçadas.

    Endereço:
    https://webservice.aspsms.com/aspsmsx2.asmx?WSDL

    Namespace:
    ASPSMSX2

  3. Descobrir as credenciais do usuário do provedor de SMS

    Twilio:
    Na guia Painel da sua conta do Twilio, copie o SID da conta e o token de autenticação.

    ASPSMS:
    Nas configurações da sua conta, navegue até Userkey e copie-a junto com sua Senha autodefinida.

    Posteriormente, armazenaremos esses valores no arquivo web.config dentro das chaves "SMSAccountIdentification" e "SMSAccountPassword" .

  4. Especificando SenderID/Originator

    Twilio:
    Na guia Números , copie o número de telefone do Twilio.

    ASPSMS:
    No Menu Desbloquear Originadores , desbloqueie um ou mais Originadores ou escolha um Originador alfanumérico (sem suporte em todas as redes).

    Posteriormente, armazenaremos esse valor no arquivo web.config dentro da chave "SMSAccountFrom" .

  5. Transferir credenciais do provedor de SMS para o aplicativo

    Disponibilize as credenciais e o número de telefone do remetente para o aplicativo. Para manter as coisas simples, armazenaremos esses valores no arquivo web.config . Quando implantamos no Azure, podemos armazenar os valores com segurança na seção configurações do aplicativo na guia Configurar site.

    </connectionStrings>
       <appSettings>
          <add key="webpages:Version" value="3.0.0.0" />
          <!-- Markup removed for clarity. -->
          <!-- SendGrid-->
          <add key="mailAccount" value="account" />
          <add key="mailPassword" value="password" />
          <add key="SMSAccountIdentification" value="My Identification" />
          <add key="SMSAccountPassword" value="My Password" />
          <add key="SMSAccountFrom" value="+12065551234" />
       </appSettings>
      <system.web>
    

    Aviso

    Segurança – Nunca armazene dados confidenciais em seu código-fonte. A conta e as credenciais são adicionadas ao código acima para manter o exemplo simples. Confira Práticas recomendadas para implantar senhas e outros dados confidenciais no ASP.NET e no Azure.

  6. Implementação da transferência de dados para o provedor de SMS

    Configure a SmsService classe no arquivo App_Start\IdentityConfig.cs .

    Dependendo do provedor de SMS usado, ative o Twilio ou a seção ASPSMS :

    public class SmsService : IIdentityMessageService
    {
        public Task SendAsync(IdentityMessage message)
        {
            // Twilio Begin
            //var accountSid = ConfigurationManager.AppSettings["SMSAccountIdentification"];
            //var authToken = ConfigurationManager.AppSettings["SMSAccountPassword"];
            //var fromNumber = ConfigurationManager.AppSettings["SMSAccountFrom"];
    
            //TwilioClient.Init(accountSid, authToken);
    
            //MessageResource result = MessageResource.Create(
                //new PhoneNumber(message.Destination),
                //from: new PhoneNumber(fromNumber),
               //body: message.Body
            //);
    
            ////Status is one of Queued, Sending, Sent, Failed or null if the number is not valid
             //Trace.TraceInformation(result.Status.ToString());
            ////Twilio doesn't currently have an async API, so return success.
             //return Task.FromResult(0);    
            // Twilio End
    
            // ASPSMS Begin 
            // var soapSms = new MvcPWx.ASPSMSX2.ASPSMSX2SoapClient("ASPSMSX2Soap");
            // soapSms.SendSimpleTextSMS(
            //   System.Configuration.ConfigurationManager.AppSettings["SMSAccountIdentification"],
            //   System.Configuration.ConfigurationManager.AppSettings["SMSAccountPassword"],
            //   message.Destination,
            //   System.Configuration.ConfigurationManager.AppSettings["SMSAccountFrom"],
            //   message.Body);
            // soapSms.Close();
            // return Task.FromResult(0);
            // ASPSMS End
        }
    }
    
  7. Atualize o modo de exibição Views\Manage\Index.cshtml Razor: (observação: não remova apenas os comentários no código de saída, use o código abaixo.)

    @model MvcPWy.Models.IndexViewModel
    @{
       ViewBag.Title = "Manage";
    }
    <h2>@ViewBag.Title.</h2>
    <p class="text-success">@ViewBag.StatusMessage</p>
    <div>
       <h4>Change your account settings</h4>
       <hr />
       <dl class="dl-horizontal">
          <dt>Password:</dt>
          <dd>
             [
             @if (Model.HasPassword)
             {
                @Html.ActionLink("Change your password", "ChangePassword")
             }
             else
             {
                @Html.ActionLink("Create", "SetPassword")
             }
             ]
          </dd>
          <dt>External Logins:</dt>
          <dd>
             @Model.Logins.Count [
             @Html.ActionLink("Manage", "ManageLogins") ]
          </dd>
            <dt>Phone Number:</dt>
          <dd>
             @(Model.PhoneNumber ?? "None") [
             @if (Model.PhoneNumber != null)
             {
                @Html.ActionLink("Change", "AddPhoneNumber")
                @: &nbsp;|&nbsp;
                @Html.ActionLink("Remove", "RemovePhoneNumber")
             }
             else
             {
                @Html.ActionLink("Add", "AddPhoneNumber")
             }
             ]
          </dd>
          <dt>Two-Factor Authentication:</dt> 
          <dd>
             @if (Model.TwoFactor)
             {
                using (Html.BeginForm("DisableTwoFactorAuthentication", "Manage", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
                {
                   @Html.AntiForgeryToken()
                   <text>Enabled
                      <input type="submit" value="Disable" class="btn btn-link" />
                   </text>
                }
             }
             else
             {
                using (Html.BeginForm("EnableTwoFactorAuthentication", "Manage", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
                {
                   @Html.AntiForgeryToken()
                   <text>Disabled
                      <input type="submit" value="Enable" class="btn btn-link" />
                   </text>
                }
             }
          </dd>
       </dl>
    </div>
    
  8. Verifique os EnableTwoFactorAuthentication métodos de ação e DisableTwoFactorAuthentication no ManageController têm o atributo [ValidateAntiForgeryToken] :

    //
    // POST: /Manage/EnableTwoFactorAuthentication
    [HttpPost,ValidateAntiForgeryToken]
    public async Task<ActionResult> EnableTwoFactorAuthentication()
    {
        await UserManager.SetTwoFactorEnabledAsync(User.Identity.GetUserId(), true);
        var user = await UserManager.FindByIdAsync(User.Identity.GetUserId());
        if (user != null)
        {
            await SignInAsync(user, isPersistent: false);
        }
        return RedirectToAction("Index", "Manage");
    }
    //
    // POST: /Manage/DisableTwoFactorAuthentication
    [HttpPost, ValidateAntiForgeryToken]
    public async Task<ActionResult> DisableTwoFactorAuthentication()
    {
        await UserManager.SetTwoFactorEnabledAsync(User.Identity.GetUserId(), false);
        var user = await UserManager.FindByIdAsync(User.Identity.GetUserId());
        if (user != null)
        {
            await SignInAsync(user, isPersistent: false);
        }
        return RedirectToAction("Index", "Manage");
    }
    
  9. Execute o aplicativo e faça logon com a conta que você registrou anteriormente.

  10. Clique em sua ID de Usuário, que ativa o método de Index ação no Manage controlador.
    Captura de tela que mostra a Home page do aplicativo A SP dot NET. Uma ID de usuário de exemplo está realçada.

  11. Clique em Adicionar.
    Captura de tela que mostra a página Configurações da Conta do aplicativo A SP dot NET. A seção Nenhum Adicionar ao lado de Número de Telefone está realçada.

  12. O AddPhoneNumber método de ação exibe uma caixa de diálogo para inserir um número de telefone que pode receber mensagens SMS.

    // GET: /Account/AddPhoneNumber
    public ActionResult AddPhoneNumber()
    {
       return View();
    }
    

    Captura de tela que mostra a página Adicionar Número de Telefone do aplicativo A SP dot NET. Um número de telefone de exemplo é preenchido com um botão Enviar Código de Verificação abaixo dele.

  13. Em alguns segundos, você receberá uma mensagem de texto com o código de verificação. Insira-o e pressione Enviar.
    Captura de tela da página Adicionar Número de Telefone do aplicativo A SP dot NET mostrando uma barra de entrada preenchida com um código de verificação de exemplo e um botão Enviar abaixo dele.

  14. O modo de exibição Gerenciar mostra que o número de telefone foi adicionado.

Habilitar a autenticação de dois fatores

No aplicativo gerado pelo modelo, você precisa usar a interface do usuário para habilitar a 2FA (autenticação de dois fatores). Para habilitar a 2FA, clique em sua ID de usuário (alias de email) na barra de navegação.

Captura de tela que exibe a home page do aplicativo A SP dot NET. Um exemplo de ID de USUÁRIO está realçado.

Clique em habilitar 2FA.

Captura de tela que mostra a página Configurações da Conta do aplicativo A SP dot NET. Two-Factor Autenticação: desabilitada com uma seção Habilitar link está realçada.

Faça logoff e faça logoff novamente. Se você habilitou o email (consulte meu tutorial anterior), selecione o SMS ou email para 2FA.

Captura de tela que mostra a página Código de Verificação de Envio do aplicativo A SP dot NET. Um menu suspenso mostrando o Código do Telefone e Email Código está selecionado.

A página Verificar Código é exibida onde você pode inserir o código (por SMS ou email).

Captura de tela que mostra a página Verificação do aplicativo A SP dot NET para 2 FA. Abaixo de um código de exemplo, uma caixa de seleção com Lembrar este navegador está realçada.

Clicar na caixa Lembrar este navegador marcar isentará você de precisar usar a 2FA para fazer logon ao usar o navegador e o dispositivo em que você marquei a caixa. Desde que usuários mal-intencionados não possam obter acesso ao seu dispositivo, habilitar a 2FA e clicar em Lembrar este navegador fornecerá acesso conveniente a senha de uma etapa, mantendo ainda uma proteção forte de 2FA para todo o acesso de dispositivos não confiáveis. Você pode fazer isso em qualquer dispositivo privado usado regularmente.

Este tutorial fornece uma introdução rápida para habilitar a 2FA em um novo aplicativo ASP.NET MVC. Meu tutorial Autenticação de dois fatores usando SMS e email com ASP.NET Identity entra em detalhes sobre o código por trás do exemplo.

Recursos adicionais