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

  • Artigo

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