Seri Workshop ASP.NET 2.0
Pengaturan Keamanan dengan Login Control Bernard Pakpahan
[email protected]
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.
3)
4) 5)
6)
Bisa didownload di: http://www.microsoft.com/downloads/details.aspx?familyid=4C6BA9FD-319A-4887BC75-3B02B5E48A40&displaylang=en. 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
[email protected] untuk mendapatkan salinan CD tersebut. Tentu saja dengan mengganti biaya penyalinan CD dan ongkos kirim. 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. 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. 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 1. Membuka Website
Langkah Detail a. Jalankan VWD dengan gunakan perintah “File->Open Web Site” untuk membuka web C:\MSLabs\ASP.NET\Starter\
\Lab4.
2. Tambahkan sebuah
a. Klik kanan C:\..\Lab4 di Solution Explorer dan gunakan perintah “Add New Item”
halaman pada Website
b. c. d. e.
f.
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. Letika ditanya untuk memilih master page, pilih Site.master. Ubah Title=“Untitled Page” menjadi Title=“MyComics Login” di @ Page directive Login.aspx. Klik tombol Design untuk berpindah ke Design view. Letakkan kursor di kontrol Content, dan lalu gunakan perintah “Layout->Insert Table” sebuah tabel “vertical split”:
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 .
h. Set Width selpaling kiri menjadi 50%. Juga set property VAlign menjadi “top.” i. 3. Menambahkan
sebuah kontrol Login dan sebuah kontrol CreateUserWizard
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 1. Memindahkan
halaman admin
Langkah Detail 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.
2. Jalankan Security
Setup Wizard
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. j.
k.
l.
m.
Pada step 7 (“Complete”), klik Finish. 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. 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. 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. 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.
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. 4. Test setting
a. Pilih Default.aspx di jendela Solution Explorer dan tekan Ctrl+F5 untuk
menjalankan. Pastikan Default.aspx (bukan halaman login) muncul di browser.
keamanan
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. f.
Pastikan halaman Admin.aspx muncul tanpa memerlukan proses login lagi. 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 1. Menambahkan
link ke master page
Langkah Detail 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) | | <span style="font-size: 10pt; color: white; fontfamily: Verdana">| <span style="font-size: 10pt; color: white; fontfamily: Verdana"> |
Apa yang Anda lakukan adalah menyisipkan 1-baris, 2-sel HTML kedalam sel yang telah ada—Salah satunya berisibanner MyComics—
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. 2. Menyembunyikan
halaman login
a. Buka Site.master. dan tambahkan method dibawah ke Site class:
C# public void HideBannerLinks () { LinksPanel.Visible = false; } VB 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# ((Site) Master).HideBannerLinks (); VB CType(Master, Site).HideBannerLinks() d. Jalankan Default.aspx di browser Anda.
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.
3. Mengubah aksi
logout.
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
d. e. f. g. h. i. j.
ike halaman utama (Default.aspx). Untuk mengakhirinya, buka Site.master di Design view dan pilih kontrol LoginStatus. Set property LogoutAction kontrol LoginStatus menjadi “Redirect.” Set property LogoutPageUrl kontrol LoginStatus menjadi “~/Default.aspx.” Jalankan Default.aspx lagi dan arahkan ke Admin.aspx. Klik “Logout” dan pastikan Anda kembali ke Default.aspx. Juga pastikan kontrol LoginStatus terbaca “Login.” Login dan kembali ke Admin.aspx. Klik logo MyComics logo disudut kanan atas halaman. Pastikan Anda kembali ke Default.aspx dan kontrol LoginStatus terbaca “Logout” . 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 1. Aktifkan
ASP.NET role manager
a. b. c. d.
2. Membuat group
Administrators
Langkah Detail Gunakan perintah “Website->ASP.NET Configuration” untuk menjalankan WebSite Administration Tool. Kembali ke halaman’ Security Web Site Administration Tool. Klik “Enable roles.” 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. 3. Buat sebuah
account Administrator
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. 4. Buat Admin.aspx
a. Klik “Manage access rules” pada halaman Security Web Site Administration Tool.
dibatasi hanya untuk administrator
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. 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.
Diskusi dan pertanyaan lebih lanjut: 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 [email protected].
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: [email protected] URL: http://choirulamri.or.id
Untuk diskusi lebih lanjut silakan gabung ke milis ASPNETExpress: Kirim email kosong ke [email protected] Atau daftar via web di http://tech.groups.yahoo.com/group/aspnetexpress/
