Gambaran Umum Autentikasi Formulir (C#)

oleh Scott Mitchell

Nota

Sejak artikel ini ditulis, penyedia Keanggotaan ASP.NET telah digantikan oleh ASP.NET Identity. Kami sangat menyarankan untuk memperbarui aplikasi untuk menggunakan platform identitas ASP.NET daripada penyedia Keanggotaan yang ditampilkan pada saat artikel ini ditulis. ASP.NET Identity memiliki sejumlah keunggulan dibandingkan sistem Keanggotaan ASP.NET, termasuk :

• Performa yang lebih baik
• Peningkatan ekstensibilitas dan uji coba
• Dukungan untuk OAuth, OpenID Connect, dan autentikasi dua faktor
• Dukungan Identitas berbasis klaim
• Interoperabilitas yang lebih baik dengan ASP.Net Core

Unduh Kode atau Unduh PDF

Dalam tutorial ini kita akan beralih dari sekadar diskusi ke implementasi; Secara khusus, kita akan melihat penerapan otentikasi formulir. Aplikasi web yang mulai kita bangun dalam tutorial ini akan terus dibangun di tutorial berikutnya, saat kita beralih dari otentikasi formulir sederhana ke keanggotaan dan peran.

Silakan lihat video ini untuk informasi selengkapnya tentang topik ini: Menggunakan Autentikasi Formulir Dasar di ASP.NET.

Pendahuluan

Dalam tutorial sebelumnya kita membahas berbagai opsi otentikasi, otorisasi, dan akun pengguna yang disediakan oleh ASP.NET. Dalam tutorial ini kita akan beralih dari sekadar diskusi ke implementasi; Secara khusus, kita akan melihat penerapan otentikasi formulir. Aplikasi web yang mulai kita bangun dalam tutorial ini akan terus dibangun di tutorial berikutnya, saat kita beralih dari otentikasi formulir sederhana ke keanggotaan dan peran.

Tutorial ini dimulai dengan melihat secara mendalam alur kerja otentikasi formulir, topik yang kita bahas dalam tutorial sebelumnya. Setelah itu, kami akan membuat situs web ASP.NET untuk mendemonstrasikan konsep otentikasi formulir. Selanjutnya, kita akan mengonfigurasi situs untuk menggunakan autentikasi formulir, membuat halaman login sederhana, dan melihat cara menentukan, dalam kode, apakah pengguna diautentikasi dan, jika demikian, nama pengguna yang mereka gunakan untuk masuk.

Memahami alur kerja otentikasi formulir, mengaktifkannya di aplikasi web, dan membuat halaman masuk dan keluar adalah langkah penting dalam membangun aplikasi ASP.NET yang mendukung akun pengguna dan mengautentikasi pengguna melalui halaman web. Karena itu - dan karena tutorial ini dibangun satu sama lain - saya akan mendorong Anda untuk mengerjakan tutorial ini secara lengkap sebelum beralih ke yang berikutnya bahkan jika Anda sudah memiliki pengalaman mengonfigurasi otentikasi formulir di proyek sebelumnya.

Memahami Alur Kerja Autentikasi Formulir

Saat runtime ASP.NET memproses permintaan untuk sumber daya ASP.NET, seperti halaman ASP.NET atau layanan Web ASP.NET, permintaan memunculkan sejumlah peristiwa selama siklus hidupnya. Ada peristiwa yang diangkat di awal dan akhir permintaan, peristiwa yang diajukan saat permintaan diautentikasi dan diotorisasi, peristiwa yang diajukan dalam kasus pengecualian yang tidak ditangani, dan sebagainya. Untuk melihat daftar lengkap peristiwa, lihat peristiwa objek HttpApplication.

Modul HTTP adalah kelas terkelola yang kodenya dijalankan sebagai respons terhadap peristiwa tertentu dalam siklus hidup permintaan. ASP.NET dikirimkan dengan sejumlah Modul HTTP yang melakukan tugas-tugas penting di belakang layar. Dua Modul HTTP bawaan yang sangat relevan dengan diskusi kita adalah:

• FormsAuthenticationModule – mengautentikasi pengguna dengan memeriksa tiket otentikasi formulir, yang biasanya disertakan dalam koleksi cookie pengguna. Jika tidak ada tiket otentikasi formulir, pengguna akan anonim.
• UrlAuthorizationModule – menentukan apakah pengguna saat ini berwenang untuk mengakses URL yang diminta atau tidak. Modul ini menentukan otoritas dengan berkonsultasi dengan aturan otorisasi yang ditentukan dalam file konfigurasi aplikasi. ASP.NET juga termasuk yang FileAuthorizationModule menentukan otoritas dengan berkonsultasi dengan ACL file yang diminta.

Upaya FormsAuthenticationModule untuk mengautentikasi pengguna sebelum UrlAuthorizationModule (dan FileAuthorizationModule) mengeksekusi. Jika pengguna yang membuat permintaan tidak berwenang untuk mengakses sumber daya yang diminta, modul otorisasi mengakhiri permintaan dan mengembalikan status HTTP 401 Tidak Sah . Dalam skenario autentikasi Windows, status HTTP 401 dikembalikan ke browser. Kode status ini menyebabkan browser meminta kredensial pengguna melalui kotak dialog modal. Namun, dengan autentikasi formulir, status HTTP 401 Tidak sah tidak pernah dikirim ke browser karena FormsAuthenticationModule mendeteksi status ini dan memodifikasinya untuk mengarahkan pengguna ke halaman masuk sebagai gantinya (melalui status Pengalihan HTTP 302 ).

Tanggung jawab halaman login adalah untuk menentukan apakah kredensial pengguna valid dan, jika demikian, untuk membuat tiket otentikasi formulir dan mengarahkan pengguna kembali ke halaman yang mereka coba kunjungi. Tiket otentikasi disertakan dalam permintaan berikutnya ke halaman di situs web, yang FormsAuthenticationModule digunakan untuk mengidentifikasi pengguna.

Gambar 1: Alur Kerja Autentikasi Formulir

Mengingat tiket autentikasi di seluruh kunjungan halaman

Setelah masuk, tiket autentikasi formulir harus dikirim kembali ke server web pada setiap permintaan sehingga pengguna tetap masuk saat mereka menjelajahi situs. Ini biasanya dicapai dengan menempatkan tiket autentikasi dalam koleksi cookie pengguna. Cookie adalah file teks kecil yang berada di komputer pengguna dan dikirimkan dalam header HTTP pada setiap permintaan ke situs web yang membuat cookie. Oleh karena itu, setelah tiket otentikasi formulir dibuat dan disimpan dalam cookie browser, setiap kunjungan berikutnya ke situs tersebut mengirimkan tiket otentikasi bersama dengan permintaan, sehingga mengidentifikasi pengguna.

Salah satu aspek cookie adalah kedaluwarsanya, yang merupakan tanggal dan waktu di mana browser membuang cookie. Ketika cookie autentikasi formulir kedaluwarsa, pengguna tidak dapat lagi diautentikasi dan karenanya menjadi anonim. Ketika pengguna berkunjung dari terminal publik, kemungkinan besar mereka ingin tiket otentikasi mereka kedaluwarsa saat mereka menutup browser mereka. Namun, saat berkunjung dari rumah, pengguna yang sama mungkin ingin tiket autentikasi diingat saat dimulai ulang browser sehingga mereka tidak perlu masuk ulang setiap kali mereka mengunjungi situs. Keputusan ini sering dibuat oleh pengguna dalam bentuk kotak centang "Ingat saya" pada halaman login. Pada Langkah 3 kita akan memeriksa cara menerapkan kotak centang "Ingat saya" di halaman login. Tutorial berikut membahas pengaturan batas waktu tiket autentikasi secara rinci.

Nota

Ada kemungkinan bahwa agen pengguna yang digunakan untuk masuk ke situs web mungkin tidak mendukung cookie. Dalam kasus seperti itu, ASP.NET dapat menggunakan tiket otentikasi formulir tanpa cookie. Dalam mode ini, tiket autentikasi dikodekan ke dalam URL. Kita akan melihat kapan tiket otentikasi tanpa cookie digunakan dan bagaimana tiket tersebut dibuat dan dikelola di tutorial berikutnya.

Cakupan autentikasi formulir

Kode FormsAuthenticationModule terkelola yang merupakan bagian dari runtime ASP.NET. Sebelum versi 7 server web Internet Information Services (IIS) Microsoft, ada penghalang yang berbeda antara alur HTTP IIS dan alur runtime ASP.NET. Singkatnya, di IIS 6 dan yang lebih lama, FormsAuthenticationModule satu-satunya yang dijalankan ketika permintaan didelegasikan dari IIS ke runtime ASP.NET. Secara default, IIS memproses konten statis itu sendiri – seperti halaman HTML dan file CSS dan gambar – dan hanya menyerahkan permintaan ke runtime ASP.NET saat halaman dengan ekstensi .aspx, .asmx, atau .ashx diminta.

IIS 7, bagaimanapun, memungkinkan pipeline IIS dan ASP.NET terintegrasi. Dengan beberapa pengaturan konfigurasi, Anda dapat menyiapkan IIS 7 untuk memanggil FormsAuthenticationModule untuk semua permintaan. Selain itu, dengan IIS 7 Anda dapat menentukan aturan otorisasi URL untuk file jenis apa pun. Untuk informasi selengkapnya, lihat Perubahan Antara Keamanan IIS6 dan IIS7, Keamanan Platform Web Anda, dan Memahami Otorisasi URL IIS7.

Singkat cerita, dalam versi sebelum IIS 7, Anda hanya dapat menggunakan autentikasi formulir untuk melindungi sumber daya yang ditangani oleh runtime ASP.NET. Demikian juga, aturan otorisasi URL hanya diterapkan ke resource yang ditangani oleh runtime ASP.NET. Tetapi dengan IIS 7 dimungkinkan untuk mengintegrasikan FormsAuthenticationModule dan UrlAuthorizationModule ke dalam alur HTTP IIS, sehingga memperluas fungsionalitas ini ke semua permintaan.

Langkah 1: Membuat Situs Web ASP.NET untuk Seri Tutorial ini

Untuk menjangkau audiens seluas mungkin, situs web ASP.NET yang akan kami bangun sepanjang seri ini akan dibuat dengan versi gratis Microsoft dari Visual Studio 2008, Visual Web Developer 2008. Kami akan mengimplementasikan SqlMembershipProvider penyimpanan pengguna dalam database Microsoft SQL Server 2005 Express Edition . Jika Anda menggunakan Visual Studio 2005 atau edisi Visual Studio 2008 atau SQL Server yang berbeda, jangan khawatir - langkah-langkahnya akan hampir identik dan perbedaan yang tidak sepele akan ditunjukkan.

Nota

Aplikasi web demo yang digunakan dalam setiap tutorial tersedia sebagai unduhan. Aplikasi yang dapat diunduh ini dibuat dengan Visual Web Developer 2008 yang ditargetkan untuk .NET Framework versi 3.5. Karena aplikasi ini ditargetkan untuk .NET 3.5, file Web.config-nya menyertakan elemen konfigurasi khusus 3.5 tambahan. Singkat cerita, jika Anda belum menginstal .NET 3.5 di komputer Anda maka aplikasi web yang dapat diunduh tidak akan berfungsi tanpa terlebih dahulu menghapus markup khusus 3.5 dari Web.config.

Sebelum kita dapat mengonfigurasi otentikasi formulir, pertama-tama kita memerlukan situs web ASP.NET. Mulailah dengan membuat situs web ASP.NET berbasis sistem file baru. Untuk mencapai ini, luncurkan Pengembang Web Visual lalu buka menu File dan pilih Situs Web Baru, menampilkan kotak dialog Situs Web Baru. Pilih templat situs web ASP.NET, atur daftar drop-down Lokasi ke Sistem File, pilih folder untuk menempatkan situs web, dan atur bahasa ke C#. Ini akan membuat situs web baru dengan halaman Default.aspx ASP.NET, folder App_Data, dan file Web.config.

Nota

Visual Studio mendukung dua mode manajemen proyek: Proyek Situs Web dan Proyek Aplikasi Web. Proyek Situs Web tidak memiliki file proyek, sedangkan Proyek Aplikasi Web meniru arsitektur proyek di Visual Studio .NET 2002/2003 – mereka menyertakan file proyek dan mengkompilasi kode sumber proyek menjadi satu rakitan, yang ditempatkan di folder /bin. Visual Studio 2005 awalnya hanya mendukung Proyek Situs Web, meskipun model Proyek Aplikasi Web diperkenalkan kembali dengan Paket Layanan 1; Visual Studio 2008 menawarkan kedua model proyek. Namun, edisi Visual Web Developer 2005 dan 2008 hanya mendukung Proyek Situs Web. Saya akan menggunakan model Proyek Situs Web. Jika Anda menggunakan edisi non-Express dan ingin menggunakan model Proyek Aplikasi Web sebagai gantinya, jangan ragu untuk melakukannya tetapi ketahuilah bahwa mungkin ada beberapa perbedaan antara apa yang Anda lihat di layar Anda dan langkah-langkah yang harus Anda ambil versus tangkapan layar yang ditampilkan dan instruksi yang diberikan dalam tutorial ini.

Gambar 2: Membuat File Baru System-Based Situs Web (Klik untuk melihat gambar ukuran penuh)

Menambahkan Halaman Master

Selanjutnya, tambahkan Halaman Master baru ke situs di direktori root bernama Site.master. Halaman master memungkinkan pengembang halaman untuk menentukan templat seluruh situs yang dapat diterapkan ke halaman ASP.NET. Manfaat utama dari halaman master adalah bahwa tampilan keseluruhan situs dapat ditentukan di satu lokasi, sehingga memudahkan untuk memperbarui atau mengubah tata letak situs.

Gambar 3: Tambahkan Halaman Master Bernama Site.master ke Situs Web (Klik untuk melihat gambar ukuran penuh)

Tentukan tata letak halaman seluruh situs di sini di halaman master. Anda dapat menggunakan tampilan Desain dan menambahkan kontrol Tata Letak atau Web apa pun yang Anda butuhkan, atau Anda dapat menambahkan markup secara manual secara manual di tampilan Sumber. Saya menyusun tata letak halaman master saya untuk meniru tata letak yang digunakan dalam seri tutorial Working with Data in ASP.NET 2.0 saya (lihat Gambar 4). Halaman master menggunakan lembar gaya bertingkat untuk pemosisian dan gaya dengan pengaturan CSS yang ditentukan dalam Style.css file (yang disertakan dalam unduhan terkait tutorial ini). Meskipun Anda tidak dapat mengetahui dari markup yang ditunjukkan di bawah ini, aturan CSS didefinisikan sedemikian rupa sehingga konten div< navigasi >benar-benar diposisikan sehingga muncul di sebelah kiri dan memiliki lebar tetap 200 piksel.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Forms Authentication, Authorization, and User Accounts</title>
    <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="wrapper">
        <form id="form1" runat="server">
        
            <div id="header">
                <span class="title">User Account Tutorials</span>
            </div>
        
            <div id="content">
                <asp:contentplaceholder id="MainContent" runat="server">
                  <!-- Page-specific content will go here... -->
                </asp:contentplaceholder>
            </div>
            
            <div id="navigation">
                TODO: Menu will go here...
            </div>
        </form>
    </div>
</body>
</html>

Halaman master menentukan tata letak halaman statis dan wilayah yang dapat diedit oleh halaman ASP.NET yang menggunakan halaman master. Wilayah konten yang dapat diedit ini ditunjukkan oleh ContentPlaceHolder kontrol, yang dapat dilihat dalam div< konten.> Halaman master kami memiliki satu ContentPlaceHolder (MainContent), tetapi halaman master mungkin memiliki beberapa ContentPlaceHolders.

Dengan markup yang dimasukkan di atas, beralih ke tampilan Desain memperlihatkan tata letak halaman master. Setiap halaman ASP.NET yang menggunakan halaman master ini akan memiliki tata letak seragam ini, dengan kemampuan untuk menentukan markup untuk wilayah tersebut MainContent .

Gambar 4: Halaman Master, Saat Dilihat Melalui Tampilan Desain (Klik untuk melihat gambar ukuran penuh)

Membuat Halaman Konten

Pada titik ini kami memiliki halaman Default.aspx di situs web kami, tetapi tidak menggunakan halaman master yang baru saja kami buat. Meskipun dimungkinkan untuk memanipulasi markup deklaratif halaman web untuk menggunakan halaman master, jika halaman belum berisi konten apa pun, lebih mudah untuk menghapus halaman dan menambahkannya kembali ke proyek, menentukan halaman master yang akan digunakan. Oleh karena itu, mulailah dengan menghapus Default.aspx dari proyek.

Selanjutnya, klik kanan pada nama proyek di Penjelajah Solusi dan pilih untuk menambahkan Formulir Web baru bernama Default.aspx. Kali ini, centang kotak centang "Pilih halaman master" dan pilih halaman master Site.master dari daftar.

Gambar 5: Menambahkan Halaman Default.aspx Baru Memilih Halaman Master (Klik untuk melihat gambar ukuran penuh)

Gambar 6: Gunakan Halaman Master Site.master

Nota

Jika Anda menggunakan Model Proyek Aplikasi Web, kotak dialog Tambahkan Item Baru tidak menyertakan kotak centang "Pilih halaman master". Sebagai gantinya, Anda perlu menambahkan item jenis "Formulir Konten Web". Setelah memilih opsi "Formulir Konten Web" dan mengklik Tambahkan, Visual Studio akan menampilkan kotak dialog Pilih Master yang sama yang ditunjukkan pada Gambar 6.

Markup deklaratif halaman Default.aspx baru hanya @Page menyertakan arahan yang menentukan jalur ke file halaman master dan kontrol Konten untuk MainContent ContentPlaceHolder halaman master.

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>

Untuk saat ini, biarkan Default.aspx kosong. Kita akan kembali ke sana nanti dalam tutorial ini untuk menambahkan konten.

Nota

Halaman master kami mencakup bagian untuk menu atau antarmuka navigasi lainnya. Kami akan membuat antarmuka seperti itu di tutorial mendatang.

Langkah 2: Mengaktifkan Autentikasi Formulir

Dengan situs web ASP.NET yang dibuat, tugas kami selanjutnya adalah mengaktifkan otentikasi formulir. Konfigurasi autentikasi aplikasi ditentukan melalui <authentication> elemen di Web.config. Elemen ini <authentication> berisi satu atribut bernama mode yang menentukan model autentikasi yang digunakan oleh aplikasi. Atribut ini dapat memiliki salah satu dari empat nilai berikut:

• Windows – seperti yang dibahas dalam tutorial sebelumnya, ketika aplikasi menggunakan otentikasi Windows, server web bertanggung jawab untuk mengautentikasi pengunjung, dan ini biasanya dilakukan melalui otentikasi Windows Dasar, Inti, atau Terintegrasi.
• Formulir– pengguna diautentikasi melalui formulir di halaman web.
• Paspor– pengguna diautentikasi menggunakan Jaringan Paspor Microsoft.
• Tidak ada– tidak ada model otentikasi yang digunakan; Semua pengunjung anonim.

Secara default, aplikasi ASP.NET menggunakan autentikasi Windows. Untuk mengubah jenis otentikasi menjadi autentikasi formulir, maka, kita perlu memodifikasi <authentication> atribut mode elemen ke Formulir.

Jika proyek Anda belum berisi file Web.config, tambahkan sekarang dengan mengklik kanan pada nama proyek di Penjelajah Solusi, pilih Tambahkan Item Baru, lalu tambahkan file Konfigurasi Web.

Gambar 7: Jika proyek Anda belum menyertakan Web.config, tambahkan sekarang (klik untuk melihat gambar ukuran penuh)

Selanjutnya, temukan <authentication> elemen dan perbarui untuk menggunakan autentikasi formulir. Setelah perubahan ini, markup file Web.config Anda akan terlihat seperti berikut:

<configuration>
    <system.web>
        ... Unrelated configuration settings and comments removed for brevity ...
        <!--
            The <authentication> section enables configuration 
            of the security authentication mode used by 
            ASP.NET to identify an incoming user. 
        -->
        <authentication mode="Forms" />
    </system.web>
</configuration>

Nota

Karena Web.config adalah file XML, huruf besar penting untuk berkas. Pastikan Anda mengatur atribut mode ke Formulir, dengan huruf kapital "F". Jika Anda menggunakan casing yang berbeda, seperti "formulir", Anda akan menerima error konfigurasi saat mengunjungi situs melalui browser.

Elemen dapat <authentication> secara opsional menyertakan elemen turunan <forms> yang berisi pengaturan khusus autentikasi formulir. Untuk saat ini, mari kita gunakan pengaturan otentikasi formulir default. Kita akan mengeksplorasi <forms> elemen anak secara lebih rinci di tutorial berikutnya.

Langkah 3: Membangun Halaman Login

Untuk mendukung otentikasi formulir, situs web kami memerlukan halaman login. Seperti yang dibahas di bagian "Memahami Alur Kerja Autentikasi Formulir", akan FormsAuthenticationModule secara otomatis mengarahkan pengguna ke halaman login jika mereka mencoba mengakses halaman yang tidak diizinkan untuk dilihat. Ada juga ASP.NET kontrol Web yang akan menampilkan tautan ke halaman login kepada pengguna anonim. Ini menimbulkan pertanyaan, "Apa URL halaman login?"

Secara default, sistem otentikasi formulir mengharapkan halaman login diberi nama Login.aspx dan ditempatkan di direktori root aplikasi web. Jika Anda ingin menggunakan URL halaman login yang berbeda, Anda dapat melakukannya dengan menentukannya di Web.config. Kita akan melihat cara melakukannya di tutorial selanjutnya.

Halaman login memiliki tiga tanggung jawab:

1. Sediakan antarmuka yang memungkinkan pengunjung memasukkan kredensial mereka.
2. Tentukan apakah kredensial yang dikirimkan valid.
3. "Masuk" pengguna dengan membuat tiket otentikasi formulir.

Membuat Antarmuka Pengguna Halaman Login

Mari kita mulai dengan tugas pertama. Tambahkan halaman ASP.NET baru ke direktori akar situs bernama Login.aspx dan kaitkan dengan halaman master Site.master.

Gambar 8: Tambahkan Halaman ASP.NET Baru Bernama Login.aspx (Klik untuk melihat gambar ukuran penuh)

Antarmuka halaman login yang khas terdiri dari dua kotak teks – satu untuk nama pengguna, satu untuk kata sandi mereka – dan tombol untuk mengirimkan formulir. Situs web sering kali menyertakan kotak centang "Ingat saya" yang, jika dicentang, mempertahankan tiket otentikasi yang dihasilkan di seluruh browser yang dimulai ulang.

Tambahkan dua TextBox ke Login.aspx dan atur propertinya ID masing-masing ke UserName dan Password. Atur juga properti Password TextMode ke Password. Selanjutnya, tambahkan kontrol CheckBox, atur propertinya ID ke RememberMe dan propertinya Text ke "Remember Me". Setelah itu, tambahkan Tombol bernama LoginButton yang propertinya Text diatur ke "Login". Dan terakhir, tambahkan kontrol Web Label dan atur propertinya ID ke InvalidCredentialsMessage, propertinya Text ke "Nama pengguna atau kata sandi Anda tidak valid. Silakan coba lagi.", ForeColor propertinya ke Red, dan Visible propertinya ke False.

Pada titik ini, layar Anda akan terlihat mirip dengan tangkapan layar pada Gambar 9, dan sintaks deklaratif halaman Anda akan seperti berikut:

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    <h1>
        Login</h1>
    <p>
        Username:
        <asp:TextBox ID="UserName" runat="server"></asp:TextBox></p>
    <p>
        Password:
        <asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox></p>
    <p>
        <asp:CheckBox ID="RememberMe" runat="server" Text="Remember Me" /> </p>
    <p>
        <asp:Button ID="LoginButton" runat="server" Text="Login" OnClick="LoginButton_Click" /> </p>
    <p>
        <asp:Label ID="InvalidCredentialsMessage" runat="server" ForeColor="Red" Text="Your username or password is invalid. Please try again."
            Visible="False"></asp:Label> </p>
</asp:Content>

Gambar 9: Halaman login berisi dua Kotak Teks, kotak centang, tombol, dan label (klik untuk melihat gambar ukuran penuh)

Terakhir, buat penanganan peristiwa untuk peristiwa Klik LoginButton. Dari Desainer, cukup klik dua kali kontrol Tombol untuk membuat penanganan peristiwa ini.

Menentukan Apakah Kredensial yang Diberikan Valid

Kita sekarang perlu mengimplementasikan tugas 2 di penanganan peristiwa Klik Tombol – menentukan apakah kredensial yang disediakan valid. Untuk melakukan ini, perlu ada penyimpanan pengguna yang menyimpan semua kredensial pengguna sehingga kita dapat menentukan apakah kredensial yang diberikan cocok dengan kredensial yang diketahui.

Sebelum ASP.NET 2.0, pengembang bertanggung jawab untuk mengimplementasikan penyimpanan pengguna mereka sendiri dan menulis kode untuk memvalidasi kredensial yang disediakan terhadap toko. Sebagian besar pengembang akan mengimplementasikan penyimpanan pengguna dalam database, membuat tabel bernama Pengguna dengan kolom seperti UserName, Password, Email, LastLoginDate, dan sebagainya. Tabel ini, kemudian, akan memiliki satu catatan per akun pengguna. Memverifikasi kredensial yang diberikan pengguna akan melibatkan kueri database untuk nama pengguna yang cocok dan kemudian memastikan bahwa kata sandi dalam database sesuai dengan kata sandi yang diberikan.

Dengan ASP.NET 2.0, developer harus menggunakan salah satu penyedia Keanggotaan untuk mengelola toko pengguna. Dalam seri tutorial ini kita akan menggunakan SqlMembershipProvider, yang menggunakan database SQL Server untuk penyimpanan pengguna. Saat menggunakan SqlMembershipProvider, kita perlu mengimplementasikan skema database tertentu yang mencakup tabel, tampilan, dan prosedur tersimpan yang diharapkan oleh penyedia. Kita akan memeriksa cara mengimplementasikan skema ini dalam tutorial Membuat Skema Keanggotaan di SQL Server . Dengan penyedia Keanggotaan, memvalidasi kredensial pengguna semudah memanggil metode ValidateUser(nama pengguna, kata sandi)kelas Keanggotaan, yang mengembalikan nilai Boolean yang menunjukkan apakah validitas kombinasi nama pengguna dan kata sandi. Mengingat kami belum mengimplementasikan penyimpanan pengguna SqlMembershipProvider, kami tidak dapat menggunakan metode ValidateUser kelas Membership saat ini.

Alih-alih meluangkan waktu untuk membangun tabel database Users kustom kita sendiri (yang akan usang setelah kita mengimplementasikan SqlMembershipProvider), mari kita kode keras kredensial yang valid dalam halaman login itu sendiri. Di penanganan peristiwa Klik LoginButton, tambahkan kode berikut:

protected void LoginButton_Click(object sender, EventArgs e)
{
    // Three valid username/password pairs: Scott/password, Jisun/password, and Sam/password.
    string[] users = { "Scott", "Jisun", "Sam" };
    string[] passwords = { "password", "password", "password" };
    for (int i = 0; i < users.Length; i++)
    {
        bool validUsername = (string.Compare(UserName.Text, users[i], true) == 0);
        bool validPassword = (string.Compare(Password.Text, passwords[i], false) == 0);
        if (validUsername && validPassword)
        {
            // TODO: Log in the user...
            // TODO: Redirect them to the appropriate page
        }
    }
    // If we reach here, the user's credentials were invalid
    InvalidCredentialsMessage.Visible = true;
}

Seperti yang Anda lihat, ada tiga akun pengguna yang valid – Scott, Jisun, dan Sam – dan ketiganya memiliki kata sandi ("kata sandi") yang sama. Kode berulang melalui array pengguna dan kata sandi untuk mencari kecocokan nama pengguna dan kata sandi yang valid. Jika nama pengguna dan kata sandi valid, kita perlu masuk ke pengguna dan kemudian mengarahkannya ke halaman yang sesuai. Jika kredensial tidak valid, maka kami menampilkan Label InvalidCredentialsMessage.

Ketika pengguna memasukkan kredensial yang valid, saya menyebutkan bahwa mereka kemudian diarahkan ke "halaman yang sesuai". Namun, apa halaman yang sesuai? Ingatlah bahwa ketika pengguna mengunjungi halaman yang tidak diizinkan untuk mereka lihat, FormsAuthenticationModule secara otomatis mengarahkan mereka ke halaman login. Dengan demikian, ini menyertakan URL yang diminta dalam querystring melalui parameter ReturnUrl. Artinya, jika pengguna mencoba mengunjungi ProtectedPage.aspx, dan mereka tidak berwenang untuk melakukannya, FormsAuthenticationModule akan mengarahkannya ke:

Login.aspx? ReturnUrl=ProtectedPage.aspx

Setelah berhasil masuk, pengguna harus diarahkan kembali ke ProtectedPage.aspx. Atau, pengguna dapat mengunjungi halaman login atas kemauan mereka sendiri. Dalam hal ini, setelah masuk ke pengguna, mereka harus dikirim ke halaman Default.aspx folder root.

Masuk Pengguna

Dengan asumsi bahwa kredensial yang diberikan valid, kita perlu membuat tiket otentikasi formulir, sehingga masuk ke situs pengguna. Kelas FormsAuthentication di namespace System.Web.Security menyediakan berbagai metode untuk masuk dan keluar pengguna melalui sistem autentikasi formulir. Meskipun ada beberapa metode di kelas FormsAuthentication, tiga metode yang kami minati pada saat ini adalah:

• GetAuthCookie(nama pengguna, persistCookie) – membuat tiket otentikasi formulir untuk nama pengguna yang disediakan. Selanjutnya, metode ini membuat dan mengembalikan objek HttpCookie yang menyimpan konten tiket autentikasi. Jika persistCookie benar, cookie persisten akan dibuat.
• SetAuthCookie(nama pengguna, persistCookie) – memanggil metode GetAuthCookie(nama pengguna, persistCookie) untuk menghasilkan cookie autentikasi formulir. Metode ini kemudian menambahkan cookie yang dikembalikan oleh GetAuthCookie ke koleksi Cookie (dengan asumsi autentikasi formulir berbasis cookie sedang digunakan; jika tidak, metode ini memanggil kelas internal yang menangani logika tiket tanpa cookie).
• RedirectFromLoginPage(username, persistCookie) – metode ini memanggil SetAuthCookie(username, persistCookie), lalu mengarahkan pengguna ke halaman yang sesuai.

GetAuthCookie berguna ketika Anda perlu mengubah tiket otentikasi sebelum menulis cookie ke koleksi Cookie. SetAuthCookie berguna jika Anda ingin membuat tiket otentikasi formulir dan menambahkannya ke koleksi Cookie, tetapi tidak ingin mengarahkan pengguna ke halaman yang sesuai. Mungkin Anda ingin menyimpannya di halaman login atau mengirimkannya ke halaman alternatif.

Karena kita ingin masuk ke pengguna dan mengarahkan mereka ke halaman yang sesuai, mari kita gunakan RedirectFromLoginPage. Perbarui penanganan peristiwa Klik LoginButton, ganti dua baris TODO yang dikomentari dengan baris kode berikut:

FormsAuthentication.RedirectFromLoginPage(UserName.Text, RememberMe.Checked);

Saat membuat tiket autentikasi formulir, kami menggunakan properti TextBox UserName untuk parameter nama pengguna tiket autentikasi formulir, dan status centang RememberMe CheckBox untuk parameter persistCookie .

Untuk menguji halaman login, kunjungi di browser. Mulailah dengan memasukkan kredensial yang tidak valid, seperti nama pengguna "Tidak" dan kata sandi "salah". Setelah mengklik tombol Login, postback akan terjadi dan Label InvalidCredentialsMessage akan ditampilkan.

Gambar 10: Label InvalidCredentialsMessage ditampilkan saat memasukkan kredensial tidak valid (Klik untuk melihat gambar ukuran penuh)

Selanjutnya, masukkan kredensial yang valid dan klik tombol Login. Kali ini ketika postback terjadi, tiket otentikasi formulir dibuat dan Anda secara otomatis diarahkan kembali ke Default.aspx. Pada titik ini Anda telah masuk ke situs web, meskipun tidak ada isyarat visual yang menunjukkan bahwa Anda saat ini masuk. Pada Langkah 4 kita akan melihat cara menentukan secara terprogram apakah pengguna masuk atau tidak serta cara mengidentifikasi pengguna yang mengunjungi halaman.

Langkah 5 memeriksa teknik untuk keluar pengguna dari situs web.

Mengamankan Halaman Login

Saat pengguna memasukkan kredensialnya dan mengirimkan formulir halaman login, kredensial – termasuk kata sandinya – dikirimkan melalui Internet ke server web dalam teks biasa. Itu berarti setiap peretas yang mengendus lalu lintas jaringan dapat melihat nama pengguna dan kata sandi. Untuk mencegah hal ini, penting untuk mengenkripsi lalu lintas jaringan dengan menggunakan Secure Socket Layers (SSL). Ini akan memastikan bahwa kredensial (serta markup HTML seluruh halaman) dienkripsi dari saat mereka meninggalkan browser hingga diterima oleh server web.

Kecuali situs web Anda berisi informasi sensitif, Anda hanya perlu menggunakan SSL di halaman login dan di halaman lain di mana kata sandi pengguna akan dikirim melalui kabel dalam teks biasa. Anda tidak perlu khawatir tentang mengamankan tiket otentikasi formulir karena, secara default, tiket tersebut dienkripsi dan ditandatangani secara digital (untuk mencegah gangguan). Diskusi yang lebih menyeluruh tentang keamanan tiket otentikasi formulir disajikan dalam tutorial berikut.

Nota

Banyak situs web keuangan dan medis dikonfigurasi untuk menggunakan SSL di semua halaman yang dapat diakses oleh pengguna yang diautentikasi. Jika Anda membangun situs web seperti itu, Anda dapat mengonfigurasi sistem otentikasi formulir sehingga tiket otentikasi formulir hanya dikirimkan melalui koneksi yang aman.

Langkah 4: Mendeteksi Pengunjung yang Diautentikasi dan Menentukan Identitas Mereka

Pada titik ini kami telah mengaktifkan otentikasi formulir dan membuat halaman login yang belum sempurna, tetapi kami belum memeriksa bagaimana kami dapat menentukan apakah pengguna diautentikasi atau anonim. Dalam skenario tertentu, kami mungkin ingin menampilkan data atau informasi yang berbeda tergantung pada apakah pengguna yang diautentikasi atau anonim mengunjungi halaman tersebut. Selain itu, kita sering perlu mengetahui identitas pengguna yang diautentikasi.

Mari kita tambah halaman Default.aspx yang ada untuk mengilustrasikan teknik ini. Di Default.aspx tambahkan dua kontrol Panel, satu bernama AuthenticatedMessagePanel dan satu lagi bernama AnonymousMessagePanel. Tambahkan kontrol Label bernama WelcomeBackMessage di Panel pertama. Di Panel kedua tambahkan kontrol Hyperlink, atur properti Text-nya ke "Masuk" dan properti NavigateUrl-nya ke "~/Login.aspx". Pada titik ini, markup deklaratif untuk Default.aspx akan terlihat seperti berikut:

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    <asp:Panel runat="server" ID="AuthenticatedMessagePanel">
        <asp:Label runat="server" ID="WelcomeBackMessage"></asp:Label>
    </asp:Panel>
    
    <asp:Panel runat="Server" ID="AnonymousMessagePanel">
        <asp:HyperLink runat="server" ID="lnkLogin" Text="Log In" NavigateUrl="~/Login.aspx"></asp:HyperLink>
    </asp:Panel>
</asp:Content>

Seperti yang mungkin sudah Anda duga sekarang, idenya di sini adalah untuk menampilkan hanya AuthenticatedMessagePanel kepada pengunjung yang diautentikasi dan hanya AnonymousMessagePanel untuk pengunjung anonim. Untuk mencapai ini, kita perlu mengatur properti Terlihat Panel ini tergantung pada apakah pengguna masuk atau tidak.

Properti Request.IsAuthenticated mengembalikan nilai Boolean yang menunjukkan apakah permintaan telah diautentikasi. Masukkan kode berikut ke dalam kode penanganan peristiwa Page_Load:

protected void Page_Load(object sender, EventArgs e)
{
    if (Request.IsAuthenticated)
    {
        WelcomeBackMessage.Text = "Welcome back!";
    
        AuthenticatedMessagePanel.Visible = true;
        AnonymousMessagePanel.Visible = false;
    }
    else
    {
        AuthenticatedMessagePanel.Visible = false;
        AnonymousMessagePanel.Visible = true;
    }
}

Dengan kode ini, kunjungi Default.aspx melalui browser. Dengan asumsi bahwa Anda belum masuk, Anda akan melihat tautan ke halaman login (lihat Gambar 11). Klik tautan ini dan masuk ke situs. Seperti yang kita lihat di Langkah 3, setelah memasukkan kredensial Anda, Anda akan dikembalikan ke Default.aspx, tetapi kali ini halaman menunjukkan pesan "Selamat datang kembali!" (lihat Gambar 12).

Gambar 11: Saat Mengunjungi Secara Anonim, Tautan Masuk Ditampilkan

Gambar 12: Pengguna yang Diautentikasi Diperlihatkan "Selamat Datang Kembali!" Pesan

Kita dapat menentukan identitas pengguna yang saat ini masuk melalui properti Userobjek HttpContext. Objek HttpContext mewakili informasi tentang permintaan saat ini, dan merupakan rumah untuk objek ASP.NET umum seperti Respons, Permintaan, dan Sesi, antara lain. Properti Pengguna mewakili konteks keamanan permintaan HTTP saat ini dan mengimplementasikan antarmuka IPrincipal.

Properti User diatur oleh FormsAuthenticationModule. Secara khusus, ketika FormsAuthenticationModule menemukan tiket autentikasi formulir dalam permintaan masuk, ia membuat objek GenericPrincipal baru dan menetapkannya ke properti User.

Objek utama (seperti GenericPrincipal) memberikan informasi tentang identitas pengguna dan peran yang mereka miliki. Antarmuka IPrincipal mendefinisikan dua anggota:

• IsInRole(roleName) – metode yang mengembalikan nilai Boolean yang menunjukkan apakah prinsipal termasuk dalam peran yang ditentukan.
• Identity – properti yang mengembalikan objek yang mengimplementasikan antarmuka IIdentity. Antarmuka IIdentity mendefinisikan tiga properti: AuthenticationType, IsAuthenticated, dan Name.

Kita dapat menentukan nama pengunjung saat ini menggunakan kode berikut:

string currentUsersName = User.Identity.Name;

Saat menggunakan autentikasi formulir, objek FormsIdentity dibuat untuk properti Identitas GenericPrincipal. Kelas FormsIdentity selalu mengembalikan string "Forms" untuk properti AuthenticationType dan true untuk properti IsAuthenticated-nya. Properti Nama mengembalikan nama pengguna yang ditentukan saat membuat tiket autentikasi formulir. Selain ketiga properti ini, FormsIdentity menyertakan akses ke tiket autentikasi yang mendasarinya melalui properti Tiketnya. Properti Ticket mengembalikan objek jenis FormsAuthenticationTicket, yang memiliki properti seperti Expiration, IsPersistent, IssueDate, Name, dan sebagainya.

Poin penting yang perlu diambil di sini adalah bahwa parameter nama pengguna yang ditentukan dalam metode FormsAuthentication.GetAuthCookie(username, persistCookie), FormsAuthentication.SetAuthCookie(username, persistCookie), dan FormsAuthentication.RedirectFromLoginPage(username, persistCookie) adalah nilai yang sama yang dikembalikan oleh User.Identity.Name. Selain itu, tiket autentikasi yang dibuat oleh metode ini tersedia dengan mentransmisikan User.Identity ke objek FormsIdentity dan kemudian mengakses properti Tiket:

FormsIdentity ident = User.Identity as FormsIdentity;
FormsAuthenticationTicket authTicket = ident.Ticket;

Mari berikan pesan yang lebih personal dalam Default.aspx. Perbarui penanganan peristiwa Page_Load sehingga properti Teks Label WelcomeBackMessage diberi string "Selamat datang kembali, nama pengguna!"

WelcomeBackMessage.Text = "Selamat datang kembali, " + User.Identity.Name + "!";

Gambar 13 menunjukkan efek modifikasi ini (saat masuk sebagai pengguna Scott).

Gambar 13: Pesan selamat datang menyertakan nama pengguna yang saat ini masuk

Menggunakan kontrol LoginView dan LoginName

Menampilkan konten yang berbeda kepada pengguna yang diautentikasi dan anonim adalah persyaratan umum; begitu juga menampilkan nama pengguna yang saat ini masuk. Untuk alasan itu, ASP.NET menyertakan dua kontrol Web yang menyediakan fungsionalitas yang sama yang ditunjukkan pada Gambar 13, tetapi tanpa perlu menulis satu baris kode pun.

Kontrol LoginView adalah kontrol Web berbasis templat yang memudahkan untuk menampilkan data yang berbeda kepada pengguna yang diautentikasi dan anonim. LoginView menyertakan dua templat yang telah ditentukan sebelumnya:

• AnonymousTemplate – setiap markup yang ditambahkan ke template ini hanya ditampilkan kepada pengunjung anonim.
• LoggedInTemplate – markup template ini hanya ditampilkan kepada pengguna yang diautentikasi.

Mari tambahkan kontrol LoginView ke halaman master situs kita, Site.master. Namun, alih-alih menambahkan hanya kontrol LoginView, mari kita tambahkan kontrol ContentPlaceHolder baru dan kemudian menempatkan kontrol LoginView di dalam ContentPlaceHolder baru itu. Alasan untuk keputusan ini akan segera menjadi jelas.

Nota

Selain AnonymousTemplate dan LoggedInTemplate, kontrol LoginView dapat menyertakan templat khusus peran. Templat khusus peran hanya menampilkan markup untuk pengguna yang termasuk dalam peran tertentu. Kami akan memeriksa fitur berbasis peran dari kontrol LoginView di tutorial mendatang.

Mulailah dengan menambahkan ContentPlaceHolder bernama LoginContent ke halaman master dalam elemen div< navigasi>. Anda cukup menyeret kontrol ContentPlaceHolder dari Toolbox ke tampilan Source, menempatkan markup yang dihasilkan tepat di atas "TODO: Menu akan masuk ke sini..." Teks.

<div id="navigation">
    <asp:ContentPlaceHolder ID="LoginContent" runat="server">
    </asp:ContentPlaceHolder>
   
    TODO: Menu will go here...
</div>

Selanjutnya, tambahkan kontrol LoginView dalam LoginContent ContentPlaceHolder. Konten yang ditempatkan ke dalam kontrol ContentPlaceHolder halaman master dianggap sebagai konten default untuk ContentPlaceHolder. Artinya, halaman ASP.NET yang menggunakan halaman master ini dapat menentukan konten mereka sendiri untuk setiap ContentPlaceHolder atau menggunakan konten default halaman master.

LoginView dan kontrol terkait login lainnya terletak di tab Login Toolbox.

Gambar 14: Kontrol LoginView di Toolbox

Selanjutnya, tambahkan dua <br /> elemen segera setelah kontrol LoginView, tetapi masih di dalam ContentPlaceHolder. Pada titik ini, markup elemen div< navigasi >akan terlihat seperti berikut:

<div id="navigation">
    <asp:ContentPlaceHolder ID="LoginContent" runat="server">
        <asp:LoginView ID="LoginView1" runat="server">
        </asp:LoginView>
        <br /><br />
    </asp:ContentPlaceHolder>
   
    TODO: Menu will go here...
</div>

Templat LoginView dapat ditentukan dari Desainer atau markup deklaratif. Dari Desainer Visual Studio, perluas tag pintar LoginView, yang mencantumkan templat yang dikonfigurasi dalam daftar drop-down. Ketik teks "Halo, orang asing" ke dalam AnonymousTemplate; selanjutnya, tambahkan kontrol HyperLink dan atur properti Text dan NavigateUrl-nya ke "Log In" dan "~/Login.aspx", masing-masing.

Setelah mengonfigurasi AnonymousTemplate, beralih ke LoggedInTemplate dan masukkan teks, "Selamat datang kembali, ". Kemudian seret kontrol LoginName dari Toolbox ke LoggedInTemplate, tempatkan segera setelah teks "Selamat datang kembali,". Kontrol LoginName, seperti namanya, menampilkan nama pengguna yang saat ini masuk. Secara internal, kontrol LoginName hanya menghasilkan properti User.Identity.Name

Setelah membuat penambahan ini ke templat LoginView, markup akan terlihat mirip dengan berikut ini:

<div id="navigation">
    <asp:ContentPlaceHolder ID="LoginContent" runat="server">
        <asp:LoginView ID="LoginView1" runat="server">
            <LoggedInTemplate>
                Welcome back,
                <asp:LoginName ID="LoginName1" runat="server" />.
            </LoggedInTemplate>
            <AnonymousTemplate>
                Hello, stranger.
                <asp:HyperLink ID="lnkLogin" runat="server" NavigateUrl="~/Login.aspx">Log In</asp:HyperLink>
            </AnonymousTemplate>
        </asp:LoginView>
        
        <br /><br />
    </asp:ContentPlaceHolder>
   
    TODO: Menu will go here...
</div>

Dengan penambahan ke halaman master Site.master ini, setiap halaman di situs web kami akan menampilkan pesan yang berbeda tergantung pada apakah pengguna diautentikasi. Gambar 15 menunjukkan halaman Default.aspx saat dikunjungi melalui browser oleh pengguna Jisun. Pesan "Selamat datang kembali, Jisun" diulang dua kali: sekali di bagian navigasi halaman master di sebelah kiri (melalui kontrol LoginView yang baru saja kami tambahkan) dan sekali di area konten Default.aspx (melalui kontrol Panel dan logika terprogram).

Gambar 15: Kontrol LoginView menampilkan "Selamat datang kembali, Jisun."

Karena kami menambahkan LoginView ke halaman master, itu dapat muncul di setiap halaman di situs kami. Namun, mungkin ada halaman web di mana kami tidak ingin menampilkan pesan ini. Salah satu halaman tersebut adalah halaman login, karena tautan ke halaman login tampaknya tidak pada tempatnya di sana. Karena kita menempatkan kontrol LoginView di ContentPlaceHolder di halaman master, kita dapat mengganti markup default ini di halaman konten kita. Buka Login.aspx dan buka Desainer. Karena kami belum secara eksplisit mendefinisikan kontrol Konten dalam Login.aspx untuk ContentPlaceHolder LoginContent di halaman master, halaman login akan menampilkan markup default halaman master untuk ContentPlaceHolder ini. Anda dapat melihatnya melalui Desainer – LoginContent ContentPlaceHolder menunjukkan markup default (kontrol LoginView).

Gambar 16: Halaman login menampilkan konten default untuk LoginContent ContentPlaceHolder halaman master (klik untuk melihat gambar ukuran penuh)

Untuk mengganti markup default untuk ContentPlaceHolder LoginContent, cukup klik kanan pada wilayah di Desainer dan pilih opsi Buat Konten Kustom dari menu konteks. (Saat menggunakan Visual Studio 2008, ContentPlaceHolder menyertakan tag pintar yang, ketika dipilih, menawarkan opsi yang sama.) Ini menambahkan kontrol Konten baru ke markup halaman dan dengan demikian memungkinkan kita menentukan konten khusus untuk halaman ini. Anda dapat menambahkan pesan khusus di sini, seperti "Silakan masuk...", tetapi mari kita biarkan saja ini kosong.

Nota

Di Visual Studio 2005, membuat konten kustom membuat kontrol Konten kosong di halaman ASP.NET. Namun, di Visual Studio 2008, membuat konten kustom menyalin konten default halaman master ke dalam kontrol Konten yang baru dibuat. Jika Anda menggunakan Visual Studio 2008, maka, setelah membuat kontrol Konten baru, pastikan untuk menghapus konten yang disalin dari halaman master.

Gambar 17 menunjukkan halaman Login.aspx saat dikunjungi dari browser setelah melakukan perubahan ini. Perhatikan bahwa tidak ada pesan "Halo, orang asing" atau "Selamat datang kembali, nama pengguna" di div< navigasi >kiri seperti saat mengunjungi Default.aspx.

Gambar 17: Halaman Login Menyembunyikan Markup ContentPlaceHolder Login Default (Klik untuk melihat gambar ukuran penuh)

Langkah 5: Keluar

Pada Langkah 3 kita melihat membangun halaman login untuk masuk pengguna ke situs, tetapi kita belum melihat cara keluar pengguna. Selain metode untuk masuk pengguna, kelas FormsAuthentication juga menyediakan metode SignOut. Metode SignOut hanya menghancurkan tiket otentikasi formulir, sehingga keluar dari situs pengguna.

Menawarkan tautan keluar adalah fitur umum yang ASP.NET menyertakan kontrol yang dirancang khusus untuk keluar pengguna. Kontrol LoginStatus menampilkan LinkButton "Login" atau LinkButton "Logout", tergantung pada status autentikasi pengguna. LinkButton "Login" dirender untuk pengguna anonim, sedangkan LinkButton "Logout" ditampilkan kepada pengguna yang diautentikasi. Teks untuk LinkButtons "Login" dan "Logout" dapat dikonfigurasi melalui properti LoginText dan LogoutText LoginStatus.

Mengklik LinkButton "Login" menyebabkan postback, dari mana pengalihan dikeluarkan ke halaman login. Mengklik LinkButton "Logout" menyebabkan kontrol LoginStatus memanggil metode FormsAuthentication.SignOff dan kemudian mengarahkan pengguna ke halaman. Halaman tempat pengguna yang keluar dialihkan bergantung pada properti LogoutAction, yang dapat ditetapkan ke salah satu dari tiga nilai berikut:

• Refresh – default; mengarahkan pengguna ke halaman yang baru saja mereka kunjungi. Jika halaman yang baru saja mereka kunjungi tidak mengizinkan pengguna anonim, maka FormsAuthenticationModule akan secara otomatis mengarahkan pengguna ke halaman login.

Anda mungkin penasaran mengapa pengalihan dilakukan di sini. Jika pengguna ingin tetap berada di halaman yang sama, mengapa perlu pengalihan eksplisit? Alasannya karena ketika LinkButton "Logoff" diklik, pengguna masih memiliki tiket otentikasi formulir dalam koleksi cookie mereka. Akibatnya, permintaan postback adalah permintaan yang diautentikasi. Kontrol LoginStatus memanggil metode SignOut, tetapi itu terjadi setelah FormsAuthenticationModule mengautentikasi pengguna. Oleh karena itu, pengalihan eksplisit menyebabkan browser meminta ulang halaman. Pada saat browser meminta ulang halaman, tiket otentikasi formulir telah dihapus dan oleh karena itu permintaan masuk bersifat anonim.

• Pengalihan – pengguna diarahkan ke URL yang ditentukan oleh properti LogoutPageUrl LoginStatus.
• RedirectToLoginPage – pengguna diarahkan ke halaman login.

Mari tambahkan kontrol LoginStatus ke halaman master dan konfigurasikan untuk menggunakan opsi Pengalihan untuk mengirim pengguna ke halaman yang menampilkan pesan yang mengonfirmasi bahwa mereka telah keluar. Mulailah dengan membuat halaman di direktori akar bernama Logout.aspx. Jangan lupa untuk mengaitkan halaman ini dengan halaman master Site.master. Selanjutnya, masukkan pesan di markup halaman yang menjelaskan kepada pengguna bahwa mereka telah keluar.

Selanjutnya, kembali ke halaman master Site.master dan tambahkan kontrol LoginStatus di bawah LoginView di LoginContent ContentPlaceHolder. Atur properti LogoutAction kontrol LoginStatus ke Pengalihan dan properti LogoutPageUrl-nya ke "~/Logout.aspx".

<div id="navigation">
    <asp:ContentPlaceHolder ID="LoginContent" runat="server">
        <asp:LoginView ID="LoginView1" runat="server">
            <LoggedInTemplate>
                Welcome back,
                <asp:LoginName ID="LoginName1" runat="server" />.
            </LoggedInTemplate>
            <AnonymousTemplate>
                Hello, stranger.
                <asp:HyperLink ID="lnkLogin" runat="server" NavigateUrl="~/Login.aspx">Log In</asp:HyperLink>
            </AnonymousTemplate>
        </asp:LoginView>
        <br />
        <asp:LoginStatus ID="LoginStatus1" runat="server" LogoutAction="Redirect" LogoutPageUrl="~/Logout.aspx" />
        
        <br /><br />
    </asp:ContentPlaceHolder>
   
    TODO: Menu will go here...
</div>

Karena LoginStatus berada di luar kontrol LoginView, LoginStatus akan muncul untuk pengguna anonim dan terautentikasi, tetapi tidak apa-apa karena LoginStatus akan menampilkan LinkButton "Login" atau "Logout" dengan benar. Dengan penambahan kontrol LoginStatus, HyperLink "Log In" di AnonymousTemplate tidak diperlukan, jadi hapus.

Gambar 18 menunjukkan Default.aspx saat Jisun berkunjung. Perhatikan bahwa kolom kiri menampilkan pesan, "Selamat datang kembali, Jisun" bersama dengan tautan untuk keluar. Mengklik LinkButton keluar akan menyebabkan postback, menandatangani Jisun keluar dari sistem, dan kemudian mengarahkannya ke Logout.aspx. Seperti yang ditunjukkan Gambar 19, pada saat Jisun mencapai Logout.aspx dia telah keluar dan karena itu anonim. Akibatnya, kolom kiri menunjukkan teks "Selamat datang, orang asing" dan tautan ke halaman login.

Gambar 18: Default.aspx menunjukkan "Selamat Datang Kembali, Jisun" bersama dengan LinkButton "Logout" (Klik untuk melihat gambar ukuran penuh)

Gambar 19: Logout.aspx Menampilkan "Selamat Datang, Orang Asing" Bersama dengan LinkButton "Login" (Klik untuk melihat gambar ukuran penuh)

Nota

Saya mendorong Anda untuk menyesuaikan halaman Logout.aspx untuk menyembunyikan LoginContent ContentPlaceHolder halaman master (seperti yang kami lakukan untuk Login.aspx di Langkah 4). Alasannya adalah karena LinkButton "Login" yang dirender oleh kontrol LoginStatus (yang di bawah "Halo, orang asing") mengirim pengguna ke halaman login yang meneruskan URL saat ini dalam parameter querystring ReturnUrl. Singkatnya, jika pengguna yang telah keluar mengklik LinkButton "Login" LoginStatus ini, dan kemudian masuk, mereka akan diarahkan kembali ke Logout.aspx, yang dapat dengan mudah membingungkan pengguna.

Ringkasan

Dalam tutorial ini kita mulai dengan pemeriksaan alur kerja otentikasi formulir dan kemudian beralih ke penerapan otentikasi formulir dalam aplikasi ASP.NET. Autentikasi formulir didukung oleh FormsAuthenticationModule, yang memiliki dua tanggung jawab: mengidentifikasi pengguna berdasarkan tiket autentikasi formulir mereka, dan mengarahkan pengguna yang tidak sah ke halaman login.

Kelas FormsAuthentication .NET Framework mencakup metode untuk membuat, memeriksa, dan menghapus tiket autentikasi formulir. Properti Request.IsAuthenticated dan objek User memberikan dukungan terprogram tambahan untuk menentukan apakah permintaan diautentikasi dan informasi tentang identitas pengguna. Ada juga kontrol Web LoginView, LoginStatus, dan LoginName, yang memberi pengembang cara cepat dan bebas kode untuk melakukan banyak tugas umum terkait login. Kami akan memeriksa ini dan kontrol Web terkait login lainnya secara lebih rinci dalam tutorial mendatang.

Tutorial ini memberikan gambaran sekilas tentang autentikasi formulir. Kami tidak memeriksa berbagai opsi konfigurasi, melihat cara kerja tiket autentikasi formulir tanpa cookie, atau mengeksplorasi cara ASP.NET melindungi konten tiket autentikasi formulir.

Selamat Pemrograman!

Bacaan Lebih Lanjut

Untuk informasi selengkapnya tentang topik yang dibahas dalam tutorial ini, lihat sumber daya berikut:

• Perubahan Antara Keamanan IIS6 dan IIS7
• Login ASP.NET Kontrol
• Profesional ASP.NET 2.0 Keamanan, Keanggotaan, dan Manajemen Peran (ISBN: 978-0-7645-9698-8)
• Elemen <authentication>
• <forms> Elemen untuk<authentication>

Pelatihan Video tentang Topik yang Terkandung dalam Tutorial ini

• Menggunakan Autentikasi Formulir Dasar di ASP.NET

Tentang Penulis

Scott Mitchell, penulis tujuh buku ASP/ASP.NET dan pendiri 4GuysFromRolla.com, telah bekerja sama dengan teknologi Microsoft Web sejak 1998. Scott bekerja sebagai konsultan, pelatih, dan penulis independen. Buku terbarunya adalah Sams Teach Yourself ASP.NET 2.0 dalam 24 Jam. Dia dapat dijangkau di mitchell@4GuysFromRolla.com.

Terima kasih khusus untuk...

Seri tutorial ini ditinjau oleh banyak peninjau yang bermanfaat. Peninjau prospek untuk tutorial ini adalah Seri tutorial ini ditinjau oleh banyak peninjau yang bermanfaat. Peninjau utama untuk tutorial ini termasuk Alicja Maziarz, John Suru, dan Teresa Murphy. Tertarik untuk meninjau artikel MSDN saya yang akan datang? Jika demikian, hubungi saya di mitchell@4GuysFromRolla.com.

SebelumnyaBerikutnya