ASP.NET aplikasi MVC 5 dengan autentikasi Two-Factor menggunakan SMS dan email

oleh Rick Anderson

Tutorial ini menunjukkan kepada Anda cara membuat aplikasi web ASP.NET MVC 5 dengan Autentikasi Two-Factor. Anda harus menyelesaikan Membuat aplikasi web ASP.NET MVC 5 yang aman dengan masuk, konfirmasi email, dan pengaturan ulang kata sandi sebelum melanjutkan. Anda dapat mengunduh aplikasi yang telah selesai di sini. Unduhan berisi alat bantu debug yang memungkinkan Anda menguji konfirmasi email dan SMS tanpa mengonfigurasi penyedia email atau SMS.

Tutorial ini ditulis oleh Rick Anderson ( Twitter: @RickAndMSFT ).

Membuat aplikasi ASP.NET MVC
Menyiapkan SMS untuk autentikasi dua faktor
Mengaktifkan autentikasi dua faktor
Sumber Daya Tambahan

Membuat aplikasi MVC ASP.NET

Mulailah dengan menginstal dan menjalankan Visual Studio Express 2013 untuk Web atau yang lebih tinggi.

Nota

Peringatan: Anda harus menyelesaikan Membuat aplikasi web ASP.NET MVC 5 yang aman dengan masuk, konfirmasi email, dan pengaturan ulang kata sandi sebelum melanjutkan. Anda harus menginstal Visual Studio 2013 Update 3 atau yang lebih tinggi untuk menyelesaikan tutorial ini.

Buat proyek Web ASP.NET baru dan pilih templat MVC. Formulir Web juga mendukung identitas ASP.NET, sehingga Anda dapat mengikuti langkah-langkah serupa di aplikasi formulir web.
Biarkan autentikasi default sebagai Akun Pengguna Individu. Jika Anda ingin menghosting aplikasi di Azure, biarkan kotak centang dicentang. Nanti dalam tutorial kami akan menyebarkan ke Azure. Anda dapat membuka akun Azure secara gratis.
Atur proyek untuk menggunakan SSL.

Menyiapkan SMS untuk Autentikasi dua faktor

Tutorial ini memberikan instruksi untuk menggunakan Twilio atau ASPSMS tetapi Anda dapat menggunakan penyedia SMS lainnya.

Membuat Akun Pengguna dengan penyedia SMS

Buat akun Twilio atau akun ASPSMS.
Menginstal paket tambahan atau menambahkan referensi layanan

Twilio:
Di Konsol Manajer Paket, masukkan perintah berikut:
Install-Package Twilio

ASPSMS:
Referensi layanan berikut perlu ditambahkan:

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

Namespace:
ASPSMSX2
Mencari tahu info masuk Pengguna Penyedia SMS

Sebaiknya gunakan opsi autentikasi aman yang paling aman. Untuk aplikasi .NET yang disebarkan ke Azure, lihat:

Azure Key Vault dan .NET Aspire menyediakan cara paling aman untuk menyimpan dan mengambil rahasia. Azure Key Vault adalah layanan cloud yang melindungi kunci enkripsi dan rahasia seperti sertifikat, string koneksi, dan kata sandi. Untuk .NET Aspire, lihat komunikasi aman antara host dan integrasi klien.

Hindari Pemberian Kredensial Kata Sandi Pemilik Sumber Daya karena:

Mengekspos kata sandi pengguna ke klien.
Adalah risiko keamanan yang signifikan.
Hanya boleh digunakan ketika alur autentikasi lain tidak dimungkinkan.

Saat aplikasi disebarkan ke server pengujian, variabel lingkungan dapat digunakan untuk mengatur string koneksi ke server database pengujian. Variabel lingkungan umumnya disimpan dalam teks biasa dan tidak terenkripsi. Jika mesin atau proses disusupi, variabel lingkungan dapat diakses oleh pihak yang tidak tepercaya. Sebaiknya jangan gunakan variabel lingkungan untuk menyimpan string koneksi produksi karena ini bukan pendekatan yang paling aman.

Panduan data konfigurasi:

Jangan pernah menyimpan kata sandi atau data sensitif lainnya dalam kode penyedia konfigurasi atau dalam file konfigurasi teks biasa.
Jangan gunakan rahasia produksi di lingkungan pengembangan atau pengujian.
Tentukan rahasia di luar proyek sehingga tidak dapat diterapkan secara tidak sengaja ke repositori kode sumber.

Twilio:
Dari tab Dasbor akun Twilio Anda, salin SID Akun dan token Autentikasi .

ASPSMS:
Dari pengaturan akun Anda, navigasikan ke Userkey dan salin bersama dengan Kata Sandiyang Anda tentukan sendiri.

Kami nantinya akan menyimpan nilai-nilai ini dalam file web.config dalam kunci "SMSAccountIdentification" dan "SMSAccountPassword" . 4. Menentukan PengirimID / Penginisial

Twilio:
Dari tab Angka, salin nomor telepon Twilio Anda.

ASPSMS:
Dalam menu Unlock Originators, buka kunci satu atau beberapa Originator atau pilih Originator alfanumerik (ini tidak didukung oleh semua jaringan).

Kami nantinya akan menyimpan nilai ini dalam file web.config dalam kunci "SMSAccountFrom" . 5. Mentransfer kredensial penyedia SMS ke aplikasi

Buat kredensial dan nomor telepon pengirim tersedia untuk aplikasi. Untuk menjaga hal-hal sederhana, kita akan menyimpan nilai-nilai ini dalam file web.config. Saat menyebarkan ke Azure, kita dapat menyimpan nilai dengan aman di bagian pengaturan aplikasi pada tab konfigurasi situs web.

