Gambaran Umum Autentikasi Formulir (C#)

oleh Scott Mitchell

Catatan

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 kemampuan pengujian
  • 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 hanya diskusi menjadi implementasi; secara khusus, kita akan melihat penerapan autentikasi formulir. Aplikasi web yang kita mulai bangun dalam tutorial ini akan terus dibangun dalam tutorial berikutnya, saat kita berpindah dari autentikasi formulir sederhana ke keanggotaan dan peran.

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

Pengantar

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

Tutorial ini dimulai dengan tampilan mendalam pada alur kerja autentikasi formulir, topik yang kami sentuh di tutorial sebelumnya. Setelah itu, kami akan membuat situs web ASP.NET untuk demo konsep autentikasi formulir. Selanjutnya, kami akan mengonfigurasi situs untuk menggunakan autentikasi formulir, membuat halaman masuk sederhana, dan melihat cara menentukan, dalam kode, apakah pengguna diautentikasi dan, jika demikian, nama pengguna yang mereka masuki.

Memahami alur kerja autentikasi formulir, mengaktifkannya di aplikasi web, dan membuat halaman masuk dan keluar semuanya merupakan 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 bekerja melalui tutorial ini secara penuh sebelum beralih ke yang berikutnya bahkan jika Anda sudah memiliki pengalaman mengonfigurasi autentikasi 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 akan memunculkan sejumlah peristiwa selama siklus hidupnya. Ada peristiwa yang diajukan pada awal dan akhir permintaan, yang diajukan ketika permintaan diautentikasi dan diotorisasi, peristiwa yang dinaikkan dalam kasus pengecualian yang tidak tertangani, 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 dikirim dengan sejumlah Modul HTTP yang melakukan tugas penting di belakang layar. Dua Modul HTTP bawaan yang sangat relevan dengan diskusi kami adalah:

  • FormsAuthenticationModule – mengautentikasi pengguna dengan memeriksa tiket autentikasi formulir, yang biasanya disertakan dalam koleksi cookie pengguna. Jika tidak ada tiket autentikasi formulir, pengguna bersifat 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 mencakup FileAuthorizationModule yang menentukan otoritas dengan berkonsultasi dengan ACL file yang diminta.

Upaya FormsAuthenticationModule untuk mengautentikasi pengguna sebelum UrlAuthorizationModule (dan FileAuthorizationModule) dieksekusi. 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 mereka kepada 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 mengalihkan pengguna ke halaman masuk sebagai gantinya (melalui status Pengalihan HTTP 302 ).

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

Alur Kerja Autentikasi Formulir

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 menelusuri situs. Ini biasanya dicapai dengan menempatkan tiket autentikasi dalam koleksi cookie pengguna. Cookie adalah file teks kecil yang berada di komputer pengguna dan ditransmisikan di header HTTP pada setiap permintaan ke situs web yang membuat cookie. Oleh karena itu, setelah formulir tiket autentikasi dibuat dan disimpan di cookie browser, setiap kunjungan berikutnya ke situs tersebut mengirimkan tiket autentikasi bersama dengan permintaan, sehingga mengidentifikasi pengguna.

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

Catatan

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 autentikasi formulir tanpa cookie. Dalam mode ini, tiket autentikasi dikodekan ke dalam URL. Kita akan melihat kapan tiket autentikasi tanpa cookie digunakan dan bagaimana mereka dibuat dan dikelola dalam tutorial berikutnya.

Cakupan Autentikasi Formulir

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

Namun, IIS 7 memungkinkan IIS terintegrasi dan alur ASP.NET. 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 dengan 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 sumber daya 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 di seluruh seri ini akan dibuat dengan versi gratis Microsoft Visual Studio 2008, Visual Web Developer 2008. Kami akan mengimplementasikan penyimpanan SqlMembershipProvider 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 ditampilkan.

Catatan

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 ditargetkan untuk .NET 3.5, file Web.config-nya mencakup elemen konfigurasi tambahan khusus 3,5. 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 autentikasi formulir, pertama-tama kita memerlukan situs web ASP.NET. Mulailah dengan membuat situs web ASP.NET berbasis sistem file baru. Untuk menyelesaikan ini, luncurkan Visual Web Developer lalu masuk ke 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.

Catatan

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 ke dalam satu perakitan, 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. Visual Web Developer edisi 2005 dan 2008, namun, hanya mendukung Proyek Situs Web. Saya akan menggunakan model Proyek Situs Web. Jika Anda menggunakan edisi non-Ekspres 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 cuplikan layar yang ditunjukkan dan instruksi yang disediakan dalam tutorial ini.

Buat File Baru System-Based Situs Web

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

Menambahkan Halaman Master

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

Tambahkan Halaman Master Bernama Site.master ke Situs Web

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 bisa menggunakan tampilan Desain dan menambahkan kontrol Tata Letak atau Web apa pun yang Anda butuhkan, atau Anda bisa menambahkan markup secara manual dengan tangan dalam tampilan Sumber. Saya menyusun tata letak halaman master saya untuk meniru tata letak yang digunakan dalam seri tutorial Bekerja dengan Data di ASP.NET 2.0 (lihat Gambar 4). Halaman master menggunakan lembar gaya kaskade untuk posisi dan gaya dengan pengaturan CSS yang ditentukan dalam file Style.css (yang disertakan dalam unduhan terkait tutorial ini). Meskipun Anda tidak dapat mengetahui dari markup yang ditunjukkan di bawah ini, aturan CSS didefinisikan sed 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 bisa diedit oleh halaman ASP.NET yang menggunakan halaman master. Wilayah konten yang dapat diedit ini ditunjukkan oleh ContentPlaceHolder kontrol, yang dapat dilihat dalam konten <div>. 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 .

Halaman Master, Saat Ditampilkan Melalui Tampilan Desain

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

Membuat Halaman Isi

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

Tambahkan Halaman Default.aspx Baru Yang Memilih Untuk Memilih Halaman Master

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

Gunakan Halaman Master Site.master

Gambar 6: Gunakan Halaman Master Site.master

Catatan

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 bertipe "Formulir Konten Web." Setelah memilih opsi "Formulir Konten Web" dan mengklik Tambahkan, Visual Studio akan menampilkan kotak dialog Pilih Master yang sama yang diperlihatkan dalam Gambar 6.

Markup deklaratif halaman Default.aspx baru hanya menyertakan direktif yang @Page 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. Kami akan kembali ke dalamnya nanti dalam tutorial ini untuk menambahkan konten.

Catatan

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

Langkah 2: Mengaktifkan Autentikasi Formulir

Dengan situs web ASP.NET dibuat, tugas kami berikutnya adalah mengaktifkan autentikasi formulir. Konfigurasi autentikasi aplikasi ditentukan melalui <authentication> elemen dalam Web.config. Elemen <authentication> berisi mode bernama atribut tunggal 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 autentikasi Windows, server web bertanggung jawab untuk mengautentikasi pengunjung, dan ini biasanya dilakukan melalui autentikasi Dasar, Hash, atau Windows Terintegrasi.
  • Formulir– pengguna diautentikasi melalui formulir di halaman web.
  • Paspor– pengguna diautentikasi menggunakan Jaringan Paspor Microsoft.
  • Tidak ada– tidak ada model autentikasi yang digunakan; semua pengunjung bersifat anonim.

Secara default, aplikasi ASP.NET menggunakan autentikasi Windows. Untuk mengubah jenis autentikasi ke 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 nama proyek di Penjelajah Solusi, memilih Tambahkan Item Baru, lalu tambahkan file Konfigurasi Web.

Jika proyek Anda belum menyertakan Web.config, tambahkan sekarang

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 mirip dengan yang berikut ini:

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

Catatan

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

Elemen <authentication> dapat secara opsional menyertakan <forms> elemen anak yang berisi pengaturan khusus autentikasi formulir. Untuk saat ini, mari kita gunakan pengaturan autentikasi formulir default. Kami akan menjelajahi <forms> elemen anak secara lebih rinci dalam tutorial berikutnya.

Langkah 3: Membangun Halaman Masuk

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

Secara default, sistem autentikasi formulir mengharapkan halaman masuk diberi nama Login.aspx dan ditempatkan di direktori akar aplikasi web. Jika Anda ingin menggunakan URL halaman masuk yang berbeda, Anda dapat melakukannya dengan menentukannya di Web.config. Kita akan melihat cara melakukan ini dalam tutorial berikutnya.

Halaman masuk 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 autentikasi formulir.

Membuat Antarmuka Pengguna Halaman Masuk

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.

Tambahkan Halaman ASP.NET Baru Bernama Login.aspx

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

Antarmuka halaman masuk umum 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 autentikasi yang dihasilkan di seluruh restart browser.

Tambahkan dua Kotak Teks untuk Login.aspx dan atur propertinya ID masing-masing ke Nama Pengguna dan Kata Sandi. Atur juga properti Kata Sandi TextMode ke Kata Sandi. Selanjutnya, tambahkan kontrol CheckBox, atur propertinya ID ke RememberMe dan propertinya Text ke "Ingat Saya". Setelah itu, tambahkan Tombol bernama LoginButton yang propertinya Text diatur ke "Login". Dan akhirnya, tambahkan kontrol Web Label dan atur propertinya ID ke InvalidCredentialsMessage, propertinya Text ke "Nama pengguna atau kata sandi Anda tidak valid. Silakan coba lagi.", propertinya ForeColor ke Merah, dan propertinya Visible ke False.

Pada titik ini layar Anda akan terlihat mirip dengan cuplikan layar di Gambar 9, dan sintaks deklaratif halaman Anda harus 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>

Halaman Masuk Berisi Dua Kotak Teks, Kotak Centang, Tombol, dan Label

Gambar 9: Halaman Masuk Berisi Dua Kotak Teks, Kotak Centang, Tombol, dan Label (Klik untuk melihat gambar ukuran penuh)

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

Menentukan Apakah Kredensial yang Disediakan Valid

Kita sekarang perlu menerapkan tugas 2 di penangan aktivitas Klik Tombol - menentukan apakah kredensial yang disediakan valid. Untuk melakukan ini, perlu ada penyimpanan pengguna yang menyimpan semua kredensial pengguna sehingga kami dapat menentukan apakah kredensial yang disediakan cocok dengan kredensial yang diketahui.

Sebelum ASP.NET 2.0, pengembang bertanggung jawab untuk menerapkan penyimpanan pengguna mereka sendiri dan menulis kode untuk memvalidasi kredensial yang disediakan terhadap toko. Sebagian besar pengembang akan menerapkan 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 disediakan pengguna akan melibatkan kueri database untuk nama pengguna yang cocok lalu memastikan bahwa kata sandi dalam database sesuai dengan kata sandi yang disediakan.

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

Daripada meluangkan waktu untuk membangun tabel database Pengguna kustom kami sendiri (yang akan usang setelah kami menerapkan SqlMembershipProvider), mari kita kode keras kredensial yang valid dalam halaman login itu sendiri. Di penanganan aktivitas 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 yang sama ("kata sandi"). Kode mengulangi array pengguna dan kata sandi yang mencari kecocokan nama pengguna dan kata sandi yang valid. Jika nama pengguna dan kata sandi valid, kita perlu masuk ke pengguna dan kemudian mengalihkannya ke halaman yang sesuai. Jika kredensial tidak valid, maka kami menampilkan Label InvalidCredentialsMessage.

Ketika pengguna memasukkan kredensial yang valid, saya menyebutkan bahwa mereka kemudian dialihkan ke "halaman yang sesuai." Halaman apa yang sesuai? Ingat bahwa ketika pengguna mengunjungi halaman, mereka tidak berwenang untuk melihat, FormsAuthenticationModule secara otomatis mengalihkannya ke halaman masuk. Dalam melakukannya, ini termasuk URL yang diminta dalam querystring melalui parameter ReturnUrl. Artinya, jika pengguna mencoba mengunjungi ProtectedPage.aspx, dan mereka tidak berwenang untuk melakukannya, FormsAuthenticationModule akan mengarahkan mereka ke:

Login.aspx? ReturnUrl=ProtectedPage.aspx

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

Pengelogan Pengguna

Dengan asumsi bahwa kredensial yang disediakan valid, kita perlu membuat tiket autentikasi formulir, sehingga masuk ke pengguna ke situs. Kelas FormsAuthentication di namespace System.Web.Security menyediakan berbagai metode untuk masuk dan mengeluarkan pengguna melalui sistem autentikasi formulir. Meskipun ada beberapa metode di kelas FormsAuthentication, ketiganya kami tertarik pada persamaan ini adalah:

  • GetAuthCookie(nama pengguna, persistCookie) – membuat tiket autentikasi formulir untuk nama pengguna yang disediakan. Selanjutnya, metode ini membuat dan mengembalikan objek HttpCookie yang menyimpan konten tiket autentikasi. Jika persistCookie benar, cookie persisten 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 mengalihkan pengguna ke halaman yang sesuai.

GetAuthCookie berguna ketika Anda perlu memodifikasi tiket autentikasi sebelum menulis cookie ke koleksi Cookie. SetAuthCookie berguna jika Anda ingin membuat tiket autentikasi formulir dan menambahkannya ke koleksi Cookie, tetapi tidak ingin mengalihkan pengguna ke halaman yang sesuai. Mungkin Anda ingin menyimpannya di halaman masuk atau mengirimnya ke beberapa halaman alternatif.

Karena kami ingin masuk ke pengguna dan mengalihkannya ke halaman yang sesuai, mari kita gunakan RedirectFromLoginPage. Perbarui penanganan aktivitas 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 Teks UserName TextBox untuk parameter nama pengguna tiket autentikasi formulir, dan status kotak centang RememberMe untuk parameter persistCookie .

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

Label InvalidCredentialsMessage Ditampilkan Saat Memasukkan Kredensial Tidak Valid

Gambar 10: Label InvalidCredentialsMessage Ditampilkan Saat Memasukkan Kredensial Tidak Valid (Klik untuk melihat gambar ukuran penuh)

Selanjutnya, masukkan kredensial yang valid dan klik tombol Masuk. Kali ini ketika postback terjadi tiket autentikasi formulir dibuat dan Anda secara otomatis dialihkan kembali ke Default.aspx. Pada titik ini Anda telah masuk ke situs web, meskipun tidak ada isjin visual untuk 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 mengeluarkan pengguna dari situs web.

Mengamankan Halaman Masuk

Ketika pengguna memasukkan kredensialnya dan mengirimkan formulir halaman masuk, 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 seluruh markup HTML halaman) dienkripsi sejak mereka meninggalkan browser sampai diterima oleh server web.

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

