Bagikan melalui

Menambahkan Identitas ASP.NET ke Proyek Formulir Web Kosong atau Yang Sudah Ada

Tutorial ini menunjukkan kepada Anda cara menambahkan ASP.NET Identity (sistem keanggotaan baru untuk ASP.NET) ke aplikasi ASP.NET.

Saat Anda membuat Formulir Web atau proyek MVC baru di Visual Studio 2017 RTM dengan Akun Individual, Visual Studio akan menginstal semua paket yang diperlukan dan menambahkan semua kelas yang diperlukan untuk Anda. Tutorial ini akan mengilustrasikan langkah-langkah untuk menambahkan dukungan ASP.NET Identity ke proyek Formulir Web yang sudah ada atau proyek kosong baru. Saya akan menguraikan semua paket NuGet yang perlu Anda instal, dan kelas yang perlu Anda tambahkan. Saya akan membahas sampel Formulir Web untuk mendaftarkan pengguna baru dan masuk sambil menyoroti semua API titik masuk utama untuk manajemen dan autentikasi pengguna. Sampel ini akan menggunakan implementasi default ASP.NET Identity untuk penyimpanan data SQL yang dibangun di Entity Framework. Tutorial ini, kita akan menggunakan LocalDB untuk database SQL.

Mulai menggunakan identitas ASP.NET

  1. Mulailah dengan menginstal dan menjalankan Visual Studio 2017.

  2. Pilih Proyek Baru dari halaman Mulai, atau Anda bisa menggunakan menu dan pilih File, lalu Proyek Baru.

  3. Di panel kiri, perluas Visual C#, lalu pilih Web, lalu ASP.NET Aplikasi Web (.Net Framework). Beri nama proyek Anda "WebFormsIdentity" dan pilih OK.

    Gambar yang menampilkan pembuatan proyek baru

  4. Dalam dialog Proyek ASP.NET Baru , pilih templat Kosong .

    Jendela dialog proyek A S P dot N E T baru

    Perhatikan tombol Ubah Autentikasi dinonaktifkan dan tidak ada dukungan autentikasi yang disediakan dalam templat ini. Templat Web Forms, MVC, dan Web API memungkinkan Anda memilih pendekatan autentikasi.

Menambahkan paket Identitas ke aplikasi Anda

Di Penjelajah Solusi, klik kanan proyek Anda dan pilih Kelola Paket NuGet. Cari dan instal paket Microsoft.AspNet.Identity.EntityFramework .

Gambar yang mengilustrasikan cara mengakses kelola paket Nu Get

Perhatikan bahwa paket ini akan menginstal paket dependensi: EntityFramework dan Microsoft ASP.NET Identity Core.

Menambahkan formulir web untuk mendaftarkan pengguna

  1. Di Penjelajah Solusi, klik kanan proyek Anda dan pilih Tambahkan, lalu Formulir Web.

    Gambar memperlihatkan cara menambahkan formulir web ke pengguna terdaftar

  2. Dalam kotak dialog Tentukan Nama untuk Item , beri nama formulir web baru Daftar, lalu pilih OK

  3. Ganti markup dalam file Register.aspx yang dihasilkan dengan kode di bawah ini. Perubahan kode disorot.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="WebFormsIdentity.Register" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body style="font-family: Arial, Helvetica, sans-serif; font-size: small">
    <form id="form1" runat="server">
    <div>
        <h4 style="font-size: medium">Register a new user</h4>
        <hr />
        <p>
            <asp:Literal runat="server" ID="StatusMessage" />
        </p>                
        <div style="margin-bottom:10px">
            <asp:Label runat="server" AssociatedControlID="UserName">User name</asp:Label>
            <div>
                <asp:TextBox runat="server" ID="UserName" />                
            </div>
        </div>
        <div style="margin-bottom:10px">
            <asp:Label runat="server" AssociatedControlID="Password">Password</asp:Label>
            <div>
                <asp:TextBox runat="server" ID="Password" TextMode="Password" />                
            </div>
        </div>
        <div style="margin-bottom:10px">
            <asp:Label runat="server" AssociatedControlID="ConfirmPassword">Confirm password</asp:Label>
            <div>
                <asp:TextBox runat="server" ID="ConfirmPassword" TextMode="Password" />                
            </div>
        </div>
        <div>
            <div>
                <asp:Button runat="server" OnClick="CreateUser_Click" Text="Register" />
            </div>
        </div>
    </div>
    </form>
