ASP.NET Core——身份验证UI安装

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/mzl87/article/details/84995661

目录

介绍

要求

安装步骤

1.身份验证和身份UI配置

2.身份持久性实现

创建数据库

为Entity Framework Core配置ASP.NET Core

通过Entity Framework Core工具创建表

3.页面转换实现

在Razor View中获取用户信息

扫描二维码关注公众号，回复： 4515247 查看本文章

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

更新包后，您可能会收到构建错误NETSDK1061。别担心。这没什么大不了的。你只需要编辑一下csproj文件。如果你的项目文件的行如下所示，那就是原因。

<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