Aplikacja ASP.NET MVC 5 z uwierzytelnianiem dwuskładnikowym za pomocą wiadomości SMS i wiadomości e-mail

Autor: Rick Anderson

W tym samouczku pokazano, jak utworzyć aplikację internetową ASP.NET MVC 5 przy użyciu uwierzytelniania Two-Factor. Przed kontynuowaniem należy utworzyć bezpieczną ASP.NET aplikację internetową MVC 5 z logowaniem, potwierdzeniem wiadomości e-mail i resetowaniem hasła . Ukończoną aplikację można pobrać tutaj. Pobieranie zawiera pomocników debugowania, które umożliwiają testowanie potwierdzenia wiadomości e-mail i wiadomości SMS bez konfigurowania dostawcy poczty e-mail lub programu SMS.

Ten samouczek został napisany przez Ricka Andersona ( Twitter: @RickAndMSFT ).

• Tworzenie aplikacji MVC ASP.NET
• Konfigurowanie programu SMS na potrzeby uwierzytelniania dwuskładnikowego
• Włączanie uwierzytelniania dwuskładnikowego
• Dodatkowe zasoby

Tworzenie aplikacji MVC ASP.NET

Rozpocznij od zainstalowania i uruchomienia Visual Studio Express 2013 dla sieci Web lub nowszej.

Uwaga

Ostrzeżenie: Przed kontynuowaniem należy utworzyć bezpieczną ASP.NET aplikację internetową MVC 5 z logowaniem, potwierdzeniem wiadomości e-mail i resetowaniem hasła . Aby ukończyć ten samouczek, musisz zainstalować Visual Studio 2013 aktualizacji Update 3 lub nowszej.

1. Utwórz nowy projekt ASP.NET sieci Web i wybierz szablon MVC. Web Forms obsługuje również usługę ASP.NET Identity, dzięki czemu możesz wykonać podobne kroki w aplikacji formularzy internetowych.
   
2. Pozostaw domyślne uwierzytelnianie jako indywidualne konta użytkowników. Jeśli chcesz hostować aplikację na platformie Azure, zaznacz pole wyboru. W dalszej części samouczka wdrożymy na platformie Azure. Możesz bezpłatnie otworzyć konto platformy Azure.
3. Ustaw projekt na użycie protokołu SSL.

Konfigurowanie programu SMS na potrzeby uwierzytelniania dwuskładnikowego

Ten samouczek zawiera instrukcje dotyczące korzystania z usługi Twilio lub ASPSMS, ale możesz użyć dowolnego innego dostawcy programu SMS.

1. Tworzenie konta użytkownika za pomocą dostawcy programu SMS

   Utwórz konto usługi Twilio lub asPSMS .

2. Instalowanie dodatkowych pakietów lub dodawanie odwołań do usługi

   Twilio:
   W konsoli Menedżera pakietów wprowadź następujące polecenie:
   Install-Package Twilio

   ASPSMS:
   Należy dodać następujące odwołanie do usługi:

   

   Adres:
   https://webservice.aspsms.com/aspsmsx2.asmx?WSDL

   Przestrzeń nazw:
   ASPSMSX2

3. Określanie poświadczeń użytkownika dostawcy programu SMS

   Twilio:
   Na karcie Pulpit nawigacyjny konta usługi Twilio skopiuj identyfikator SID konta i token uwierzytelniania.

   ASPSMS:
   W ustawieniach konta przejdź do pozycji Userkey i skopiuj je wraz z własnym hasłem.

   Te wartości zostaną później przechowywane w pliku web.config w ramach kluczy "SMSAccountIdentification" i "SMSAccountPassword" .

4. Określanie identyfikatora nadawcy/elementu źródłowego

   Twilio:
   Na karcie Numery skopiuj swój numer telefonu usługi Twilio.

   ASPSMS:
   W menu Odblokuj elementy źródłowe odblokuj co najmniej jedną jednostkę źródłową lub wybierz alfanumeryczną jednostkę źródłową (nieobsługiwana przez wszystkie sieci).

   Później zapiszemy tę wartość w pliku web.config w kluczu "SMSAccountFrom" .

5. Przenoszenie poświadczeń dostawcy programu SMS do aplikacji

   Podaj poświadczenia i numer telefonu nadawcy dla aplikacji. Aby zachować prostotę, będziemy przechowywać te wartości w pliku web.config . Podczas wdrażania na platformie Azure możemy bezpiecznie przechowywać wartości w sekcji ustawienia aplikacji na karcie Konfigurowanie witryny internetowej.

   </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>
   

   Ostrzeżenie

   Zabezpieczenia — nigdy nie przechowuj poufnych danych w kodzie źródłowym. Konto i poświadczenia są dodawane do powyższego kodu, aby zachować prosty przykład. Zobacz Najlepsze rozwiązania dotyczące wdrażania haseł i innych poufnych danych w ASP.NET i na platformie Azure.

