Menambahkan Keamanan dan Keanggotaan ke Situs Halaman Web (Razor) ASP.NET

Artikel
07/13/2023

Artikel ini menjelaskan cara mengamankan situs web ASP.NET Web Pages (Razor) sehingga beberapa halaman hanya tersedia untuk orang yang masuk. (Anda juga akan melihat cara membuat halaman yang dapat diakses siapa pun.)

Yang akan Anda pelajari:

Cara membuat situs web yang memiliki halaman pendaftaran dan halaman masuk sehingga untuk beberapa halaman Anda hanya dapat membatasi akses ke anggota.

Cara membuat halaman publik dan khusus anggota.

Cara menentukan peran, yang merupakan grup yang memiliki izin keamanan yang berbeda di situs Anda, dan cara menetapkan pengguna ke peran.

Cara menggunakan CAPTCHA untuk mencegah program otomatis (bot) membuat akun anggota.

Ini adalah fitur ASP.NET yang diperkenalkan dalam artikel:

Templat Situs Pemula WebMatrix.

Pembantu WebSecurity dan Roles kelas.

Pembantu ReCaptcha .

Versi perangkat lunak yang digunakan dalam tutorial

Halaman Web ASP.NET (Razor) 2

WebMatrix 3

Pustaka Pembantu Web ASP.NET

Anda dapat menyiapkan situs web Anda sehingga pengguna dapat masuk ke dalamnya — yaitu, sehingga situs mendukung keanggotaan. Ini dapat berguna karena berbagai alasan. Misalnya, situs Anda mungkin memiliki halaman yang seharusnya hanya tersedia untuk anggota. Dalam beberapa kasus, Anda mungkin mengharuskan pengguna untuk masuk untuk mengirimi Anda umpan balik atau meninggalkan komentar.

Bahkan jika situs web Anda mendukung keanggotaan, pengguna tidak selalu diharuskan untuk masuk sebelum mereka menggunakan beberapa halaman di situs. Pengguna yang tidak masuk dikenal sebagai pengguna anonim.

Pengguna dapat mendaftar di situs web Anda dan kemudian dapat masuk ke situs. Situs web memerlukan nama pengguna (alamat email) dan kata sandi untuk mengonfirmasi bahwa pengguna adalah siapa yang mereka klaim. Proses masuk dan mengonfirmasi identitas pengguna ini dikenal sebagai autentikasi.

Anda dapat menyiapkan keamanan dan keanggotaan dengan cara yang berbeda:

Jika Anda menggunakan WebMatrix, cara mudahnya adalah membuat sebagai situs baru berdasarkan templat Situs Pemula . Templat ini sudah dikonfigurasi untuk keamanan dan keanggotaan dan sudah memiliki halaman pendaftaran, halaman masuk, dan sebagainya.

Situs yang dibuat oleh templat juga memiliki opsi untuk memungkinkan pengguna masuk menggunakan situs eksternal seperti Facebook, Google, atau Twitter.
Jika Anda ingin menambahkan keamanan ke situs yang sudah ada, atau jika Anda tidak ingin menggunakan templat Situs Pemula , Anda bisa membuat halaman pendaftaran Anda sendiri, halaman masuk, dan sebagainya.

Artikel ini berfokus pada opsi pertama - cara menambahkan keamanan dengan menggunakan templat Situs Pemula . Ini juga menyediakan beberapa informasi dasar tentang cara menerapkan keamanan Anda sendiri dan kemudian menyediakan tautan ke informasi lebih lanjut tentang cara melakukannya. Ada juga informasi tentang cara mengaktifkan login eksternal, yang dijelaskan secara lebih rinci dalam artikel terpisah.

Membuat Keamanan Situs Web Menggunakan Templat Situs Pemula

Di WebMatrix, Anda bisa menggunakan templat Situs Pemula untuk membuat situs web yang berisi berikut ini:

Database yang digunakan untuk menyimpan nama pengguna dan kata sandi untuk anggota Anda.
Halaman pendaftaran tempat pengguna anonim (baru) dapat mendaftar.
Halaman masuk dan keluar.
Halaman pemulihan dan reset kata sandi.

