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

Artykuł
07/13/2023

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.

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

Tworzenie konta użytkownika za pomocą dostawcy programu SMS

Utwórz konto usługi Twilio lub asPSMS .
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
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" .
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" .
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" />
      
      
      <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.

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

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>

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

Uruchom aplikację i zaloguj się przy użyciu wcześniej zarejestrowanego konta.
Kliknij swój identyfikator użytkownika, który aktywuje metodę Index akcji w Manage kontrolerze.
Kliknij pozycję Add (Dodaj).
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();
}
```
W ciągu kilku sekund otrzymasz wiadomość SMS z kodem weryfikacyjnym. Wprowadź go i naciśnij przycisk Prześlij.
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

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

Udostępnij za pośrednictwem

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

Tworzenie aplikacji MVC ASP.NET

Konfigurowanie programu SMS na potrzeby uwierzytelniania dwuskładnikowego

Włącz uwierzytelnianie dwuskładnikowe

Dodatkowe zasoby

Opinia

Dodatkowe zasoby