</body>
</html>

    Catatan

    Ini hanyalah versi sederhana dari file Register.aspx yang dibuat saat Anda membuat proyek ASP.NET Web Forms baru. Markup di atas menambahkan bidang formulir dan tombol untuk mendaftarkan pengguna baru.

  4. Buka file Register.aspx.cs dan ganti konten file dengan kode berikut:

    using Microsoft.AspNet.Identity;
using Microsoft.AspNet.Identity.EntityFramework;
using System;
using System.Linq;

namespace WebFormsIdentity
{
   public partial class Register : System.Web.UI.Page
   {
      protected void CreateUser_Click(object sender, EventArgs e)
      {
         // Default UserStore constructor uses the default connection string named: DefaultConnection
         var userStore = new UserStore<IdentityUser>();
         var manager = new UserManager<IdentityUser>(userStore);

         var user = new IdentityUser() { UserName = UserName.Text };
         IdentityResult result = manager.Create(user, Password.Text);

         if (result.Succeeded)
         {
            StatusMessage.Text = string.Format("User {0} was created successfully!", user.UserName);
         }
         else
         {
            StatusMessage.Text = result.Errors.FirstOrDefault();
         }
      }
   }
}

    Catatan

    1. Kode di atas adalah versi sederhana dari file Register.aspx.cs yang dibuat saat Anda membuat proyek ASP.NET Web Forms baru.
    2. Kelas IdentityUser adalah implementasi EntityFramework default dari antarmuka IUser . Antarmuka IUser adalah antarmuka minimal untuk pengguna di ASP.NET Identity Core.
    3. Kelas UserStore adalah implementasi EntityFramework default dari penyimpanan pengguna. Kelas ini mengimplementasikan antarmuka minimal ASP.NET Identity Core: IUserStore, IUserLoginStore, IUserClaimStore , dan IUserRoleStore.
    4. Kelas UserManager mengekspos API terkait pengguna yang akan secara otomatis menyimpan perubahan ke UserStore.
    5. Kelas IdentityResult mewakili hasil operasi identitas.

  5. Di Penjelajah Solusi, klik kanan proyek Anda dan pilih Tambahkan, Tambahkan folder ASP.NET lalu App_Data.

    Ilustrasi cara menambahkan data aplikasi

  6. Buka file Web.config dan tambahkan entri string koneksi untuk database yang akan kami gunakan untuk menyimpan informasi pengguna. Database akan dibuat pada runtime oleh EntityFramework untuk entitas Identitas. String koneksi mirip dengan string yang dibuat untuk Anda saat Anda membuat proyek Formulir Web baru. Kode yang disorot menunjukkan markup yang harus Anda tambahkan:

    <?xml version="1.0" encoding="utf-8"?>
<!--
  For more information on how to configure your ASP.NET application, please visit
  https://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <configSections>
    <!-- For more information on Entity Framework configuration, visit https://go.microsoft.com/fwlink/?LinkID=237468 -->
    <section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
  </configSections>
   <connectionStrings>
      <add name="DefaultConnection" connectionString="Data Source=(LocalDb)\v11.0;AttachDbFilename=|DataDirectory|\WebFormsIdentity.mdf;Initial Catalog=WebFormsIdentity;Integrated Security=True"
            providerName="System.Data.SqlClient" />
   </connectionStrings>
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" />
  </system.web>
  <entityFramework>
    <defaultConnectionFactory type="System.Data.Entity.Infrastructure.LocalDbConnectionFactory, EntityFramework">
      <parameters>
        <parameter value="v11.0" />
      </parameters>
    </defaultConnectionFactory>
    <providers>
      <provider invariantName="System.Data.SqlClient" type="System.Data.Entity.SqlServer.SqlProviderServices, EntityFramework.SqlServer" />
    </providers>
  </entityFramework>