Prosedur berikut ini menjelaskan cara membuat situs dan mengonfigurasinya.

Mulai WebMatrix dan di halaman Mulai Cepat , pilih Situs Dari Templat.
Pilih templat Situs Pemula lalu klik OK. WebMatrix membuat situs baru.
Di panel kiri, klik pemilih ruang kerja File .
Di folder akar situs web Anda, buka file _AppStart.cshtml , yang merupakan file khusus yang digunakan untuk berisi pengaturan global. Ini berisi beberapa pernyataan yang dikomentari menggunakan // karakter:
```
//WebMail.SmtpServer = "mailserver.example.com";
//WebMail.EnableSsl = true;
//WebMail.UserName = "username@example.com";
//WebMail.Password = "your-password";
//WebMail.From = "your-name-here@example.com";
```
Pernyataan ini mengonfigurasi pembantu WebMail , yang dapat digunakan untuk mengirim email. Sistem keanggotaan dapat menggunakan email untuk mengirim pesan konfirmasi saat pengguna mendaftar atau ketika mereka ingin mengubah kata sandi mereka. (Misalnya, setelah pengguna mendaftar, mereka mendapatkan email yang menyertakan tautan yang dapat mereka klik untuk menyelesaikan proses pendaftaran.)

Mengirim email memerlukan akses ke server SMTP, seperti yang dijelaskan dalam Menambahkan Email ke Situs Halaman Web ASP.NET. Anda akan menyimpan pengaturan email di file _AppStart.cshtml pusat ini sehingga Anda tidak perlu mengodekannya berulang kali ke setiap halaman yang dapat mengirim email. (Anda tidak perlu mengonfigurasi pengaturan SMTP untuk menyiapkan database pendaftaran; Anda hanya memerlukan pengaturan SMTP jika Anda ingin memvalidasi pengguna dari alias email mereka dan membiarkan pengguna mengatur ulang kata sandi yang terlupakan.)
Batalkan komentar pernyataan dengan menghapus // dari di depan masing-masing pernyataan.

Jika Anda tidak ingin menyiapkan konfirmasi email, Anda dapat melewati langkah ini dan langkah berikutnya. Jika nilai SMTP tidak diatur, akun baru segera tersedia tanpa email konfirmasi.
Ubah pengaturan terkait email berikut dalam kode:
- Atur WebMail.SmtpServer ke nama server SMTP yang dapat Anda akses.
- Biarkan WebMail.EnableSsl diatur ke true. Pengaturan ini mengamankan kredensial yang dikirim ke server SMTP dengan mengenkripsinya.
- Atur WebMail.UserName ke nama pengguna untuk akun server SMTP Anda.
- Atur WebMail.Password ke kata sandi untuk akun server SMTP Anda.
- Atur WebMail.From ke alamat email Anda sendiri. Ini adalah alamat email tempat pesan dikirim.
  
  Catatan
  
  Tips Untuk informasi tambahan tentang nilai untuk properti ini, lihat Mengonfigurasi Pengaturan Email dalam Menyesuaikan Perilaku Site-Wide untuk Halaman Web ASP.NET.
Simpan dan tutup _AppStart.cshtml.
Jalankan halaman Default.cshtml di browser.
Catatan

Jika Anda melihat kesalahan yang memberi tahu Anda bahwa properti harus berupa contoh ExtendedMembershipProvider, situs mungkin tidak dikonfigurasi untuk menggunakan sistem keanggotaan halaman web ASP.NET (SimpleMembership). Ini kadang-kadang dapat terjadi jika server penyedia hosting dikonfigurasi secara berbeda dari server lokal Anda. Untuk memperbaikinya, tambahkan elemen berikut ke file Web.config situs:
```
<appSettings>
    <add key="enableSimpleMembership" value="true" />
</appSettings>
```
Tambahkan elemen ini sebagai turunan dari <configuration> elemen dan sebagai serekan <system.web> elemen.
Di sudut kanan atas halaman, klik tautan Daftar. Halaman Register.cshtml ditampilkan.
Masukkan nama pengguna dan kata sandi lalu klik Daftar.