6. Implementacja transferu danych do dostawcy programu SMS

   Skonfiguruj klasę SmsService w pliku App_Start\IdentityConfig.cs .

   W zależności od używanego dostawcy programu SMS aktywuj usługę Twilio lub sekcję 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. Zaktualizuj widok Views\Manage\Index.cshtml Razor: (uwaga: nie usuwaj komentarzy w kodzie zakończenia, użyj poniższego kodu).

   @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. Sprawdź metody i DisableTwoFactorAuthentication w atrybucie EnableTwoFactorAuthenticationManageController[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. Uruchom aplikację i zaloguj się przy użyciu wcześniej zarejestrowanego konta.

10. Kliknij swój identyfikator użytkownika, który aktywuje metodę Index akcji w Manage kontrolerze.
    

11. Kliknij pozycję Add (Dodaj).
    

12. Metoda AddPhoneNumber akcji wyświetla okno dialogowe, aby wprowadzić numer telefonu, który może odbierać wiadomości SMS.

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

    

13. W ciągu kilku sekund otrzymasz wiadomość SMS z kodem weryfikacyjnym. Wprowadź go i naciśnij przycisk Prześlij.
    

14. Widok Zarządzaj pokazuje, że numer telefonu został dodany.

Włącz uwierzytelnianie dwuskładnikowe

W wygenerowanej aplikacji szablonu musisz użyć interfejsu użytkownika, aby włączyć uwierzytelnianie dwuskładnikowe (2FA). Aby włączyć uwierzytelnianie 2FA, kliknij swój identyfikator użytkownika (alias e-mail) na pasku nawigacyjnym.

Kliknij pozycję Włącz uwierzytelnianie 2FA.

Wyloguj się, a następnie zaloguj się ponownie. Jeśli włączono wiadomość e-mail (zobacz mój poprzedni samouczek), możesz wybrać wiadomość SMS lub wiadomość e-mail dla 2FA.

Zostanie wyświetlona strona Weryfikowanie kodu, na której można wprowadzić kod (z wiadomości SMS lub wiadomości e-mail).

Kliknięcie pola wyboru Zapamiętaj tę przeglądarkę spowoduje wykluczenie konieczności logowania się przy użyciu uwierzytelniania 2FA podczas korzystania z przeglądarki i urządzenia, na którym zaznaczono pole wyboru. Tak długo, jak złośliwi użytkownicy nie mogą uzyskać dostępu do urządzenia, włączenie uwierzytelniania 2FA i kliknięcie przycisku Zapamiętaj tę przeglądarkę zapewni wygodny dostęp do hasła na jednym kroku, zachowując jednocześnie silną ochronę 2FA dla wszystkich dostępów z urządzeń nie zaufanych. Można to zrobić na dowolnym urządzeniu prywatnym, którego regularnie używasz.

Ten samouczek zawiera krótkie wprowadzenie do włączania uwierzytelniania 2FA w nowej aplikacji ASP.NET MVC. Mój samouczek Uwierzytelnianie dwuskładnikowe przy użyciu wiadomości SMS i poczty e-mail z usługą ASP.NET Identity zawiera szczegółowe informacje na temat kodu za przykładem.

Dodatkowe zasoby

• Uwierzytelnianie dwuskładnikowe przy użyciu wiadomości SMS i poczty e-mail z tożsamością ASP.NET Szczegółowe informacje na temat uwierzytelniania dwuskładnikowego
• Linki do zalecanych zasobów tożsamości ASP.NET
• Potwierdzenie konta i odzyskiwanie hasła przy użyciu tożsamości ASP.NET Bardziej szczegółowe informacje na temat odzyskiwania hasła i potwierdzenia konta.
• Aplikacja MVC 5 z logowaniem Facebook, Twitter, LinkedIn i Google OAuth2 W tym samouczku pokazano, jak napisać aplikację ASP.NET MVC 5 za pomocą autoryzacji Usługi Facebook i Google OAuth 2. Pokazano również, jak dodać dodatkowe dane do bazy danych Identity.
• Wdróż aplikację Secure ASP.NET MVC przy użyciu członkostwa, protokołu OAuth i SQL Database w sieci Web platformy Azure. W tym samouczku dodano wdrożenie platformy Azure, sposób zabezpieczania aplikacji za pomocą ról, używania interfejsu API członkostwa do dodawania użytkowników i ról oraz dodatkowych funkcji zabezpieczeń.
• Tworzenie aplikacji Google dla protokołu OAuth 2 i łączenie aplikacji z projektem
• Tworzenie aplikacji w serwisie Facebook i łączenie aplikacji z projektem
• Konfigurowanie protokołu SSL w projekcie
• Jak skonfigurować środowisko deweloperskie języka C# i ASP.NET MVC