*Panduan ini disusun berdasarkan Lab Manual ASP.NET Teched 2006 (USA), serta referensi MSDN website.

(1)

S

e

r

i

W

o

r

k

s

h

o

p

A

S

P

.

N

E

T

2

2 .

.

0

P

e

n

g

a

t

u

r

a

n

K

e

a

m

a

n

a

n

d

e

n

g

a

n

L

o

g

i

n

C

o

n

t

r

o

l

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.

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.

Lisensi Dokumen:

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.

(2)

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

role-based security untuk membatasi hak akses halaman admin sehingga hanya administrator

yang dapat mengaksesnya.

(3)

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 a. Jalankan VWD dengan gunakan perintah “File->Open Web Site” untuk membuka web C:\MSLabs\ASP.NET\Starter\<Language>\Lab4.

2. Tambahkan sebuah halaman pada Website

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.”

(4)

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.

3. Menambahkan sebuah kontrol Login dan sebuah kontrol

CreateUserWizard

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”.

(5)

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

a. Klik kanan C:\..\Lab4 di Solution Explorer dan pilih “New Folder.” Dan beri nama “Secure”.

b. Pindahkan Admin.aspx dan Admin.aspx.cs<vb> 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.

(6)

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 <authorization>. 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.

(7)

_{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 keamanan

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.

(8)

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:

<asp:HyperLink ID="HyperLink1" ImageUrl="~/Images/MyComics.gif" NavigateUrl="~/Default.aspx"

Runat="server">Hyperlink</asp:HyperLink>

c. Edit isi sel agar kelihatan seperti ini: (teks akan ditemukan di C:\ MSLabs\ASP.NET\LabFiles\Lab4.txt)

<asp:Panel ID="LinksPanel" Runat="server"> <asp:HyperLink ID="AdminLink" Text="Admin"

NavigateUrl="~/Secure/Admin.aspx" Runat="server" ForeColor="White"

Font-Names="Verdana" Font-Size="10pt" EnableTheming="False"

Style="text-decoration: none" />

<asp:LoginStatus ID="LoginStatusControl" Runat="server" ForeColor="White"

Font-Names="Verdana" Font-Size="10pt" EnableTheming="False"

Style="text-decoration: none" />

Apa yang Anda lakukan adalah menyisipkan 1-baris, 2-sel HTML kedalam sel yang telah ada—Salah satunya berisibanner MyComics—

(9)

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.<cs or vb> 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.<cs. Or vb>

c. Tambahkan pernyataan berikut ini kedalam method Page_Load: C#

((Site) Master).HideBannerLinks (); VB

CType(Master, Site).HideBannerLinks()

(10)

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 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” .

(11)

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

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?

2. Membuat group Administrators

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 dibatasi hanya untuk

administrator

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.

(12)

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 <authorization>. 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

(13)

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