目錄

介紹

要求

安裝步驟

1.身份驗證和身份UI配置

2.身份永續性實現

建立資料庫

為Entity Framework Core配置ASP.NET Core

通過Entity Framework Core工具建立表

3.頁面轉換實現

在Razor View中獲取使用者資訊

_LoginPartial.cshtml的模型

退出連結

將部分檢視安裝到_Layout.cshtml

有關如何使用Microsoft.AspNetCore.Identity.UI包將身份驗證功能新增到現有ASP.NET Core專案的教程

Download sample - 1.9 MB

介紹

在本文中，我想向您展示如何使用Microsoft.AspNetCore.Identity.UI NuGet包向現有的ASP.NET Core專案新增身份驗證功能。該軟體包可以幫助我們很多，但我們需要了解軟體包的內容以及如何將其連線到您的應用程式。

在本教程中，從ASP.NET Core Web Application的模板開始，您將看到如何將身份驗證UI和身份永續性輕鬆安裝到現有Web應用程式中。您的Web應用程式將具有以下功能：

• 註冊新使用者
• 更改使用者密碼
• 登入應用程式
• 從應用程式登出

要求

• .NET Core SDK 2.1
  （2.1.403）
• PostgreSQL 10.3

本文中的內容也被證實可以與.NET Core 2.1.302一起使用。

PostgreSQL將成為身份永續性的儲存。

安裝步驟

1. 身份驗證和身份UI配置
2. 身份永續性實現
3. 頁面轉換實現

1.身份驗證和身份UI配置

使用ASP.NET Core Web App模板建立專案並執行它。您可以看到模板生成的網頁。如您所見，登入或註冊沒有連結。

在你進入下一個之前，讓我們將Microsoft.AspNetCore.App軟體包更新到最新版本。在我的例子中，生成的專案有2.1.1，我更新到2.1.5。

更新包後，您可能會收到構建錯誤

<ItemGroup>
  <PackageReference Include="Microsoft.AspNetCore.App" />
</ItemGroup>

按如下方式向節點新增Version屬性，然後錯誤將消失。

<ItemGroup>
  <PackageReference Include="Microsoft.AspNetCore.App" Version="2.1.5" />
</ItemGroup>

如果您使用的是Visual Studio 2017，則可以在NuGet包樹中的Microsoft.AspNetCore.App包下看到以下兩個包。這些是我們將要使用的包。

• Microsoft.AspNetCore.Authentication
• Microsoft.AspNetCore.Identity.UI

為了連線這些包，您需要配置Web應用程式。這些包提供了擴充套件方法，我們可以使用它們輕鬆完成配置。

將以下程式碼新增到Startup.cs中的Configure方法：

app.UseAuthentication();

以及ConfigureServices方法中新增以下程式碼。

services.AddDefaultIdentity<IdentityUser>();

現在，您的Web應用程式已配置，以便將對以下URL的請求路由到IdentityUI包中的程式碼裡。

• /Identity/Account/Register
• /Identity/Account/Login
• /Identity/Account/Manage
• /Identity/Account/Logout

但是，那些仍然不起作用，因為那些檢視需要部分檢視，位於/ Views / Shared / 中並命名為_LoginPartial.cshtml。

建立部分檢視檔案。您不必擁有任何內容，所以我們暫時將其保留為空檔案。

2.身份永續性實現

在您可以在上面的URL中檢視內容之前，您需要完成身份永續性的實現。包中的程式碼需要儲存來持久化身份驗證資訊。

首先，擁有一個數據庫，其次，配置您的應用程式以使用Entity Framework Core。最後，您可以通過Entity Framework Core工具生成所需的表。

建立資料庫

如果您已經有一些可以使用的資料庫，請跳過本節。如果沒有，請按照以下說明在本地計算機中快速建立一個空的PostgreSQL資料庫。

如果沒有PoinstgreSQL伺服器，請安裝PoinstgreSQL伺服器，併為資料庫在任何位置建立新目錄，同時允許訪問伺服器程序的使用者。之後，使用下面的SQL指令碼建立一個文字檔案，並將其命名為CreateDb.sql。

create role :name with LOGIN PASSWORD :pw;
create tablespace :name location :dir;
set default_tablespace = :name;
create database :name owner :name encoding 'UTF-8' template template0;

然後，使用以下命令通過psql執行它，同時替換$DB_DIR為您建立的資料庫目錄路徑。該指令碼建立了一個數據庫使用者和一個新資料庫，兩個名稱相同，叫sampledb。

psql -U postgres -f CreateDb.sql -v dir="'$DB_DIR'" -v name=sampledb -v pw="'sample'"

如果要稍後刪除並重新建立資料庫，請使用下面的指令碼和命令。

\c postgres
drop database if exists :name;
drop tablespace if exists :name;
drop role if exists :name;

psql -U postgres -f DeleteDb.sql -v name=sampledb

您無需再次刪除和建立資料庫目錄。執行後，再次執行資料庫建立指令碼。

為Entity Framework Core配置ASP.NET Core

現在，有一個數據庫可以連線。讓我們配置ASP.NET Core以通過Entity Framework Core連線資料庫。以下說明假定您使用PostgreSQL資料庫。

首先，為身份驗證資訊建立資料庫上下文類。您可以直接使用Microsoft.AspNetCore.Identity.EntityFrameworkCore.IdentityDbContext，但是隻有在應用程式中為了IdentityDbContext而使用實體框架時，才有可能這樣做。

namespace IdentityUiSample.Models
{
    public class AppIdentityDbContext : IdentityDbContext
    {
        public AppIdentityDbContext(DbContextOptions<AppIdentityDbContext> options) : base(options) { }
    }
}

接下來，在新增下面兩個NuGet包，並將以下行新增到Startup.ConfigureServices方法中。

• Npgsql.EntityFrameworkCore.PostgreSQL
• Npgsql.EntityFrameworkCore.PostgreSQL.Design

services.AddDbContext<AppIdentityDbContext>(options =>
    options.UseNpgsql(Configuration.GetConnectionString("SampleDB")));

然後，在appsettings.json中新增SampleDB連線字串，如下所示：

{
  "ConnectionStrings":  {
    "SampleDB": "Server=localhost;Database=sampledb;User Id=sampledb;Password=sample;"
  }
}

最後，在前面新增的程式碼之後新增對AddEntityFrameworkStores方法的呼叫，其中包含AppIdentityDbContext 類。

services
    .AddDefaultIdentity<IdentityUser>()
    .AddEntityFrameworkStores<AppIdentityDbContext>();

通過Entity Framework Core工具建立表

現在，您有一個使用Entity Framework Core的資料庫和程式碼。您最終可以使用Entity Framework Core工具生成資料庫表。

在專案根目錄下，按順序執行以下兩個命令。在執行之前，請確保您的Web應用程式未執行。否則，這些工具會失敗。這是因為工具需要執行您的應用程式。

這兩個命令中的命令列. -c的值是資料庫上下文的全名。請替換名稱以匹配您的資料庫上下文型別。如果您的應用程式只有一個數據庫上下文，那麼您也可以省略該開關。

dotnet ef migrations add first -c IdentityUiSample.Models.AppIdentityDbContext -v
dotnet ef database update -c IdentityUiSample.Models.AppIdentityDbContext -v

這些命令執行成功後，您可以在專案根目錄下找到一系列新表和遷移目錄，其中包含生成的檔案。

當您在資料庫上下文類中進行一些更改並且需要再次執行這些工具時，請再次執行這兩個命令，但將first第一個命令更改為任何其他關鍵字。

好的，現在您應該可以看到登入頁面了。執行Web應用程式並導航到瀏覽器上的/Identity/Account/Register 路徑。嘗試在/ Identity / Account / Login上註冊一個帳戶並登入。

3.頁面轉換實現

您可能已經注意到，您的應用程式中的任何位置都沒有登入連結。因此，最後一部分將新增頁面轉換，以便將身份驗證功能整合到您的應用程式中。

您建立的區域性檢視_LoginPartial.cshtml將在導航欄中呈現，因為它是將連結新增到與身份驗證相關的頁面的好地方。之前，您將其建立為空檔案。現在，在其中新增以下程式碼。

using Microsoft.AspNetCore.Identity
@using Microsoft.AspNetCore.Identity.UI.Pages.Account.Internal
@model dynamic
@inject SignInManager<IdentityUser> SignInManager
@inject UserManager<IdentityUser> UserManager
<ul class="nav navbar-nav navbar-right">
    @if (SignInManager.IsSignedIn(User))
    {
        <li><a href="/Identity/Account/Manage">@UserManager.GetUserName(User)</a></li>
        <li>
            <form asp-area="Identity" asp-page="/Account/Logout" method="post">
                @Html.Hidden("returnUrl", "/")
                <input type="submit" value="Logout" class="btn btn-link navbar-btn navbar-link" />
            </form>
        </li>
    }
    else
    {
        RegisterModel register = Model as RegisterModel;
        LoginModel login = Model as LoginModel;
        @if (register == null)
        {
            <li><a href="/Identity/Account/Register">Register</a></li>
        }
        @if (login == null)
        {
            <li><a href="/Identity/Account/Login">Login</a></li>
        }
    }
</ul>

在Razor View中獲取使用者資訊

以@inject指令開頭的行允許您在razor檢視程式碼中引入登入資訊。然後，您可以通過@UserManager.GetUserName(User)獲取當前登入使用者名稱。

_LoginPartial.cshtml的模型

通過引用@model dynamic接收模型為動態的原因是，部分檢視不僅在Login頁面中呈現，而且還在其他頁面中呈現，並且在每個頁面中呈現不同的模型型別。通過將模型定義為動態，檢視可以在任何情況下接收模型例項。

退出連結

/Identity/Account/Logout 的連結編碼為帶有asp-area和asp-page屬性的表單。這是因為它需要POST帶有防偽令牌的請求。使用asp-屬性不是必需的，但只是使程式碼更簡單一些。以下程式碼是等效的，您可以在其中明確地看到防偽標記的程式碼。

<form action="/Identity/Account/Logout" method="post">
    @Html.AntiForgeryToken()
    @Html.Hidden("returnUrl", "/")
    <input type="submit" value="Logout"
    class="btn btn-link navbar-btn navbar-link" />
</form>

順便說一下，表單資料returnUrl是可選的。它只是允許跳過Logout頁面並重定向到一個路徑。

將部分檢視安裝到_Layout.cshtml

最後，轉到/Views/Shared/_Layout.cshtml，這是預設情況下應用程式中使用的佈局。按搜尋並“ navbar-nav” 找到如下所示的行，然後新增相應程式碼。

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a asp-area="" asp-controller="Home" 

        asp-action="Index">Home</a></li>
        <li><a asp-area="" asp-controller="Home" 

        asp-action="About">About</a></li>
        <li><a asp-area="" asp-controller="Home" 

        asp-action="Contact">Contact</a></li>
    </ul>
    <partial name="~/Views/Shared/_LoginPartial.cshtml" />
</div>

全部完成！

現在，嘗試登入和登出。從使用者名稱上的連結，您可以轉到帳戶管理頁面。

原文地址：https://www.codeproject.com/Articles/1265638/ASP-NET-Core-Authentication-UI-Installation