Udostępnij za pośrednictwem


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

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.
    Zrzut ekranu przedstawiający okno Nowy projekt kropki S P.NET. Domyślne uwierzytelnianie, indywidualne konta użytkowników, jest wyróżnione.
  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:

    Zrzut ekranu przedstawiający okno Dodawanie odwołania do usługi. Paski wejściowe Adres i Przestrzeń nazw są wyróżnione.

    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.
    Zrzut ekranu przedstawiający stronę główną aplikacji S P dot NET. Wyróżniono przykładowy element USER I D.

  11. Kliknij pozycję Add (Dodaj).
    Zrzut ekranu przedstawiający stronę Ustawienia konta aplikacji S P dot NET. Opcja Brak dodaj obok sekcji Numer telefonu jest wyróżniona.

  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();
    }
    

    Zrzut ekranu przedstawiający stronę Dodawanie numeru telefonu przez aplikację S P dot NET. Przykładowy numer telefonu jest wypełniony przyciskiem Wyślij kod weryfikacyjny poniżej.

  13. W ciągu kilku sekund otrzymasz wiadomość SMS z kodem weryfikacyjnym. Wprowadź go i naciśnij przycisk Prześlij.
    Zrzut ekranu przedstawiający stronę Dodawanie numeru telefonu aplikacji S P dot NET z paskiem wejściowym wypełnionym przykładowym kodem weryfikacyjnym i przyciskiem Prześlij poniżej.

  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.

Zrzut ekranu przedstawiający stronę główną aplikacji S P dot NET. Wyróżniono przykładowy element USER I D.

Kliknij pozycję Włącz uwierzytelnianie 2FA.

Zrzut ekranu przedstawiający stronę Ustawienia konta aplikacji S P dot NET. Two-Factor Uwierzytelnianie: wyłączone z wyróżnioną sekcją Włącz łącze.

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.

Zrzut ekranu przedstawiający stronę Wyślij kod weryfikacyjny aplikacji S P dot NET. Wybrano menu rozwijane z kodem telefonu i Email Kod.

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

Zrzut ekranu przedstawiający stronę Weryfikacja aplikacji kropki S P dla 2 fa. Poniżej przykładowego kodu pole wyboru z wyróżnioną pozycją Zapamiętaj tę przeglądarkę.

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