Sdílet prostřednictvím

Aplikace ASP.NET MVC 5 s dvoufaktorovým ověřováním pomocí SMS a e-mailu

  • Článek

Rick Anderson

V tomto kurzu se dozvíte, jak vytvořit webovou aplikaci ASP.NET MVC 5 s ověřováním Two-Factor. Než budete pokračovat, měli byste dokončit vytvoření zabezpečené webové aplikace ASP.NET MVC 5 s přihlášením, potvrzením e-mailu a resetováním hesla . Dokončenou aplikaci si můžete stáhnout tady. Soubor ke stažení obsahuje pomocníky ladění, které umožňují otestovat potvrzení e-mailu a SMS bez nastavení poskytovatele e-mailu nebo serveru SMS.

Tento kurz napsal Rick Anderson (Twitter: @RickAndMSFT ).

Vytvoření aplikace ASP.NET MVC

Začněte instalací a spuštěním Visual Studio Express 2013 pro web nebo novější.

Poznámka

Upozornění: Než budete pokračovat, měli byste dokončit vytvoření zabezpečené webové aplikace ASP.NET MVC 5 s přihlášením, potvrzením e-mailu a resetováním hesla . K dokončení tohoto kurzu musíte nainstalovat aktualizaci Visual Studio 2013 Update 3 nebo vyšší.

  1. Vytvořte nový webový projekt ASP.NET a vyberte šablonu MVC. Web Forms také podporuje ASP.NET Identity, takže v aplikaci webových formulářů můžete postupovat podobně.
    Snímek obrazovky s oknem Nový projekt S P dot NET Je zvýrazněné výchozí ověřování , Individuální uživatelské účty.
  2. Výchozí ověřování ponechte na individuálních uživatelských účtech. Pokud chcete aplikaci hostovat v Azure, nechte políčko zaškrtnuté. Později v tomto kurzu nasadíme do Azure. Účet Azure si můžete otevřít zdarma.
  3. Nastavte projekt tak, aby používal SSL.

Nastavení sms pro dvojúrovňové ověřování