</configuration>

    Catatan

    Untuk Visual Studio 2015 atau yang lebih tinggi, ganti (localdb)\v11.0 dengan (localdb)\MSSQLLocalDB di string koneksi Anda.

  7. Klik kanan file Register.aspx di proyek Anda dan pilih Atur sebagai Halaman Mulai. Tekan Ctrl+F5 untuk membangun dan menjalankan aplikasi web. Masukkan nama pengguna dan kata sandi baru lalu pilih Daftar.

    Gambar berhasil pendaftaran pengguna baru

    Catatan

    ASP.NET Identity memiliki dukungan untuk validasi dan dalam sampel ini Anda dapat memverifikasi perilaku default pada validator Pengguna dan Kata Sandi yang berasal dari paket Identity Core. Validator default untuk Pengguna (UserValidator) memiliki properti AllowOnlyAlphanumericUserNames yang memiliki nilai default yang diatur ke true. Validator default untuk Kata Sandi (MinimumLengthValidator) memastikan bahwa kata sandi memiliki setidaknya 6 karakter. Validator ini adalah properti yang UserManager dapat ditimpa jika Anda ingin memiliki validasi kustom,

Memverifikasi database dan tabel Identitas LocalDb yang dihasilkan oleh Kerangka Kerja Entitas

  1. Di menu Tampilan , pilih Penjelajah Server.

    Gambar cara mengakses penjelajah server

  2. Perluas DefaultConnection (WebFormsIdentity), perluas Tabel, klik kanan AspNetUsers lalu pilih Tampilkan Data Tabel.

    Gambar cara mengakses memperlihatkan data tabel
    Gambar yang menampilkan data tabel pengguna terdaftar

Mengonfigurasi aplikasi untuk autentikasi OWIN

Pada titik ini kami hanya menambahkan dukungan untuk membuat pengguna. Sekarang, kita akan menunjukkan bagaimana kita dapat menambahkan autentikasi untuk masuk ke pengguna. ASP.NET Identity menggunakan middleware Autentikasi Microsoft OWIN untuk autentikasi formulir. Autentikasi Cookie OWIN adalah cookie dan mekanisme autentikasi berbasis klaim yang dapat digunakan oleh kerangka kerja apa pun yang dihosting di OWIN atau IIS. Dengan model ini, paket autentikasi yang sama dapat digunakan di beberapa kerangka kerja termasuk ASP.NET MVC dan Formulir Web. Untuk informasi selengkapnya tentang proyek Katana dan cara menjalankan middleware dalam agnostik host, lihat Memulai Proyek Katana.

Menginstal paket autentikasi ke aplikasi Anda

  1. Di Penjelajah Solusi, klik kanan proyek Anda dan pilih Kelola Paket NuGet. Cari dan instal paket Microsoft.AspNet.Identity.Owin .

    Gambar manajer paket Nu Get

  2. Cari dan instal paket Microsoft.Owin.Host.SystemWeb .

    Catatan

    Paket Microsoft.Aspnet.Identity.Owin berisi sekumpulan kelas ekstensi OWIN untuk mengelola dan mengonfigurasi middleware autentikasi OWIN untuk digunakan oleh paket ASP.NET Identity Core. Paket Microsoft.Owin.Host.SystemWeb berisi server OWIN yang memungkinkan aplikasi berbasis OWIN berjalan di IIS menggunakan alur permintaan ASP.NET. Untuk informasi selengkapnya, lihat Middleware OWIN di alur terintegrasi IIS.

Menambahkan kelas konfigurasi startup dan autentikasi OWIN

  1. Di Penjelajah Solusi, klik kanan proyek Anda, pilih Tambahkan, lalu Tambahkan Item Baru. Dalam dialog kotak teks pencarian, ketik "owin". Beri nama kelas "Startup" dan pilih Tambahkan.

    Gambar jendela tambahkan item baru

  2. Dalam file Startup.cs, tambahkan kode yang disorot yang ditunjukkan di bawah ini untuk mengonfigurasi autentikasi cookie OWIN.

    using Microsoft.AspNet.Identity;
using Microsoft.Owin;
using Microsoft.Owin.Security.Cookies;
using Owin;

[assembly: OwinStartup(typeof(WebFormsIdentity.Startup))]

namespace WebFormsIdentity
{
   public class Startup
   {
      public void Configuration(IAppBuilder app)
      {
         // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=316888
         app.UseCookieAuthentication(new CookieAuthenticationOptions
         {
            AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
            LoginPath = new PathString("/Login")
         });
      }
   }
}

    Catatan

    Kelas ini berisi OwinStartup atribut untuk menentukan kelas startup OWIN. Setiap aplikasi OWIN memiliki kelas startup tempat Anda menentukan komponen untuk alur aplikasi. Lihat Deteksi Kelas Startup OWIN untuk informasi selengkapnya tentang model ini.

Menambahkan formulir web untuk mendaftar dan memasukkan pengguna

  1. Buka file Register.aspx.cs dan tambahkan kode berikut yang memasukkan pengguna saat pendaftaran berhasil.

    using Microsoft.AspNet.Identity;
using Microsoft.AspNet.Identity.EntityFramework;
using Microsoft.Owin.Security;
using System;
using System.Linq;
using System.Web;

namespace WebFormsIdentity
{
   public partial class Register : System.Web.UI.Page
   {
      protected void CreateUser_Click(object sender, EventArgs e)
      {
         // Default UserStore constructor uses the default connection string named: DefaultConnection
         var userStore = new UserStore<IdentityUser>();
         var manager = new UserManager<IdentityUser>(userStore);
         var user = new IdentityUser() { UserName = UserName.Text };

         IdentityResult result = manager.Create(user, Password.Text);

         if (result.Succeeded)
         {
            var authenticationManager = HttpContext.Current.GetOwinContext().Authentication;
            var userIdentity = manager.CreateIdentity(user, DefaultAuthenticationTypes.ApplicationCookie);
            authenticationManager.SignIn(new AuthenticationProperties() { }, userIdentity);
            Response.Redirect("~/Login.aspx");
         }
         else
         {
            StatusMessage.Text = result.Errors.FirstOrDefault();
         }
      }
   }
}

    Catatan

    • Karena ASP.NET Identity dan Otentikasi Cookie OWIN adalah sistem berbasis klaim, kerangka kerja mengharuskan pengembang aplikasi untuk menghasilkan ClaimsIdentity untuk pengguna. ClaimsIdentity memiliki informasi tentang semua klaim untuk pengguna seperti Peran apa yang dimiliki pengguna. Anda juga dapat menambahkan lebih banyak klaim untuk pengguna pada tahap ini.
    • Anda dapat memasukkan pengguna dengan menggunakan AuthenticationManager dari OWIN dan memanggil SignIn dan meneruskan ClaimsIdentity seperti yang ditunjukkan di atas. Kode ini akan memasukkan pengguna dan menghasilkan cookie juga. Panggilan ini dianalogikan dengan FormAuthentication.SetAuthCookie yang digunakan oleh modul FormsAuthentication .

  2. Di Penjelajah Solusi, klik kanan proyek Anda, pilih Tambahkan, lalu Formulir Web. Beri nama formulir web Masuk.

    Gambar menambahkan formulir web baru

  3. Ganti konten file Login.aspx dengan kode berikut:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="WebFormsIdentity.Login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title></title>
</head>
<body style="font-family: Arial, Helvetica, sans-serif; font-size: small">
   <form id="form1" runat="server">
      <div>
         <h4 style="font-size: medium">Log In</h4>
         <hr />
         <asp:PlaceHolder runat="server" ID="LoginStatus" Visible="false">
            <p>
               <asp:Literal runat="server" ID="StatusText" />
            </p>
         </asp:PlaceHolder>
         <asp:PlaceHolder runat="server" ID="LoginForm" Visible="false">
            <div style="margin-bottom: 10px">
               <asp:Label runat="server" AssociatedControlID="UserName">User name</asp:Label>
               <div>
                  <asp:TextBox runat="server" ID="UserName" />
               </div>
            </div>
            <div style="margin-bottom: 10px">
               <asp:Label runat="server" AssociatedControlID="Password">Password</asp:Label>
               <div>
                  <asp:TextBox runat="server" ID="Password" TextMode="Password" />
               </div>
            </div>
            <div style="margin-bottom: 10px">
               <div>
                  <asp:Button runat="server" OnClick="SignIn" Text="Log in" />
               </div>
            </div>
         </asp:PlaceHolder>
         <asp:PlaceHolder runat="server" ID="LogoutButton" Visible="false">
            <div>
               <div>
                  <asp:Button runat="server" OnClick="SignOut" Text="Log out" />
               </div>
            </div>
         </asp:PlaceHolder>
      </div>
   </form>
</body>
</html>

  4. Ganti konten file Login.aspx.cs dengan yang berikut ini:

    using Microsoft.AspNet.Identity;
using Microsoft.AspNet.Identity.EntityFramework;
using Microsoft.Owin.Security;
using System;
using System.Web;
using System.Web.UI.WebControls;