[!code-xml[Main](aspnet-mvc-5-app-with-sms-and-email-two-factor-authentication/samples/sample1.xml?highlight=8-10)]

> [!WARNING]
> Security - Never store sensitive data in your source code. The account and credentials are added to the code above to keep the sample simple. See [Best practices for deploying passwords and other sensitive data to ASP.NET and Azure](../../../identity/overview/features-api/best-practices-for-deploying-passwords-and-other-sensitive-data-to-aspnet-and-azure.md).

Implementasi transfer data ke penyedia SMS

Konfigurasikan kelas SmsService dalam file App_Start\IdentityConfig.cs.

Bergantung pada penyedia SMS yang digunakan, aktifkan bagian Twilio atau 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
    }
}

Perbarui tampilan Views\Manage\Index.cshtml Razor view: (catatan: jangan hanya menghapus komentar dalam kode keluar, gunakan kode di bawah ini.)

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

Verifikasilah metode tindakan EnableTwoFactorAuthentication dan DisableTwoFactorAuthentication di ManageController yang memiliki 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");
}

Jalankan aplikasi dan masuk dengan akun yang sebelumnya Anda daftarkan.
Klik ID Pengguna Anda, yang mengaktifkan metode tindakan Index di pengontrol Manage.
Klik Tambahkan.
Metode tindakan AddPhoneNumber menampilkan kotak dialog untuk memasukkan nomor telepon yang dapat menerima pesan SMS.
```
// GET: /Account/AddPhoneNumber
public ActionResult AddPhoneNumber()
{
   return View();
}
```
Dalam beberapa detik, Anda akan mendapatkan pesan teks dengan kode verifikasi. Masukkan itu dan tekan Kirim.
Tampilan Kelola memperlihatkan nomor telepon Anda telah ditambahkan.

Mengaktifkan autentikasi dua faktor

Dalam aplikasi yang dihasilkan templat, Anda perlu menggunakan UI untuk mengaktifkan autentikasi dua faktor (2FA). Untuk mengaktifkan 2FA, klik ID pengguna (alias email) Anda di bilah navigasi.

Cuplikan layar yang menampilkan halaman Beranda aplikasi A S P dot NET. Sampel USER I D disorot.

Klik aktifkan 2FA.

Cuplikan layar yang memperlihatkan halaman Pengaturan Akun aplikasi ASP.NET. Two-Factor Autentikasi: Dinonaktifkan, dengan bagian tautan Aktifkan disorot.

Keluar, lalu masuk kembali. Jika Anda telah mengaktifkan email (lihat tutorial saya sebelumnya), Anda dapat memilih SMS atau email untuk 2FA.

Cuplikan layar yang memperlihatkan halaman Kirim Kode Verifikasi aplikasi A S P dot NET. Menu dropdown yang memperlihatkan Kode Telepon dan Kode Email dipilih.

Halaman Verifikasi Kode ditampilkan di mana Anda dapat memasukkan kode (dari SMS atau email).

Cuplikan layar yang memperlihatkan halaman Verifikasi aplikasi ASP.NET untuk 2FA. Di bawah kode sampel, kotak centang dengan Ingatkan browser ini disorot.

Dengan mengklik kotak centang Ingat browser ini, Anda tidak perlu menggunakan 2FA untuk masuk saat menggunakan browser dan perangkat yang Anda gunakan untuk mencentang kotak tersebut. Selama pengguna berbahaya tidak dapat memperoleh akses ke perangkat Anda, mengaktifkan 2FA dan mengklik Ingat browser ini akan memberi Anda akses kata sandi satu langkah yang nyaman, sambil tetap mempertahankan perlindungan 2FA yang kuat untuk semua akses dari perangkat yang tidak tepercaya. Anda dapat melakukan ini pada perangkat privat apa pun yang Anda gunakan secara teratur.

Tutorial ini menyediakan pengenalan cepat untuk mengaktifkan 2FA pada aplikasi MVC ASP.NET baru. Tutorial saya Autentikasi dua faktor menggunakan SMS dan email dengan ASP.NET Identity membahas secara mendetail tentang contoh kode.

Sumber Daya Tambahan

Autentikasi dua faktor menggunakan SMS dan email dengan ASP.NET Identity Masuk ke detail tentang autentikasi dua faktor
Tautan ke Sumber Daya yang Direkomendasikan ASP.NET Identity
Konfirmasi Akun dan Pemulihan Kata Sandi dengan ASP.NET Identity Masuk ke detail selengkapnya tentang pemulihan kata sandi dan konfirmasi akun.
Aplikasi MVC 5 dengan Facebook, Twitter, LinkedIn, dan Google OAuth2 Masuk Tutorial ini menunjukkan cara membuat aplikasi ASP.NET MVC 5 dengan otorisasi Facebook dan Google OAuth 2. Ini juga menunjukkan cara menambahkan data tambahan ke database Identitas.
Menyebarkan aplikasi MVC ASP.NET Aman dengan Keanggotaan, OAuth, dan SQL Database ke Azure Web. Tutorial ini menambahkan penyebaran Azure, cara mengamankan aplikasi Anda dengan peran, cara menggunakan API keanggotaan untuk menambahkan pengguna dan peran, dan fitur keamanan tambahan.
Membuat aplikasi Google untuk OAuth 2 dan menghubungkan aplikasi ke proyek
Membuat aplikasi di Facebook dan menghubungkan aplikasi ke proyek
Menyiapkan SSL di Proyek
Cara menyiapkan lingkungan pengembangan C# dan ASP.NET MVC Anda

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2025-02-04