Tento kurz obsahuje pokyny pro použití Twilia nebo ASPSMS, ale můžete použít libovolného jiného poskytovatele serveru SMS.

  1. Vytvoření uživatelského účtu u poskytovatele serveru SMS

    Vytvořte účet Twilio nebo ASPSMS .

  2. Instalace dalších balíčků nebo přidání odkazů na služby

    Twilio:
    V konzole Správce balíčků zadejte následující příkaz:
    Install-Package Twilio

    ASPSMS:
    Je potřeba přidat následující odkaz na službu:

    Snímek obrazovky s oknem Přidat odkaz na službu Jsou zvýrazněné vstupní pruhy Adresa a Obor názvů.

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

    Obor názvů:
    ASPSMSX2

  3. Zjištění přihlašovacích údajů uživatele poskytovatele SERVERU SMS

    Twilio:
    Na kartě Řídicí panel účtu Twilio zkopírujte IDENTIFIKÁTOR SID účtu a token ověřování.

    ASPSMS:
    V nastavení účtu přejděte na Userkey (Klíč uživatele ) a zkopírujte ho společně s vlastním definovaným heslem.

    Později tyto hodnoty uložíme do souboruweb.config v rámci klíčů "SMSAccountIdentification" a "SMSAccountPassword" .

  4. Určení SenderID / Původce

    Twilio:
    Na kartě Čísla zkopírujte svoje telefonní číslo Twilio.

    ASPSMS:
    V nabídce Odemknout původce odemkněte jednoho nebo více původců nebo zvolte alfanumerický původce (nepodporuje ho všechny sítě).

    Později tuto hodnotu uložíme do souboruweb.config v klíči "SMSAccountFrom" .

  5. Přenos přihlašovacích údajů poskytovatele SMS do aplikace

    Zpřístupněte aplikaci přihlašovací údaje a telefonní číslo odesílatele. Aby to bylo jednoduché, uložíme tyto hodnoty do web.config souboru. Když nasadíme do Azure, můžeme hodnoty bezpečně uložit v části Nastavení aplikace na kartě Konfigurace webu.

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

    Upozornění

    Zabezpečení – nikdy neukládejte citlivá data ve zdrojovém kódu. Účet a přihlašovací údaje se přidají do výše uvedeného kódu, aby byla ukázka jednoduchá. Viz Osvědčené postupy pro nasazení hesel a dalších citlivých dat do ASP.NET a Azure.

  6. Implementace přenosu dat k poskytovateli serveru SMS

    SmsService Nakonfigurujte třídu v souboru App_Start\IdentityConfig.cs.

    V závislosti na použitém poskytovateli serveru SMS aktivujte část Twilio nebo 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. Aktualizujte zobrazení Views\Manage\Index.cshtml Razor: (poznámka: Neodstraňujte jenom komentáře v ukončovacím kódu, použijte následující kód.)

    @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. Ověřte, EnableTwoFactorAuthentication že metody a DisableTwoFactorAuthentication v objektu ManageController mají atribut [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. Spusťte aplikaci a přihlaste se pomocí účtu, který jste předtím zaregistrovali.

  10. Klikněte na id uživatele, čímž se aktivuje Index metoda akce v Manage kontroleru.
    Snímek obrazovky s domovskou stránkou aplikace A S P dot NET Je zvýrazněná položka Sample USER I D.

  11. Klikněte na Přidat.
    Snímek obrazovky se stránkou Nastavení účtu aplikace A S P dot NET Žádné přidání vedle části Telefonní číslo není zvýrazněné.

  12. Metoda AddPhoneNumber akce zobrazí dialogové okno pro zadání telefonního čísla, které může přijímat zprávy SMS.

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

    Snímek obrazovky znázorňující stránku aplikace A S P dot NET Add Phone Number (Přidat telefonní číslo) Vzorové telefonní číslo je vyplněné tlačítkem Poslat ověřovací kód pod ním.

  13. Za několik sekund dostanete textovou zprávu s ověřovacím kódem. Zadejte ho a stiskněte Odeslat.
    Snímek obrazovky se stránkou aplikace A S P dot NET Add Phone Number (Přidat telefonní číslo) zobrazující vstupní panel vyplněný ukázkovým ověřovacím kódem a pod ním tlačítko Odeslat

  14. Zobrazení Spravovat zobrazuje, že vaše telefonní číslo bylo přidáno.

Povolení dvoufaktorového ověřování

V aplikaci vygenerované šablonou musíte k povolení dvoufaktorového ověřování (2FA) použít uživatelské rozhraní. Pokud chcete povolit 2FA, klikněte na id uživatele (e-mailový alias) na navigačním panelu.

Snímek obrazovky s domovskou stránkou aplikace A S P dot NET Je zvýrazněná ukázka USER I D.

Klikněte na povolit 2FA.

Snímek obrazovky se stránkou Nastavení účtu aplikace A S P dot NET Two-Factor Ověřování: Je zvýrazněná možnost Zakázáno s oddílem Povolit odkaz.

Odhlaste se a pak se znovu přihlaste. Pokud jste povolili e-mail (viz můj předchozí kurz), můžete vybrat SMS nebo e-mail pro 2FA.

Snímek obrazovky znázorňující stránku odeslání ověřovacího kódu aplikace A S P dot NET Je vybraná rozevírací nabídka s telefonním kódem a kódem Email.

Zobrazí se stránka Ověřit kód, na které můžete kód zadat (z SMS nebo e-mailu).

Snímek obrazovky znázorňující stránku Ověření aplikace A S P dot NET pro 2 FA. Pod ukázkovým kódem je zvýrazněné políčko Zapamatovat tento prohlížeč.

Když kliknete na zaškrtávací políčko Pamatovat si tento prohlížeč , nebudete muset používat 2FA k přihlášení při používání prohlížeče a zařízení, kde jste políčko zaškrtnuli. Pokud uživatelé se zlými úmysly nemůžou získat přístup k vašemu zařízení, povolením 2FA a kliknutím na pamatovat si tento prohlížeč získáte pohodlný přístup pomocí hesla v jednom kroku a přitom si zachováte silnou ochranu 2FA pro veškerý přístup z nedůvěryhodných zařízení. Můžete to udělat na jakémkoli privátním zařízení, které pravidelně používáte.

Tento kurz obsahuje rychlý úvod k povolení 2FA v nové aplikaci ASP.NET MVC. Můj kurz Dvoufaktorové ověřování pomocí SMS a e-mailu s ASP.NET Identity se podrobně zabývá kódem za ukázkou.

Další materiály