namespace WebFormsIdentity
{
   public partial class Login : System.Web.UI.Page
   {
      protected void Page_Load(object sender, EventArgs e)
      {
         if (!IsPostBack)
         {
            if (User.Identity.IsAuthenticated)
            {
               StatusText.Text = string.Format("Hello {0}!!", User.Identity.GetUserName());
               LoginStatus.Visible = true;
               LogoutButton.Visible = true;
            }
            else
            {
               LoginForm.Visible = true;
            }
         }
      }

      protected void SignIn(object sender, EventArgs e)
      {
         var userStore = new UserStore<IdentityUser>();
         var userManager = new UserManager<IdentityUser>(userStore);
         var user = userManager.Find(UserName.Text, Password.Text);

         if (user != null)
         {
            var authenticationManager = HttpContext.Current.GetOwinContext().Authentication;
            var userIdentity = userManager.CreateIdentity(user, DefaultAuthenticationTypes.ApplicationCookie);

            authenticationManager.SignIn(new AuthenticationProperties() { IsPersistent = false }, userIdentity);
            Response.Redirect("~/Login.aspx");
         }
         else
         {
            StatusText.Text = "Invalid username or password.";
            LoginStatus.Visible = true;
         }
      }

      protected void SignOut(object sender, EventArgs e)
      {
         var authenticationManager = HttpContext.Current.GetOwinContext().Authentication;
         authenticationManager.SignOut();
         Response.Redirect("~/Login.aspx");
      }
   }
}

    Catatan

    • Sekarang Page_Load memeriksa status pengguna saat ini dan mengambil tindakan berdasarkan statusnya Context.User.Identity.IsAuthenticated . Tampilan Masuk Nama Pengguna : Microsoft ASP.NET Identity Framework telah menambahkan metode ekstensi pada System.Security.Principal.IIdentity yang memungkinkan Anda mendapatkan UserName dan UserId untuk Pengguna yang masuk. Metode ekstensi ini didefinisikan dalam perakitan Microsoft.AspNet.Identity.Core . Metode ekstensi ini adalah pengganti untuk HttpContext.User.Identity.Name .
    • Metode SignIn: This metode menggantikan metode sebelumnya CreateUser_Click dalam sampel ini dan sekarang masuk ke pengguna setelah berhasil membuat pengguna.
      Microsoft OWIN Framework telah menambahkan metode ekstensi yang System.Web.HttpContext memungkinkan Anda mendapatkan referensi ke IOwinContext. Metode ekstensi ini didefinisikan dalam Microsoft.Owin.Host.SystemWeb rakitan. Kelas OwinContext mengekspos IAuthenticationManager properti yang mewakili fungsi middleware Autentikasi yang tersedia pada permintaan saat ini. Anda dapat memasukkan pengguna dengan menggunakan AuthenticationManager dari OWIN dan memanggil SignIn dan meneruskan seperti yang ClaimsIdentity ditunjukkan di atas. Karena ASP.NET Identity dan OWIN Cookie Authentication adalah sistem berbasis klaim, kerangka kerja mengharuskan aplikasi untuk menghasilkan ClaimsIdentity untuk pengguna. memiliki ClaimsIdentity informasi tentang semua klaim untuk pengguna, seperti peran apa yang dimiliki pengguna. Anda juga dapat menambahkan lebih banyak klaim untuk pengguna pada tahap ini Kode ini akan masuk ke pengguna dan menghasilkan cookie juga. Panggilan ini dianalogikan dengan FormAuthentication.SetAuthCookie yang digunakan oleh modul FormsAuthentication .
    • SignOut metode: Mendapatkan referensi ke AuthenticationManager dari OWIN dan memanggil SignOut. Ini dianalogikan dengan metode FormsAuthentication.SignOut yang digunakan oleh modul FormsAuthentication .

  5. Tekan Ctrl + F5 untuk membangun dan menjalankan aplikasi web. Masukkan nama pengguna dan kata sandi baru lalu pilih Daftar.

    Gambar pendaftaran usr baru
    Catatan: Pada titik ini, pengguna baru dibuat dan masuk.

  6. Pilih tombol Keluar . Anda diarahkan ke formulir Masuk.

  7. Masukkan nama pengguna atau kata sandi yang tidak valid dan pilih tombol Masuk . Metode UserManager.Find akan mengembalikan null dan pesan kesalahan: " Nama pengguna atau kata sandi yang tidak valid " akan ditampilkan.

    Gambar upaya masuk yang tidak valid

  • Last updated on