Membuat aplikasi ASP.NET Web Forms dengan SMS Two-Factor Authentication (C#)

2025-01-06

Tutorial ini menunjukkan kepada Anda cara membuat aplikasi ASP.NET Web Forms dengan Autentikasi Two-Factor. Tutorial ini dirancang untuk melengkapi tutorial berjudul Membuat aplikasi ASP.NET Web Forms yang aman dengan pendaftaran pengguna, konfirmasi email, dan pengaturan ulang kata sandi. Selain itu, tutorial ini didasarkan pada tutorial MVC Rick Anderson.

Perkenalan

Tutorial ini memandu Anda melalui langkah-langkah yang diperlukan untuk membuat aplikasi ASP.NET Web Forms yang mendukung autentikasi Two-Factor menggunakan Visual Studio. Two-Factor Authentication adalah langkah autentikasi pengguna tambahan. Langkah tambahan ini menghasilkan nomor identifikasi pribadi (PIN) yang unik selama masuk. PIN biasanya dikirim ke pengguna sebagai email atau pesan SMS. Pengguna aplikasi Anda kemudian memasukkan PIN sebagai ukuran autentikasi tambahan saat masuk.

Tugas dan Informasi Tutorial:

Membuat Aplikasi ASP.NET Web Forms
Menyiapkan SMS dan Two-Factor Autentikasi
Mengaktifkan Autentikasi Two-Factor untuk Pengguna Terdaftar
Sumber Daya Tambahan

Membuat Aplikasi ASP.NET Web Forms

Mulailah dengan menginstal dan menjalankan Visual Studio Express 2013 untuk Web atau Visual Studio 2013. Juga instal Visual Studio 2013 Update 3 atau yang lebih tinggi. Selain itu, Anda harus membuat akun Twilio, seperti yang dijelaskan di bawah ini.

Nota

Penting: Anda harus menginstal Visual Studio 2013 Update 3 atau yang lebih tinggi untuk menyelesaikan tutorial ini.

Buat proyek baru (File -Proyek Baru ) dan pilih templat Aplikasi Web ASP.NET bersama dengan .NET Framework versi 4.5.2 dari kotak dialog Proyek Baru.
Dari kotak dialog Proyek ASP.NET Baru, pilih templat Formulir Web. Biarkan autentikasi default sebagai Akun Pengguna Individual. Kemudian, klik OK untuk membuat proyek baru.
Aktifkan Secure Sockets Layer (SSL) untuk proyek. Ikuti langkah-langkah yang tersedia di bagian Aktifkan SSL untuk Proyek dari seri tutorial Memulai dengan Formulir Web.
Di Visual Studio, buka Package Manager Console (Tools ->NuGet Package Manger ->Package Manager Console), dan masukkan perintah berikut:
Install-Package Twilio

Pengaturan SMS dan Autentikasi Two-Factor

Tutorial ini menggunakan Twilio, tetapi Anda dapat menggunakan penyedia SMS apa pun.

Buat akun Twilio.
Dari tab Dasbor akun Twilio Anda, salin SID Akun dan Token Autentikasi . Anda akan menambahkannya ke aplikasi Anda nanti.
Dari tab Numbers, salin juga nomor Twilio Anda.
Siapkan SID Akun Twilio, Token Auth , dan nomor telepon untuk tersedia di aplikasi. Untuk menjaga hal-hal sederhana, Anda akan menyimpan nilai-nilai ini dalam file web.config. Saat menyebarkan ke Azure, Anda dapat menyimpan nilai dengan aman di bagian appSettings di tab konfigurasi situs web. Selain itu, saat menambahkan nomor telepon, hanya gunakan nomor.
Perhatikan bahwa Anda juga dapat menambahkan kredensial SendGrid. SendGrid adalah layanan pemberitahuan email. Untuk detail tentang cara mengaktifkan SendGrid, lihat bagian 'Hook Up SendGrid' dari tutorial berjudul Membuat Aplikasi Formulir Web ASP.NET Aman dengan pendaftaran pengguna, konfirmasi email, dan pengaturan ulang kata sandi.
```
</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>
```
Peringatan

Keamanan - Jangan pernah menyimpan data sensitif dalam kode sumber Anda. Dalam contoh ini, akun dan kredensial disimpan di bagian appSettings dari file Web.config. Di Azure, Anda dapat menyimpan nilai-nilai ini dengan aman di tab Konfigurasikan di portal Microsoft Azure. Untuk informasi terkait, lihat topik Rick Anderson berjudul Praktik terbaik untuk menyebarkan kata sandi dan data sensitif lainnya ke ASP.NET dan Azure.

Konfigurasikan kelas SmsService dalam file App_Start\IdentityConfig.cs dengan membuat perubahan berikut disorot dengan warna kuning:

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

Tambahkan pernyataan using berikut ke awal file IdentityConfig.cs:

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

Perbarui file Account/Manage.aspx dengan menghapus baris yang disorot dengan warna kuning:

<%@ 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>

Di handler Page_Load kode Manage.aspx.cs belakang, batalkan komentar baris kode yang disorot dengan warna kuning sehingga muncul sebagai berikut:

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

Di dalam file codebehind Account/TwoFactorAuthenticationSignIn.aspx.cs. Perbarui handler Page_Load dengan menambahkan kode berikut yang ditandai kuning.

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

Dengan membuat perubahan kode di atas, DropDownList "Penyedia" yang berisi opsi autentikasi tidak akan diatur ulang ke nilai pertama. Ini akan memungkinkan pengguna untuk berhasil memilih semua opsi untuk digunakan saat mengautentikasi, bukan hanya yang pertama.

Di Solution Explorer, klik kanan Default.aspx dan pilih Atur Sebagai Halaman Mulai.
Dengan menguji aplikasi Anda, pertama-tama buat aplikasi (Ctrl+Shift+B) lalu jalankan aplikasi (F5) dan pilih Daftarkan untuk membuat akun pengguna baru atau pilih Masuk jika akun pengguna telah terdaftar.
Setelah Anda (sebagai pengguna) masuk, klik ID Pengguna (alamat email) di bilah navigasi untuk menampilkan halaman Kelola Akun (Manage.aspx).
Klik Tambahkan di samping Nomor Telepon di halaman Kelola Akun.
Tambahkan nomor telepon tempat Anda (sebagai pengguna) ingin menerima pesan SMS (pesan teks) dan klik tombol Kirim.

Pada titik ini, aplikasi akan menggunakan kredensial dari Web.config untuk menghubungi Twilio. Pesan SMS (pesan teks) akan dikirim ke telepon yang terkait dengan akun pengguna. Anda dapat memverifikasi bahwa pesan Twilio dikirim dengan melihat dasbor Twilio.
Dalam beberapa detik, ponsel yang terkait dengan akun pengguna akan mendapatkan pesan teks yang berisi kode verifikasi. Masukkan kode verifikasi dan tekan Kirim.

Mengaktifkan Autentikasi Two-Factor untuk Pengguna Terdaftar

Pada titik ini, Anda telah mengaktifkan autentikasi dua faktor untuk aplikasi Anda. Agar pengguna menggunakan autentikasi dua faktor, mereka cukup mengubah pengaturan mereka menggunakan UI.

Sebagai pengguna aplikasi, Anda dapat mengaktifkan autentikasi dua faktor untuk akun tertentu dengan mengklik ID pengguna (alias email) di bilah navigasi untuk menampilkan halaman Kelola Akun. Kemudian, klik tautan Aktifkan untuk mengaktifkan autentikasi dua faktor untuk akun tersebut.
Log keluar, lalu masuk kembali. Jika Anda telah mengaktifkan email, Anda dapat memilih SMS atau email untuk autentikasi dua faktor. Jika Anda belum mengaktifkan email, lihat tutorial berjudul Membuat Aplikasi Formulir Web ASP.NET Aman dengan Pendaftaran Pengguna, Konfirmasi Email, dan Pengaturan Ulang Kata Sandi.
Halaman autentikasi Two-Factor ditampilkan di mana Anda dapat memasukkan kode (dari SMS atau email).
Mengklik kotak centang Ingat browser ini akan membebaskan Anda dari kebutuhan untuk menggunakan autentikasi dua faktor untuk masuk saat menggunakan browser dan perangkat tempat Anda mencentang kotak. Selama pengguna berbahaya tidak dapat memperoleh akses ke perangkat Anda, mengaktifkan autentikasi dua faktor dan mengklik Ingat browser ini akan memberi Anda akses kata sandi satu langkah yang nyaman, sambil tetap mempertahankan perlindungan autentikasi dua faktor yang kuat untuk semua akses dari perangkat yang tidak tepercaya. Anda dapat melakukan ini pada perangkat privat apa pun yang Anda gunakan secara teratur.

Bagikan melalui

Membuat aplikasi ASP.NET Web Forms dengan SMS Two-Factor Authentication (C#)

Perkenalan

Tugas dan Informasi Tutorial:

Membuat Aplikasi ASP.NET Web Forms

Pengaturan SMS dan Autentikasi Two-Factor

Mengaktifkan Autentikasi Two-Factor untuk Pengguna Terdaftar

Sumber Daya Tambahan

Saran dan Komentar

Sumber Daya Tambahan: