Pengaturan Keamanan dengan Login Control

Seri Workshop ASP.NET 2.0
Pengaturan Keamanan dengan Login Control
Bernard Pakpahan
bern4d@gmail.com
M.Choirul Amri
http://choirulamri.or.id
*Panduan ini disusun berdasarkan Lab Manual ASP.NET Teched 2006 (USA), serta referensi MSDN website.
Lisensi Dokumen:
Copyright © 2007 IlmuKomputer.Com
Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan
disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat
tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang
disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang,
kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.
Panduan workshop ini ditujukan untuk para pembaca yang ingin mempelajari pengaturan keamanan
menggunakan kontrol Login di ASP.NET 2.0. Tulisan ini merupakan kelanjutan dari 2 tulisan
sebelumnya:
• Mengakses Database dengan ASP.NET 2.0
• Master Pages, Themes, dan Multiple View
Kedua tulisan tersebut juga telah dipublikasikan di IlmuKomputer.Com.
Dalam tulisan kali ini akan dipaparkan pembuatan halaman login, registrasi keanggotaan, serta
pengaturan password. ASP.NET 2.0 menyediakan framework untuk mengatur keanggotaan dan
keamanan aplikasi dengan menyediakan kelas Membership dan Roles. Untuk antar muka, telah
tersedia berbagai kontrol yang dapat langsung dipakai atau dikustomisasi.
Workshop ini menggunakan database yang SQL Server 2005 dengan editor Visual Studio 2005
Express Edition. Berikut beberapa persiapan yang perlu Anda lakukan sebelum mempraktekkan
langkah-langkah latihan dalam panduan ini:
1) Install Visual Studio 2005 (VS2005). Anda juga dapat menggunakan versi gratis VS2005
untuk editor web, yaitu Visual Web Developer Express Edition. Bisa didownload gratis di:
http://msdn.microsoft.com/vstudio/express/support/install/
2) Install SQL Server 2005. Semua panduan dalam tulisan ini menggunakan SQL Server 2005
Express Edition, yang merupakan versi free SQL Server 2005.

Bisa didownload di:
http://www.microsoft.com/downloads/details.aspx?familyid=4C6BA9FD-319A-4887-
BC75-3B02B5E48A40&displaylang=en.
3) Ukuran file download cukup besar (sekitar 650 MB). Penulis telah menitipkan beberapa
keeping CD master Express edition tersebut di sekretariat IlmuKomputer.com (gedung
Brainmatics-Bidakara Jakarta), bebas untuk digandakan. Jika Anda mengalami kesulitan
akses internet, silakan menghubungi Sdr. Chaeruddin via email info@brainmatics.com
untuk mendapatkan salinan CD tersebut. Tentu saja dengan mengganti biaya penyalinan CD
dan ongkos kirim.
4) Buat folder baru dengan nama MSLabs di drive C Anda. Download file latihan dari situs
IlmuKomputer.com (ASPNETMEMBER.Zip), extract file tersebut dan salin folder
ASP.NET ke dalam folder C:\MSLabs.
5) Jika Anda belum memiliki database sample MyComics dan Pubs, jalankan skrip
Installpubs.cmd dan InstallMyComics.cmd yang terdapat di folder
C:\MSLabs\ASP.NET\LabFiles\Database. Kedua skrip tersebut akan membuat database
pubs dan MyComics di dalam SQL Server 2005 Express yang akan digunakan selama
latihan.
6) Jika Anda tidak menggunakan SQL Server 2005 Express Edition, maka Anda perlu
mengedit file InstallMyComics.cmd dan Installpubs.cmd sebelum menjalankan kedua file
tersebut. Edit dan sesuaikan nama SQL Server sesuai dengan instalasi SQL Server di
komputer Anda. Misalnya : ganti localhost\sqlexpress menjadi localhost\sql2005.
Pendahuluan
Autentikasi Form adalah cara yang paling populer aplikasi berbasis internet. Autentikasi
jenis ini menggunakan form yang meminta user untuk memasukkan User ID dan passworrd
sebelum user dapat mengakses halaman yang diinginkan. Ketika user yang tak dikenal
(yang tidak terauntentikasi) mencoba mengakases sebuah halaman yang hanya tersedia
untuk user terautentikasi, ASP.NET secara otomatis mengarahkan mereka ke halaman login.
Secara umum, cara kerja authentikasi form di ASP.NET 2.0 adalah sebagai berikut:
• Sebuah membership service untuk mengatur pengguna dan user credentials
• Kontrol Login untuk proses login pengguna, dan mendaftarkan pengguna baru
• Sebuah role management service digunakan untuk role-based security
Pada lab ini, Anda akan menggunakan semua fasilitas tersebut untuk membangun sebuah
antar muka administrasi yang aman untuk aplikasi MyComics. Anda akan memulai dengan
membuat sebuah halaman login. Kemudian mengamankan halaman admin yang sehingga
user yang terauntentikasi yang dapat mengaksesnya, dan menambahkan link untuk master
page untuk navigasi ke halaman admin dan login. Akhirnya, Anda akan menggunakan rolebased
security untuk membatasi hak akses halaman admin sehingga hanya administrator
yang dapat mengaksesnya.
Perkiraan waktu untuk menyesaikan lab ini: 90 menit

Latihan 1
Add a login page
In this Latihan, Anda akan membuat sebuah halaman login yang didalamnya termasuk
kontrol Login untuk proses login user yang telah ada dan sebuah kontrol CreateUserWizard
untuk register pengguna baru.
Tugas Langkah Detail
1. Membuka Website
2. Tambahkan sebuah
halaman pada
Website
a. Jalankan VWD dengan gunakan perintah “File->Open Web Site” untuk membuka web
C:\MSLabs\ASP.NET\Starter\\Lab4.
a. Klik kanan C:\..\Lab4 di Solution Explorer dan gunakan perintah “Add New Item”
untuk menambahkan sebuah halaman yang bernama Login.aspx. Pilih “Web Form”
dari tipe template dan cek kotak “Place code in separate file”dan “Select master
page”. Sebelum mengklik tombol Add, pastikan C# atau Visual Basic terpilih di
kotak Language.
b. Letika ditanya untuk memilih master page, pilih Site.master.
c. Ubah Title=“Untitled Page” menjadi Title=“MyComics Login” di @ Page directive
Login.aspx.
d. Klik tombol Design untuk berpindah ke Design view.
e. Letakkan kursor di kontrol Content, dan lalu gunakan perintah “Layout->Insert
Table” sebuah tabel “vertical split”:
f. Klik kanan sel bagian kiri tabel dan pilih “Insert->Cell to the Right.”
g. Set properti Width sel bagian tengah tabel menjadi 1 dan BgColor menjadi Gray .

3. Menambahkan
sebuah kontrol
Login dan sebuah
kontrol
CreateUserWizard
h. Set Width selpaling kiri menjadi 50%. Juga set property VAlign menjadi “top.”
i. Set properti VAlign sel paling kanan tabel menjadi “top.” Sekarang Anda dapat
menambahkan kontrol ke halaman.
a. Geser sebuah kontrol Login dari Toolbox dan geser sel paling kanan tabel.
b. Geser sebuah kontrol CreateUserWizard dari Toolbox dan letakkan di sel paling
kanan tabel.
c. Tekan Ctrl+F5 untuk menjalankan Login.aspx. Inilah yang seharusnya tampil:
���� Catatan:
Jika Anda ingin memcantik tampilan halaman,gunakan perintah “Auto
Format” dikedua menu “Login Tasks” and “CreateUserWizard Tasks”.
d. Tutup browser dan kembali ke VWD.

Latihan 2
Menerapkan setting authentication dan authorization
Pada Latihan ini, Anda akan mengaktifkan Autentikasi Form dan konfigurasi admin
sehingga hanya dapat diakses pengguna yang terauntentikasi. Anda juga akan melakukan
konfigurasi aplikasi untuk menggunakan SQL Server membership provider ASP.NET dan
membuat sebuah database untuk provider.
Tugas Langkah Detail
1. Memindahkan
halaman admin
2. Jalankan Security
Setup Wizard
a. Klik kanan C:\..\Lab4 di Solution Explorer dan pilih “New Folder.” Dan beri nama
“Secure”.
b. Pindahkan Admin.aspx dan Admin.aspx.cs ke folder Secure.
3. Gunakan perintah “Website->ASP.NET Configuration” untuk menampilkan WebSite
Administration Tool.
a. Pada WebSite Administration Tool, klik tab Security di bagian atas halaman atau
link Security dibagian isi halaman.
b. Klik “Use the security Setup Wizard to configure security step by step” untuk
memulai Security Setup Wizard.
c. Pada step 1 dari Security Setup Wizard (“Welcome”), klik Next.
d. Pada step 2 dari Security Setup Wizard (“Select Access Method”), pilih “From the
internet” dan klik Next.
e. Pada step 3 (“Data Store”), klik Next.
f. Pada step 4 (“Define Roles”), klik Next. Anda akan mengaktifkan role management
nanti.
g. Pada step 5 (“Add New Users”), isi form untuk membuat seorang pengguna.
(Ingatlah user name dan password yang Anda masukkan karena Anda akan
membutuhkannya nanti. Isikan Joe pada user name dan P@ssw0rd pada password.

Juga perhatikan Web Site Administration Tool memaksakan passwords password
yang rumit disini.) Lalu klik tombol “Create User” diikuti dengan tombol Next.
h. Pada step 6 (“Add New Access Rules”), pilih folder Secure di tree view dibawah
“Select a directory for this rule” seperti ditunjukkan pada gambar dibawah ini. Lalu
pilih “Anonymous users” dan “Deny” dan klik “Add This Rule” untuk
menambahkan sebuah rule di Web.config yang menolak user unauthenticated akses
ke direktori Secure. Lalu klik Next.
i. Pada step 7 (“Complete”), klik Finish.
j. Berpindahlah ke VWD dan buka Web.config dan cobalah untuk perubahan yang
dibuat oleh Security Setup Wizard. Klik kanan project web dan pilih “Refresh” jika
Anda tidak menemukan file Web.Config.
k. Sebuah file Web.config baru telah ditambahkan ke Website oleh Security Setup
Wizard. File tersebut terletak di Secure folder, dan file tersebut merupakan
authorization rules untuk folder Secure.
l. Buka Secure\Web.config dan periksa element . Bagaimana element
itu berhubungan dengan authorization rule yang Anda buat Security Setup Wizard.
Konfigurasi tersebut menolak (deny) smua pengguna yang tidak dikenal.
m. Sebuah file database dengan nama ASPNETDB.mdf ditambahkan ke website oleh
security wizard. Fle tersebut terletak di App_Data, dan merupakan database SQL
Server yang diattach ke SQLExpress.

4. Test setting
keamanan
���� Dengan membuat seorang pengguna melalui Web Admin Anda telah
membuat database SQL Server Express berisi aplikasi Anda. Database
berisi setting keamanan untuk aplikasi Anda.
n. Klik-kanan pada ASPNETDB.MDF dan pilih Open.
o. Anda akan pindah ke jendela Server Explorer dan akan ada koneksi ke database
ASPNETDB.
p. Perhatikan tabel-tabel ASPNETDB dan review. Lihat, jika Anda dapat menemukan
pengguna yang Anda tambahkan.
a. Pilih Default.aspx di jendela Solution Explorer dan tekan Ctrl+F5 untuk
menjalankan. Pastikan Default.aspx (bukan halaman login) muncul di browser.
b. Ubah “Default.aspx” di address bar browser ke “Secure/Admin.aspx.” Pastikan
muncul Login.aspx, seperti ditunjukkan dibawah ini.
c. Login dengan menggunakan user name dan password yang Anda buat di Security
Setup Wizard. Pastikan Admin.aspx muncul browser.
d. Klik tombol Back browser dua kali untuk kembali Default.aspx.
e. Ubah “Default.aspx” address bar di browser untuk “Secure/Admin.aspx” lagi.
Pastikan halaman Admin.aspx muncul tanpa memerlukan proses login lagi.
f. Tutup browser dan kembali ke VWD.

Latihan 3
Tambahkan link navigasi untuk master page
Pada Latihan, Anda akan menambahkan link untuk master page untuk navigasi ke
Admin.aspx dan untuk login dan logout. Link akan berbentuk kontrol HyperLink sederhana,
yang lain kontrol LoginStatus. Anda akan juga sebuah public method untuk master page gar
dapat memunculkan halaman login dan menyembunyikannya.
Tugas Langkah Detail
1. Menambahkan
link ke master
page
a. Buka Site.master di designer dan berpindah ke Source view.
b. Caru sel yang mengandung kontrol HyperLink yang mengarahkan
~/Images/MyComics.gif. Sekarang sel tersebut memiliki isi seperti ini:
Hyperlink
c. Edit isi sel agar kelihatan seperti ini: (teks akan ditemukan di C:\
MSLabs\ASP.NET\LabFiles\Lab4.txt)
|
 
���� Apa yang Anda lakukan adalah menyisipkan 1-baris, 2-sel HTML
kedalam sel yang telah ada—Salah satunya berisibanner MyComics—

2. Menyembunyikan
halaman login
dan menempatkan HyperLink yabg telah ada pada sel sebelah kanan
sekaligus menambahkan sebuah HyperLink dan sebuah kontrol
LoginStatus sel sebelah kanan.Letakkan kontrol baru diselnya untuk
memungkinkan Anda memindahkan ke sudut kanan atas banner. Anda
juga telah membungkusnya (dan teks yang memisahkannya) di sebuah
Panel control sehingga nanti Anda dapat menampilikan dan
menyembunyikan mereka dengan mengubah properti visibility panel.
���� Modifikasi ini dapat dibuat di Design view, tetapi alam lebih mudah
melakukannya di Source View. VWD mendukung penuh koding HTML
secara manual.
d. Jalankan Default.aspx di browser dan pastikan links yang berjudul “Admin” dan
“Login” muncul disdut kanan atas, seperti gambar dibawah ini. Juga pastikan dengan
mngklik salah satu link akan mengarahkan Anda ke halaman Login.
e. Tutup browser dan kembali ke VWD.
a. Buka Site.master. dan tambahkan method dibawah ke Site class:
C#
VB
public void HideBannerLinks ()
{
LinksPanel.Visible = false;
}
Public Sub HideBannerLinks()
LinksPanel.Visible = False
End Sub
b. Buka Login.aspx di Design view dan double-klik bodi halaman untuk menambahkan
method Page_Load pada Login.aspx.
c. Tambahkan pernyataan berikut ini kedalam method Page_Load:
C#
VB
((Site) Master).HideBannerLinks ();
CType(Master, Site).HideBannerLinks()
d. Jalankan Default.aspx di browser Anda.

3. Mengubah aksi
logout.
e. Tekan link Admin di sudut kanan atas. Ketika halaman login muncul, pastikan link
“Admin” dan “Login” tidak muncul.
f. Login menggunakan user name dan password yang Anda register sebelumnya.
Pastikan Admin.aspx muncul, dan link disudut kanan atas tertulis “Logout” sebagai
pengganti “Login,” seperti yang ditampilkan dibawah ini.
a. Di halaman Admin, klik tombol Logout di sudut kanan atas. Apa yang terjadi?
b. Tutup browser dan kembali ke VWD.
c. Daripada kembali ke halaman ketika Anda mengklik “Logout,” Anda lebih baik kembal
ike halaman utama (Default.aspx). Untuk mengakhirinya, buka Site.master di Design
view dan pilih kontrol LoginStatus.
d. Set property LogoutAction kontrol LoginStatus menjadi “Redirect.”
e. Set property LogoutPageUrl kontrol LoginStatus menjadi “~/Default.aspx.”
f. Jalankan Default.aspx lagi dan arahkan ke Admin.aspx.
g. Klik “Logout” dan pastikan Anda kembali ke Default.aspx. Juga pastikan kontrol
LoginStatus terbaca “Login.”
h. Login dan kembali ke Admin.aspx.
i. Klik logo MyComics logo disudut kanan atas halaman. Pastikan Anda kembali ke
Default.aspx dan kontrol LoginStatus terbaca “Logout” .
j. Tutup browser browser dan kembali ke VWD.

Latihan 4
Memastikan role-based security
Pada Latihan ini, Anda akan mengaktifkan role manager ASP.NET dan konfigurasi untuk
menggunakan SQL Server provider. Anda juga akan membuat sebuah account yang
bernama Administrator dan sebuah group yang bernama Administrators. Lalu Anda akan
memodifikasi setting keamanan sehingga hanya Administrators yang dapat melihat
Admin.aspx.
Tugas Langkah Detail
1. Aktifkan
ASP.NET role
manager
2. Membuat group
Administrators
3. Buat sebuah
account
Administrator
4. Buat Admin.aspx
dibatasi hanya
untuk
administrator
a. Gunakan perintah “Website->ASP.NET Configuration” untuk menjalankan WebSite
Administration Tool.
b. Kembali ke halaman’ Security Web Site Administration Tool.
c. Klik “Enable roles.”
d. Buka Web.config. Dapatkan Anda melihat perubahan yang terjadi?
e. Klik “Create or Manage roles” di halaman Security Web Site Administration Tool.
f. Ketikan “Administrators” dan klik tombol “Add Role”.
g. Klik tombol Back disudut kanan bawah halaman untuk kemabli ke halaman utama
Security.
a. Klik “Create user” pada halaman Security Web Site Administration Tool.
b. Isi form seperti ditunjukkan dibawah ini. Pastikan untuk cek kotak Administrators
box sehingga pengguna baru —Administrator—akan ditambahkan ke group
Administrators. Gunakan password “P@ssw0rd”.
c. Klik tombol “Create User”.
d. Klik tombol Back untuk kembali ke halaman utama Security.
a. Klik “Manage access rules” pada halaman Security Web Site Administration Tool.
b. Pilih folder Secure seperti ditunjukkan dibawah ini. Lalu klik tombol Delete untuk
menghapus aturan yang menolak pengguna yang tidakberhakuntuk mengakses folder
Secure. Jawab Yes ketika konfirmasi muncul.

c. Klik “Add new access rule.”
d. Isi di form Add New Access Rule sepertiyang ditunjukkan dibawah ini untuk
menambahkan aturan yang mengizinkan administrator mengakses folder Secure.
Pastikan Anda memilih folder Secure di tree view pada bagian kiri sebelum
mengklik OK.
e. Klik “Add new access rule” lagi.
Diskusi dan pertanyaan lebih lanjut:
f. Isi pada form Add New Access Rule form seperti gambar dibawah untuk
menambahkan aturan yang menolak semua user mengakses folder Secure. Sekali
lagi, Pastikan Anda memilih folder Secure di tree view pada bagian kiri sebelum
mengklik OK..
g. Buka file Web.config di folder Secure dan periksa element .
Perubahan apa yang telah dibuat Web Site Administration Tool?
h. Jalankan Default.aspx dan klik link Admin disudut kanan atas.
i. Login menggunakan user name dan password yang telah telah diregister pada
Latihan 3. Apa yang terjadi?
j. Coba login lagi, tapi kali login sebagai Administrator. Pastikan halaman Admin.aspx
muncul.
1. Bagaimana jika ingin menggunakan database yang telah dimiliki saat ini, dan tidak
menggunakan ASPNETDB yang dibuat oleh security wizard?
2. Bagaimana cara memodifikasi text, tombol, dan tampilan halaman login?
3. Bagaimana cara mengatur tingkat kerumitan password, misalnya minimal 5 karakter dan
berisi satu simbol (@, #, atau $).
4. Bagaimana cara membuat halaman registrasi yang juga berisi data pribadi pengguna, seperti
nama, alamat, dan pekerjaan?
5. Bagaimana membuat fasilitas untuk mereset password dan mengirimkannya ke email
pengguna?
Teknik dan tips untuk pertanyaan-pertanyan tersebut akan dibahas tuntas dalam buku:
“Kumpulan Resep Pemrograman ASP.NET 2.0” yang akan segera terbit beberapa bulan
mendatang ☺☺☺☺.

Profil Penulis:
Bernad Pakpahan
Lulusan Teknik Informatika Polyteknik Dell Sumatra Utara, saat ini bekerja sebagai developer di sebuah
perusahaan retail Jakarta. Mendalami ASP.NET, C#, serta design pattern dan Object Oriented Programming.
Pemegang sertifikasi MCTS dan MCPD untuk Visual Studio 2005 dan .Net Framework 2.0. Dapat dihubungi
melalui email di bern4d@gmail.com.
M. Choirul Amri
Lulusan SMA Taruna Nusantara Magelang (1993) dan Teknik Industri STT Telkom Bandung (1998). Saat ini
bekerja sebagai Consultant Trainer di Avantus Training Singapore. Mendapat penghargaan dari Microsoft
sebagai Most Valuable Professional (MVP) untuk teknologi ASP.NET sejak tahun 2005.
Memiliki minat besar di bidang Business Intelligence, Data Mining, Information Workflow, Enterprise
Resources Planning, dan ASP.NET.
Email: choirul@gmail.com
URL: http://choirulamri.or.id
Untuk diskusi lebih lanjut silakan gabung ke milis ASPNETExpress:
Kirim email kosong ke aspnetexpress-subscribe@yahoogroups.com
Atau daftar via web di http://tech.groups.yahoo.com/group/aspnetexpress/