Saat Anda membuat situs web dari templat Situs Pemula , database bernama StarterSite.sdf dibuat di folder App_Data situs. Selama pendaftaran, informasi pengguna Anda ditambahkan ke database. Jika Anda mengatur nilai SMTP, pesan dikirim ke alamat email yang Anda gunakan sehingga Anda dapat menyelesaikan pendaftaran.
Buka program email Anda dan temukan pesan, yang akan memiliki kode konfirmasi dan hyperlink ke situs.
Klik hyperlink untuk mengaktifkan akun Anda. Hyperlink konfirmasi membuka halaman konfirmasi pendaftaran.
Klik tautan Masuk , lalu masuk menggunakan akun yang Anda daftarkan.

Setelah Anda masuk, tautan Masuk dan Daftar digantikan oleh tautan Keluar . Nama masuk Anda ditampilkan sebagai tautan. (Tautan ini memungkinkan Anda membuka halaman tempat Anda dapat mengubah kata sandi.)

Catatan

Secara default, ASP.NET halaman web mengirim kredensial ke server dalam teks yang jelas (sebagai teks yang dapat dibaca manusia). Situs produksi harus menggunakan HTTP aman (https://, juga dikenal sebagai lapisan soket aman atau SSL) untuk mengenkripsi informasi sensitif yang dipertukarkan dengan server. Anda dapat memerlukan pesan email untuk dikirim menggunakan SSL dengan mengatur WebMail.EnableSsl=true seperti pada contoh sebelumnya. Untuk informasi selengkapnya tentang SSL, lihat Mengamankan Komunikasi Web: Sertifikat, SSL, dan https://.

Fungsionalitas Keanggotaan Tambahan di Situs

Situs Anda berisi fungsionalitas lain yang memungkinkan pengguna mengelola akun mereka. Pengguna dapat melakukan hal berikut:

Ubah kata sandi mereka. Setelah masuk, mereka dapat mengklik nama pengguna (yang merupakan tautan). Ini membawa mereka ke halaman di mana mereka dapat membuat kata sandi baru (Account/ChangePassword.cshtml).
Pulihkan kata sandi yang terlupakan. Pada halaman masuk, ada tautan (Apakah Anda lupa kata sandi Anda?) yang membawa pengguna ke halaman (Akun/ForgotPassword.cshtml) tempat mereka dapat memasukkan alamat email. Situs mengirimi mereka pesan email yang memiliki tautan yang dapat mereka klik untuk mengatur kata sandi baru (Account/PasswordReset.cshtml).

Anda juga dapat mengizinkan pengguna juga dapat masuk menggunakan situs eksternal, seperti yang dijelaskan nanti.

Membuat Halaman Members-Only

Untuk saat ini, siapa pun dapat menelusuri ke halaman mana pun di situs web Anda. Tetapi Anda mungkin ingin memiliki halaman yang hanya tersedia untuk orang yang telah masuk (yaitu, kepada anggota). ASP.NET memungkinkan Anda membuat halaman yang hanya dapat diakses oleh anggota yang masuk. Biasanya, jika pengguna anonim mencoba mengakses halaman khusus anggota, Anda mengalihkannya ke halaman masuk.

Dalam prosedur ini, Anda akan membuat folder yang akan berisi halaman yang hanya tersedia untuk pengguna yang masuk.

Di akar situs, buat folder baru. (Di pita, klik panah di bawah Baru lalu pilih Folder Baru.)
Beri nama folder baru Anggota.
Di dalam folder Anggota , buat halaman baru dan beri nama MembersInformation.cshtml.
Ganti konten yang sudah ada dengan kode dan markup berikut:
```
@{
    if (!WebSecurity.IsAuthenticated) {
        Response.Redirect("~/Account/Login?returnUrl="
            + Request.Url.LocalPath);
    }
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Members Information";
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Members Information</title>
  </head>
  <body>
    <p>You can only see this information if you've logged into the site.</p>
  </body>
</html>
```
Kode ini menguji IsAuthenticated properti WebSecurity objek , yang mengembalikan true jika pengguna telah masuk. Jika pengguna tidak masuk, kode akan memanggil Response.Redirect untuk mengirim pengguna ke halaman Login.cshtml di folder Akun .

URL pengalihan menyertakan returnUrl nilai string kueri yang menggunakan Request.Url.LocalPath untuk mengatur jalur halaman saat ini. Jika Anda mengatur returnUrl nilai dalam string kueri seperti ini (dan jika URL yang dikembalikan adalah jalur lokal), halaman masuk akan mengembalikan pengguna ke halaman ini setelah mereka masuk.

Kode ini juga mengatur halaman _SiteLayout.cshtml sebagai halaman tata letaknya. (Untuk informasi selengkapnya tentang halaman tata letak, lihat Membuat Tata Letak Konsisten di ASP.NET Situs Halaman Web.)
Jalankan situs. Jika Anda masih masuk, klik tombol Keluar di bagian atas halaman.
Di browser, minta halaman /Members/MembersInformation. Misalnya, URL mungkin terlihat seperti ini:

http://localhost:38366/Members/MembersInformation

(Nomor port (38366) mungkin akan berbeda di URL Anda.)

Anda dialihkan ke halaman Login.cshtml , karena Anda tidak masuk.
Masuk menggunakan akun yang Anda buat sebelumnya. Anda dialihkan kembali ke halaman MembersInformation . Karena Anda masuk, kali ini Anda melihat konten halaman.

Untuk mengamankan akses ke beberapa halaman, Anda dapat melakukan ini:

Tambahkan pemeriksaan keamanan ke setiap halaman.
Buat halaman _PageStart.cshtml di folder tempat Anda menyimpan halaman yang dilindungi, dan tambahkan pemeriksaan keamanan di sana. Halaman _PageStart.cshtml bertindak sebagai semacam halaman global untuk semua halaman dalam folder. Teknik ini dijelaskan secara lebih rinci dalam Menyesuaikan Perilaku Site-Wide untuk Halaman Web ASP.NET.

Membuat Keamanan untuk Grup Pengguna (Peran)

Jika situs Anda memiliki banyak anggota, tidak efisien untuk memeriksa izin untuk setiap pengguna satu per satu sebelum Anda membiarkan mereka melihat halaman. Sebagai gantinya, yang dapat Anda lakukan adalah membuat grup, atau peran, yang dimiliki oleh masing-masing anggota. Anda kemudian dapat memeriksa izin berdasarkan peran. Di bagian ini, Anda akan membuat peran "admin" lalu membuat halaman yang dapat diakses oleh pengguna yang berada (milik) peran tersebut.

Sistem keanggotaan ASP.NET disiapkan untuk mendukung peran. Namun, tidak seperti pendaftaran keanggotaan dan login, templat Situs Pemula tidak berisi halaman yang membantu Anda mengelola peran. (Mengelola peran adalah tugas administratif daripada tugas pengguna.) Namun, Anda dapat menambahkan grup langsung dalam database keanggotaan di WebMatrix.

Di WebMatrix, klik pemilih ruang kerja Database .
Di panel kiri, buka simpul StarterSite.sdf , buka simpul Tabel , lalu klik dua kali tabel webpages_Roles .
Tambahkan peran bernama "admin". Bidang RoleId diisi secara otomatis. (Ini adalah kunci utama dan telah diatur menjadi bidang identifikasi, seperti yang dijelaskan dalam Pengantar Bekerja dengan Database di Situs Halaman Web ASP.NET.)
Perhatikan apa nilainya untuk bidang RoleId . (Jika ini adalah peran pertama yang Anda tentukan, itu akan menjadi 1.)
Tutup tabel webpages_Roles .
Buka tabel UserProfile .
Catat nilai UserId dari satu atau beberapa pengguna dalam tabel lalu tutup tabel.
Buka tabel webpages_UserInRoles dan masukkan userID dan nilai RoleID ke dalam tabel. Misalnya, untuk menempatkan pengguna 2 ke dalam peran "admin", Anda akan memasukkan nilai-nilai ini:
Tutup tabel webpages_UsersInRoles .

Sekarang setelah Anda memiliki peran yang ditentukan, Anda dapat mengonfigurasi halaman yang dapat diakses oleh pengguna yang berada dalam peran tersebut.
Di folder akar situs web, buat halaman baru bernama AdminError.cshtml dan ganti konten yang ada dengan kode berikut. Ini akan menjadi halaman tempat pengguna dialihkan jika mereka tidak diizinkan mengakses halaman.
```
@{
    Layout = "~/_SiteLayout.cshtml";
    PageData["Title"] = "Admin-only Error";
}
<p>You must log in as an admin to access that page.</p>
```

Di folder akar situs web, buat halaman baru bernama AdminOnly.cshtml dan ganti kode yang ada dengan kode berikut:

@{
    Layout = "~/_SiteLayout.cshtml";
    PageData["Title"] = "Administrators only";
}

@if ( Roles.IsUserInRole("admin")) {
    <span> Welcome <b>@WebSecurity.CurrentUserName</b>! </span>
}
else {
     Response.Redirect("~/AdminError");
}

Metode Roles.IsUserInRole mengembalikan true jika pengguna saat ini adalah anggota peran yang ditentukan (dalam hal ini, peran "admin").

Jalankan Default.cshtml di browser, tetapi jangan masuk. (Jika Anda sudah masuk, keluar.)
Di bilah alamat browser, tambahkan AdminOnly di URL. (Dengan kata lain, minta file AdminOnly.cshtml .) Anda dialihkan ke halaman AdminError.cshtml , karena Saat ini Anda tidak masuk sebagai pengguna dalam peran "admin".
Kembali ke Default.cshtml dan masuk sebagai pengguna yang Anda tambahkan ke peran "admin".
Telusuri ke halaman AdminOnly.cshtml . Kali ini Anda melihat halaman.

Mencegah Program Otomatis Bergabung dengan Situs Web Anda

Halaman masuk tidak akan menghentikan program otomatis (kadang-kadang disebut sebagai robot web atau bot) agar tidak mendaftar ke situs web Anda. Prosedur ini menjelaskan cara mengaktifkan pengujian ReCaptcha untuk halaman pendaftaran.

/media/38777/ch16securitymembership-18.jpg

Daftarkan situs web Anda dengan layanan ReCaptcha. Setelah menyelesaikan pendaftaran, Anda akan mendapatkan kunci umum dan kunci privat.
Tambahkan Pustaka Pembantu Web ASP.NET ke situs web Anda seperti yang dijelaskan dalam Menginstal Pembantu di Situs Halaman Web ASP.NET, jika Anda belum melakukannya.
Di folder Akun , buka file bernama Register.cshtml.

Di kode di bagian atas halaman, temukan baris berikut dan batalkan komentar dengan menghapus // karakter komentar:

if (!ReCaptcha.Validate("PRIVATE_KEY")) {
    ModelState.AddError("recaptcha", "Captcha response was not correct");
}

Ganti PRIVATE_KEY dengan kunci privat ReCaptcha Anda sendiri.
Di markup halaman, hapus @* karakter dan *@ komentar dari sekitar baris berikut di markup halaman:
```
@ReCaptcha.GetHtml("PUBLIC_KEY", theme: "white")
@Html.ValidationMessage("recaptcha")
```
Ganti PUBLIC_KEY dengan kunci Anda.
Jika Anda belum menghapusnya, hapus <div> elemen yang berisi teks yang dimulai dengan "Untuk mengaktifkan verifikasi CAPTCHA ...". (Hapus seluruh <div> elemen dan isinya.)
Jalankan Default.cshtml di browser. Jika Anda masuk ke situs, klik tautan Keluar .
Klik tautan Daftar dan uji pendaftaran menggunakan tes CAPTCHA.

Untuk informasi selengkapnya tentang pembantu ReCaptcha , lihat Menggunakan CATPCHA untuk Mencegah Program Otomatis (Bot) Menggunakan Situs Web ASP.NET Anda.

Mengizinkan Pengguna Masuk Menggunakan Situs Eksternal

Templat Situs Pemula menyertakan kode dan markup yang memungkinkan pengguna masuk menggunakan Facebook, Windows Live, Twitter, Google, atau Yahoo. Secara default, fungsionalitas ini tidak diaktifkan. Prosedur umum untuk menggunakan mengizinkan pengguna masuk menggunakan penyedia eksternal ini adalah:

Tentukan situs eksternal mana yang ingin Anda dukung.
Jika diperlukan, buka situs tersebut dan siapkan aplikasi masuk. (Misalnya, Anda harus melakukan ini untuk mengizinkan login Facebook.)
Di situs Anda, konfigurasikan penyedia. Dalam kebanyakan kasus, Anda hanya perlu membatalkan komentar beberapa kode dalam file _AppStart.cshtml .
Tambahkan markup ke halaman pendaftaran yang memungkinkan orang menautkan ke situs eksternal untuk masuk. Anda biasanya dapat menyalin markup yang Anda butuhkan dan mengubah teks sedikit.

Anda dapat menemukan instruksi langkah demi langkah dalam topik Mengaktifkan Masuk dari Situs Eksternal di Situs Halaman Web ASP.NET.

Setelah pengguna masuk dari situs lain, pengguna kembali ke situs Anda dan mengaitkan login tersebut dengan situs Anda. Akibatnya, ini membuat entri keanggotaan di situs Anda untuk login eksternal pengguna. Ini memungkinkan Anda menggunakan fasilitas normal keanggotaan (seperti peran) dengan login eksternal.

Menambahkan Keamanan ke Situs Web yang Sudah Ada

Prosedur sebelumnya dalam artikel ini bergantung pada penggunaan templat Situs Pemula sebagai dasar untuk keamanan situs web. Jika Tidak praktis bagi Anda untuk memulai dari templat Situs Pemula atau menyalin halaman yang relevan dari situs berdasarkan templat tersebut, Anda dapat menerapkan jenis keamanan yang sama di situs Anda sendiri dengan mengodekannya sendiri. Anda membuat jenis halaman yang sama — pendaftaran, login, dan sebagainya — lalu menggunakan pembantu dan kelas untuk menyiapkan keanggotaan.

Proses dasar dijelaskan dalam posting blog CARA paling dasar untuk menerapkan keamanan ASP.NET Razor. Sebagian besar pekerjaan dilakukan menggunakan metode dan properti pembantu WebSecurity berikut:

WebSecurty.UserExists, WebSecurity.CreateUserAndAccount. Metode ini memungkinkan Anda menentukan apakah seseorang sudah terdaftar dan mendaftarkannya.
WebSecurty.IsAuthenticated. Properti ini memungkinkan Anda menentukan apakah pengguna saat ini masuk. Ini berguna untuk mengalihkan pengguna ke halaman masuk jika mereka belum masuk.
WebSecurity.Login, WebSecurity.Logout. Metode ini membuat pengguna masuk atau keluar.
WebSecurity.CurrentUserName. Properti ini berguna untuk menampilkan nama masuk pengguna saat ini (jika pengguna masuk).
WebSecurity.ConfirmAccount. Metode ini berguna jika Anda menyiapkan konfirmasi email untuk pendaftaran. (Detail dijelaskan dalam posting blog Menggunakan fitur konfirmasi untuk keamanan halaman web ASP.NET.)

Untuk mengelola peran, Anda dapat menggunakan kelas Peran dan Keanggotaan , seperti yang dijelaskan dalam entri blog.

Sumber Daya Tambahan

Menyesuaikan Perilaku Site-Wide
Mengamankan Komunikasi Web: Sertifikat, SSL, dan https://
Cara paling dasar untuk menerapkan keamanan ASP.NET Razor dan Menggunakan fitur konfirmasi untuk keamanan ASP.NET Web Pages. Ini adalah posting blog yang menjelaskan cara menerapkan fitur keanggotaan ASP.NET tanpa menggunakan templat Situs Pemula .
Mengaktifkan Masuk dari Situs Eksternal dalam Situs Halaman Web ASP.NET
Referensi WEBSecurity Class API (MSDN)
Referensi API Kelas SimpleRoleProvider (MSDN)
Referensi API Kelas SimpleMembershipProvider (MSDN)

Bagikan melalui