ASP.NET Web Forms-alkalmazás létrehozása SMS Two-Factor-hitelesítéssel (C#)

készítette: Erik Reitan

Ez az oktatóanyag bemutatja, hogyan hozhat létre ASP.NET Web Forms-alkalmazást Two-Factor-hitelesítéssel. Ez az oktatóanyag a Biztonságos ASP.NET Web Forms-alkalmazás létrehozása felhasználói regisztrációval, e-mail-megerősítéssel és jelszó-visszaállítássalcímű oktatóanyag kiegészítésére készült. Ezenkívül ez az oktatóanyag Rick Anderson MVC-oktatóanyagánalapul.

Bevezetés

Ez az oktatóanyag végigvezeti egy ASP.NET Web Forms-alkalmazás létrehozásához szükséges lépéseken, amelyek támogatják a Two-Factor-hitelesítést a Visual Studióval. Two-Factor Hitelesítés egy további felhasználói hitelesítési lépés. Ez a további lépés egy egyedi személyes azonosítószámot (PIN-kódot) hoz létre a bejelentkezés során. A PIN-kódot általában e-mailben vagy SMS-üzenetként küldik el a felhasználónak. Az alkalmazás felhasználója a bejelentkezéskor további hitelesítési mértékként adja meg a PIN-kódot.

Oktatóanyagi feladatok és információk:

ASP.NET Web Forms-alkalmazás létrehozása
SMS és a Two-Factor hitelesítés beállítása
A Two-Factor hitelesítés engedélyezése regisztrált felhasználó számára
További erőforrások

ASP.NET Web Forms-alkalmazás létrehozása

Első lépésként telepítse és futtassa Visual Studio Express 2013 for Web vagy Visual Studio 2013. Telepítse a Visual Studio 2013 Update 3 vagy ennél újabb verzióját is. Emellett létre kell hoznia egy Twilio-fiókot is, az alábbiak szerint.

Jegyzet

Fontos: Az oktatóanyag elvégzéséhez telepítenie kell Visual Studio 2013 3. frissítésének vagy újabb verzióját.

Hozzon létre egy új projektet (Fájl ->Új projekt) és válassza ki a ASP.NET webalkalmazás sablont és a .NET-keretrendszer 4.5.2-es verzióját az Új projekt párbeszédpanelen.
Az Új ASP.NET Projekt párbeszédpanelen válassza ki a Webes űrlapok sablont. Hagyja meg az alapértelmezett hitelesítést egyéni felhasználói fiókok. Ezután kattintson OK gombra az új projekt létrehozásához.
Engedélyezze a Biztonságos rétegkapcsolat (SSL) használatát a projekthez. Kövesse azokat a lépéseket, amelyek az SSL engedélyezése a projekt számára szakaszban találhatók, az Első lépések a Webes űrlapokkal című oktatóanyag-sorozatrészében.
A Visual Studióban nyissa meg a Csomagkezelő konzol (Eszközök ->NuGet-csomagkezelő ->Csomagkezelő konzol), és írja be a következő parancsot:
Install-Package Twilio

SMS és Two-Factor hitelesítés beállítása

Ez az oktatóanyag a Twilio-t használja, de bármilyen SMS-szolgáltatót használhat.

Hozzon létre egy Twilio-fiókot.
A Twilio-fiók Irányítópult lapján másolja ki a fiók SID- és hitelesítési jogkivonatát. Később hozzáadja őket az alkalmazáshoz.
A Számok lapon másolja ki a Twilio telefonszámát is.
A Twilio fiók SID-, hitelesítési jogkivonat és telefonszámának elérhetővé tétele az alkalmazás számára. Az egyszerűség érdekében ezeket az értékeket a web.config fájlban fogja tárolni. Az Azure-ban való üzembe helyezéskor az értékeket biztonságosan tárolhatja a webhely konfigurálás lapjának appSettings szakaszában. A telefonszám hozzáadásakor is csak számokat használjon.
Figyelje meg, hogy a SendGrid hitelesítő adatait is hozzáadhatja. A SendGrid egy e-mailes értesítési szolgáltatás. A SendGrid engedélyezésével kapcsolatos részletekért tekintse meg a Biztonságos ASP.NET webűrlapok alkalmazás létrehozása felhasználói regisztrációval, e-mail-megerősítéssel és jelszó-visszaállítással című oktatóanyag "SendGrid összekapcsolása" című szakaszát.
```
</connectionStrings>
  <appSettings>
        
    <add key="emailServiceUserName" value="[EmailServiceAccountUserName]" />
    <add key="emailServicePassword" value="[EmailServiceAccountPassword]" />
    
    <add key="SMSSID" value="[SMSServiceAccountSID]" />
    <add key="SMSAuthToken" value="[SMSServiceAuthorizationToken]" />
    <add key="SMSPhoneNumber" value="+[SMSPhoneNumber]" />    
  </appSettings>
  <system.web>
```
Figyelmeztetés

Biztonság – Soha ne tároljon bizalmas adatokat a forráskódban. Ebben a példában a fiók és a hitelesítő adatok a Web.config fájl appSettings szakaszában vannak tárolva. Az Azure-ban ezeket az értékeket biztonságosan tárolhatja az Azure Portal Konfigurálás lapján. A kapcsolódó információkért tekintse meg Rick Anderson a jelszavak és más bizalmas adatok ASP.NET és Azurevaló üzembe helyezésének ajánlott eljárásait ismertető témakört.

Konfigurálja a SmsService osztályt a App_Start\IdentityConfig.cs fájlban a következő, sárga színnel kiemelt módosításokkal:

public class SmsService : IIdentityMessageService
{
    public Task SendAsync(IdentityMessage message)
    {
        var Twilio = new TwilioRestClient(
           ConfigurationManager.AppSettings["SMSSID"],
           ConfigurationManager.AppSettings["SMSAuthToken"]
        );
        var result = Twilio.SendMessage(
            ConfigurationManager.AppSettings["SMSPhoneNumber"],
           message.Destination, message.Body);

        // Status is one of Queued, Sending, Sent, Failed or null if the number is not valid
        Trace.TraceInformation(result.Status);

        // Twilio doesn't currently have an async API, so return success.
        return Task.FromResult(0);
    }
}

Adja hozzá a következő using utasításokat a IdentityConfig.cs fájl elejéhez:

using Twilio;
using System.Net;
using System.Configuration;
using System.Diagnostics;

Frissítse a Fiók/Manage.aspx fájlt a sárga színnel kiemelt sorok eltávolításával:

<%@ Page Title="Manage Account" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Manage.aspx.cs" Inherits="WebFormsTwoFactor.Account.Manage" %>

<%@ Register Src="~/Account/OpenAuthProviders.ascx" TagPrefix="uc" TagName="OpenAuthProviders" %>

<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: Title %>.</h2>

    <div>
        <asp:PlaceHolder runat="server" ID="successMessage" Visible="false" ViewStateMode="Disabled">
            <p class="text-success"><%: SuccessMessage %></p>
        </asp:PlaceHolder>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-horizontal">
                <h4>Change your account settings</h4>
                <hr />
                <dl class="dl-horizontal">
                    <dt>Password:</dt>
                    <dd>
                        <asp:HyperLink NavigateUrl="/Account/ManagePassword" Text="[Change]" Visible="false" ID="ChangePassword" runat="server" />
                        <asp:HyperLink NavigateUrl="/Account/ManagePassword" Text="[Create]" Visible="false" ID="CreatePassword" runat="server" />
                    </dd>
                    <dt>External Logins:</dt>
                    <dd><%: LoginsCount %>
                        <asp:HyperLink NavigateUrl="/Account/ManageLogins" Text="[Manage]" runat="server" />

                    </dd>
                    <%--
                        Phone Numbers can used as a second factor of verification in a two-factor authentication system.
                        See <a href="https://go.microsoft.com/fwlink/?LinkId=313242">this article</a>
                        for details on setting up this ASP.NET application to support two-factor authentication using SMS.
                        Uncomment the following block after you have set up two-factor authentication
                    --%>

                    <dt>Phone Number:</dt>
                    <%--
                    <% if (HasPhoneNumber)
                       { %>
                    <dd>
                        <asp:HyperLink NavigateUrl="/Account/AddPhoneNumber" runat="server" Text="[Add]" />
                    </dd>
                    <% }
                       else
                       { %>
                    <dd>
                        <asp:Label Text="" ID="PhoneNumber" runat="server" />
                        <asp:HyperLink NavigateUrl="/Account/AddPhoneNumber" runat="server" Text="[Change]" /> &nbsp;|&nbsp;
                        <asp:LinkButton Text="[Remove]" OnClick="RemovePhone_Click" runat="server" />
                    </dd>
                    <% } %>
                    --%>

                    <dt>Two-Factor Authentication:</dt>
                    <dd>
                        <p>
                            There are no two-factor authentication providers configured. See <a href="https://go.microsoft.com/fwlink/?LinkId=313242">this article</a>
                            for details on setting up this ASP.NET application to support two-factor authentication.
                        </p>
                        <% if (TwoFactorEnabled)
                          { %> 
                        <%--
                        Enabled
                        <asp:LinkButton Text="[Disable]" runat="server" CommandArgument="false" OnClick="TwoFactorDisable_Click" />
                        --%>
                        <% }
                          else
                          { %> 
                        <%--
                        Disabled
                        <asp:LinkButton Text="[Enable]" CommandArgument="true" OnClick="TwoFactorEnable_Click" runat="server" />
                        --%>
                        <% } %>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</asp:Content>

A Manage.aspx.cs kód mögötti Page_Load kezelőben távolítsa el a sárga színnel kiemelt kódsor kommentjét, hogy az a következőképpen jelenjen meg:

protected void Page_Load()
{
    var manager = Context.GetOwinContext().GetUserManager<ApplicationUserManager>();

    HasPhoneNumber = String.IsNullOrEmpty(manager.GetPhoneNumber(User.Identity.GetUserId()));

    // Enable this after setting up two-factor authentientication
    PhoneNumber.Text = manager.GetPhoneNumber(User.Identity.GetUserId()) ?? String.Empty;

    TwoFactorEnabled = manager.GetTwoFactorEnabled(User.Identity.GetUserId());

    LoginsCount = manager.GetLogins(User.Identity.GetUserId()).Count;

    var authenticationManager = HttpContext.Current.GetOwinContext().Authentication;

    if (!IsPostBack)
    {
        // Determine the sections to render
        if (HasPassword(manager))
        {
            ChangePassword.Visible = true;
        }
        else
        {
            CreatePassword.Visible = true;
            ChangePassword.Visible = false;
        }

        // Render success message
        var message = Request.QueryString["m"];
        if (message != null)
        {
            // Strip the query string from action
            Form.Action = ResolveUrl("~/Account/Manage");

            SuccessMessage =
                message == "ChangePwdSuccess" ? "Your password has been changed."
                : message == "SetPwdSuccess" ? "Your password has been set."
                : message == "RemoveLoginSuccess" ? "The account was removed."
                : message == "AddPhoneNumberSuccess" ? "Phone number has been added"
                : message == "RemovePhoneNumberSuccess" ? "Phone number was removed"
                : String.Empty;
            successMessage.Visible = !String.IsNullOrEmpty(SuccessMessage);
        }
    }
}

A fiók/TwoFactorAuthenticationSignIn.aspx.cskódrészletében frissítse a Page_Load kezelőt a következő, sárga színnel kiemelt kód hozzáadásával:
```
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        var userId = signinManager.GetVerifiedUserId<ApplicationUser, string>();
        if (userId == null)
        {
            Response.Redirect("/Account/Error", true);
        }
        var userFactors = manager.GetValidTwoFactorProviders(userId);
        Providers.DataSource = userFactors.Select(x => x).ToList();
        Providers.DataBind();
    }
}
```
A fenti kód módosításával a hitelesítési beállításokat tartalmazó "Szolgáltatók" legördülő lista nem lesz visszaállítva az első értékre. Ez lehetővé teszi, hogy a felhasználó sikeresen kiválassza az összes, hitelesítéskor használni kívánt beállítást, nem csak az elsőt.
A Megoldáskezelőablakban kattintson a jobb gombbal a Default.aspx fájlra, majd válassza a Kezdőlapként beállításlehetőséget.
Az alkalmazás tesztelésével először hozza létre az alkalmazást (Ctrl+Shift+B), majd futtassa az alkalmazást (F5), majd válassza a Regisztrálás lehetőséget egy új felhasználói fiók létrehozásához, vagy válassza a Bejelentkezés lehetőséget, ha a felhasználói fiók már regisztrálva van.
Miután ön (mint felhasználó) bejelentkezett, kattintson a navigációs sáv felhasználói azonosítójára (e-mail-címére) a Fiók kezelése lap (Manage.aspx) megjelenítéséhez.
A Fiókkezelés lapon kattintson Telefonszám melletti hozzáadása elemre.
Adja hozzá azt a telefonszámot, ahová Ön (felhasználóként) SMS-üzeneteket (szöveges üzeneteket) szeretne kapni, majd kattintson a Küldés gombra.

Ezen a ponton az alkalmazás a Web.config hitelesítő adataival lép kapcsolatba a Twilioval. A rendszer SMS-üzenetet (szöveges üzenetet) küld a felhasználói fiókhoz társított telefonra. A Twilio-irányítópult megtekintésével ellenőrizheti, hogy a Twilio-üzenet el lett-e küldve.
Néhány másodperc múlva a felhasználói fiókhoz társított telefon kap egy szöveges üzenetet, amely tartalmazza az ellenőrző kódot. Írja be az ellenőrző kódot, és nyomja meg a Küldésgombot.

Regisztrált felhasználó Two-Factor hitelesítésének engedélyezése

Ezen a ponton engedélyezte a kéttényezős hitelesítést az alkalmazáshoz. Ahhoz, hogy a felhasználó kéttényezős hitelesítést használjon, egyszerűen módosíthatja a beállításait a felhasználói felületen.

Az alkalmazás felhasználójaként engedélyezheti a kéttényezős hitelesítést az adott fiókhoz, ha a navigációs sávon a felhasználói azonosítóra (e-mail alias) kattintva megjeleníti a Fiók kezelése lapot. Ezután kattintson a engedélyezése hivatkozásra a fiók kétfaktoros hitelesítésének engedélyezéséhez.
Jelentkezzen ki, majd jelentkezzen be újra. Ha engedélyezte az e-maileket, választhat SMS-t vagy e-mailt a kéttényezős hitelesítéshez. Ha még nem engedélyezte az e-maileket, tekintse meg a Biztonságos ASP.NET Web Forms-alkalmazás létrehozása felhasználói regisztrációval, e-mail-megerősítéssel és jelszó-visszaállítássalcímű oktatóanyagot.
Megjelenik a Two-Factor Hitelesítési oldal, ahol beírhatja a kódot (SMS-ből vagy e-mailből).
A Ne feledje ezt a böngészőt jelölőnégyzetre kattintva nem kell kéttényezős hitelesítést használnia a bejelentkezéshez, amikor a böngészőt és az eszközt használja, ahol a jelölőnégyzetet bejelölte. Mindaddig, amíg a rosszindulatú felhasználók nem férnek hozzá az eszközéhez, a kéttényezős hitelesítés engedélyezése és a Emlékezzen erre a böngészőre opció használata kényelmes egylépéses jelszó-hozzáférést nyújt, miközben megőrzi a kétfaktoros hitelesítés erős védelmét minden nem megbízható eszközről történő hozzáférés esetén. Ezt bármely rendszeresen használt magáneszközön megteheti.

További erőforrások

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2025-01-06