Catatan

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 autentikasi formulir sehingga tiket autentikasi formulir hanya dikirimkan melalui koneksi yang aman.

Langkah 4: Mendeteksi Pengunjung yang Diautentikasi dan Menentukan Identitas Mereka

Pada titik ini kami telah mengaktifkan autentikasi formulir dan membuat halaman login dasar, 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. Selain itu, kita sering kali perlu mengetahui identitas pengguna yang diautentikasi.

Mari kita pertambahkan halaman Default.aspx yang ada untuk menggambarkan teknik-teknik ini. Dalam Default.aspx tambahkan dua kontrol Panel, satu bernama AuthenticatedMessagePanel dan yang lain bernama AnonymousMessagePanel. Tambahkan kontrol Label bernama WelcomeBackMessage di Panel pertama. Di Panel kedua tambahkan kontrol HyperLink, atur properti Teks-nya ke "Masuk" dan properti NavigateUrl-nya ke "~/Login.aspx". Pada titik ini markup deklaratif untuk Default.aspx akan terlihat mirip dengan yang berikut ini:

<%@ 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 telah Anda tebak sekarang, ide di sini adalah untuk menampilkan hanya AuthenticatedMessagePanel kepada pengunjung yang diautentikasi dan hanya AnonymousMessagePanel kepada pengunjung anonim. Untuk mencapai hal 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 aktivitas 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 di tempat, kunjungi Default.aspx melalui browser. Dengan asumsi bahwa Anda belum masuk, Anda akan melihat tautan ke halaman masuk (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).

Saat Mengunjungi Secara Anonim, Tautan Masuk Ditampilkan

Gambar 11: Saat Mengunjungi Secara Anonim, Tautan Masuk Ditampilkan

Pengguna terautentikasi Ditampilkan

Gambar 12: Pengguna terautentikasi Ditampilkan "Selamat Datang kembali!" Pesan

Kami dapat menentukan identitas pengguna yang saat ini masuk melalui properti Penggunaobjek 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 Pengguna diatur oleh FormsAuthenticationModule. Secara khusus, ketika FormsAuthenticationModule menemukan tiket autentikasi formulir dalam permintaan masuk, ia membuat objek GenericPrincipal baru dan menetapkannya ke properti Pengguna.

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

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 "Formulir" untuk properti AuthenticationType-nya dan benar untuk properti IsAuthenticated-nya. Properti Nama mengembalikan nama pengguna yang ditentukan saat membuat tiket autentikasi formulir. Selain ketiga properti ini, FormsIdentity mencakup akses ke tiket autentikasi yang mendasar melalui properti Tiketnya. Properti Tiket mengembalikan objek jenis FormsAuthenticationTicket, yang memiliki properti seperti Expiration, IsPersistent, IssueDate, Name, dan sebagainya.

Poin penting yang harus 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 lalu mengakses properti Tiket:

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

Mari kita berikan pesan yang lebih dipersonalisasi dalam Default.aspx. Perbarui penanganan aktivitas 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).

Pesan Selamat Datang Menyertakan Nama Pengguna yang Saat Ini Masuk

Gambar 13: Pesan Selamat Datang Menyertakan Nama Pengguna yang Saat Ini Masuk

Menggunakan Kontrol LoginView dan LoginName

Menampilkan konten yang berbeda untuk 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 untuk pengguna yang diautentikasi dan anonim. LoginView menyertakan dua templat yang telah ditentukan sebelumnya:

  • AnonymousTemplate – markup apa pun yang ditambahkan ke templat ini hanya ditampilkan kepada pengunjung anonim.
  • LoggedInTemplate – markup templat ini hanya ditampilkan kepada pengguna yang diautentikasi.

Mari kita tambahkan kontrol LoginView ke halaman master situs kami, Site.master. Alih-alih hanya menambahkan kontrol LoginView, mari kita tambahkan kontrol ContentPlaceHolder baru lalu letakkan kontrol LoginView dalam ContentPlaceHolder baru tersebut. Alasan untuk keputusan ini akan segera menjadi jelas.

Catatan

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

Mulailah dengan menambahkan ContentPlaceHolder bernama LoginContent ke halaman master dalam elemen div> navigasi<. Anda cukup menyeret kontrol ContentPlaceHolder dari Kotak Alat ke tampilan Sumber, 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, ASP.NET halaman yang menggunakan halaman master ini dapat menentukan kontennya sendiri untuk setiap ContentPlaceHolder atau menggunakan konten default halaman master.

LoginView dan kontrol terkait login lainnya terletak di tab Masuk Kotak Alat.

Kontrol LoginView di Kotak Alat

Gambar 14: Kontrol LoginView di Kotak Alat

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

<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 Designer atau markup deklaratif. Dari Designer 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 ke "Log In" dan "~/Login.aspx", masing-masing.

Setelah mengonfigurasi AnonymousTemplate, beralihlah ke LoggedInTemplate dan masukkan teks, "Selamat datang kembali, ". Kemudian seret kontrol LoginName dari Kotak Alat 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 yang 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 ini ke halaman master Site.master, 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).

Tampilan Kontrol LoginView

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 masuk, karena tautan ke halaman masuk tampaknya tidak pada tempatnya di sana. Karena kami menempatkan kontrol LoginView di ContentPlaceHolder di halaman master, kami dapat mengambil alih markup default ini di halaman konten kami. Buka Login.aspx dan buka Designer. Karena kami belum secara eksplisit menentukan kontrol Konten di Login.aspx untuk LoginContent ContentPlaceHolder di halaman master, halaman masuk akan menampilkan markup default halaman master untuk ContentPlaceHolder ini. Anda dapat melihat ini melalui Designer – LoginContent ContentPlaceHolder menunjukkan markup default (kontrol LoginView).

Halaman Masuk Menampilkan Konten Default untuk Login Halaman MasterKonten ContentPlaceHolder

Gambar 16: Halaman Masuk Menampilkan Konten Default untuk Login Halaman MasterKonten ContentPlaceHolder (Klik untuk melihat gambar ukuran penuh)

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

Catatan

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, setelah membuat kontrol Konten baru, pastikan untuk menghapus konten yang disalin dari halaman master.

Gambar 17 memperlihatkan 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 navigasi <kiri div> seperti saat mengunjungi Default.aspx.

Halaman Masuk Menyembunyikan Markup ContentPlaceHolder Login Default

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

Langkah 5: Keluar

Pada Langkah 3 kami melihat membangun halaman masuk untuk masuk pengguna ke situs, tetapi kami belum melihat cara mengeluarkan pengguna. Selain metode untuk memasukkan pengguna, kelas FormsAuthentication juga menyediakan metode SignOut. Metode SignOut hanya menghancurkan formulir tiket autentikasi, sehingga mengeluarkan pengguna dari situs.

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

Mengklik LinkButton "Masuk" menyebabkan postback, dari mana pengalihan dikeluarkan ke halaman masuk. Mengklik LinkButton "Logout" menyebabkan kontrol LoginStatus memanggil metode FormsAuthentication.SignOff lalu mengalihkan 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; mengalihkan pengguna ke halaman yang baru saja mereka kunjungi. Jika halaman yang mereka kunjungi tidak mengizinkan pengguna anonim, maka FormsAuthenticationModule akan secara otomatis mengalihkan pengguna ke halaman masuk.

Anda mungkin penasaran mengapa pengalihan dilakukan di sini. Jika pengguna ingin tetap berada di halaman yang sama, mengapa perlu pengalihan eksplisit? Alasannya adalah karena ketika LinkButton "Logoff" diklik, pengguna masih memiliki tiket autentikasi 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 kembali halaman. Pada saat browser meminta kembali halaman, tiket autentikasi formulir telah dihapus dan oleh karena itu permintaan masuk bersifat anonim.

  • Pengalihan – pengguna dialihkan ke URL yang ditentukan oleh properti LogoutPageUrl LoginStatus.
  • RedirectToLoginPage – pengguna dialihkan ke halaman masuk.

Mari kita tambahkan kontrol LoginStatus ke halaman master dan konfigurasikan untuk menggunakan opsi Alihkan 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 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, itu 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 "Masuk" di AnonymousTemplate sangat berlebihan, jadi hapuslah.

Gambar 18 menunjukkan Default.aspx saat Jisun berkunjung. Perhatikan bahwa kolom kiri menampilkan pesan, "Selamat Datang kembali, Jisun" bersama dengan tautan untuk keluar. Mengklik log out LinkButton menyebabkan postback, menandatangani Jisun keluar dari sistem, lalu mengalihkannya ke Logout.aspx. Seperti yang ditunjukkan Oleh Gambar 19, pada saat Jisun mencapai Logout.aspx dia telah keluar dan karenanya anonim. Akibatnya, kolom kiri menampilkan teks "Selamat Datang, orang asing" dan tautan ke halaman masuk.

Default.aspx Tampilkan

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

Logout.aspx Tampilkan

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

Catatan

Saya mendorong Anda untuk menyesuaikan halaman Logout.aspx untuk menyembunyikan Halaman master LoginContent ContentPlaceHolder (seperti yang kami lakukan untuk Login.aspx di Langkah 4). Alasannya adalah karena LinkButton "Login" yang dirender oleh kontrol LoginStatus (yang ada 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 mengeklik 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 autentikasi formulir dan kemudian beralih ke penerapan autentikasi formulir dalam aplikasi ASP.NET. Autentikasi formulir didukung oleh FormsAuthenticationModule, yang memiliki dua tanggung jawab: mengidentifikasi pengguna berdasarkan tiket autentikasi formulir mereka, dan mengalihkan pengguna yang tidak sah ke halaman masuk.

Kelas FormsAuthentication .NET Framework mencakup metode untuk membuat, memeriksa, dan menghapus tiket autentikasi formulir. Properti Request.IsAuthenticated dan objek Pengguna menyediakan 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 umum sepatori autentikasi formulir. Kami tidak memeriksa berbagai opsi konfigurasi, melihat cara kerja tiket autentikasi bentuk tanpa cookie, atau menjelajahi bagaimana 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:

Pelatihan Video tentang Topik yang Terkandung dalam Tutorial ini

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 independen, pelatih, dan penulis. Buku terbarunya adalah Sams Teach Yourself ASP.NET 2.0 dalam 24 Jam. Dia dapat dijangkau di mitchell@4GuysFromRolla.com. atau melalui blognya, yang dapat ditemukan di http://ScottOnWriting.NET.

Terima kasih khusus untuk...

Seri tutorial ini ditinjau oleh banyak peninjau yang membantu. 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, jatuhkan saya baris di mitchell@4GuysFromRolla.com.