Blazor 和 Web API 解决方案中的 .NET Core 标识答案

【问题标题】：.NET Core Identity in Blazor and Web API SolutionBlazor 和 Web API 解决方案中的 .NET Core 标识
【发布时间】：2020-12-08 23:24:14
【问题描述】：

我正在创建一个 Blazor 应用程序（.NET Core、C#），但对如何集成 .NET Core 的内置身份验证和授权服务（.NET Core Identity）感到困惑。

我有一个解决方案，其中包含一个 Blazor 应用项目，以及一个用于从后端数据库检索数据的 .NET Core API 项目。

我看过在 Blazor 应用中实现 .NET Core Identity 的教程（以及用于注册、登录等的所有预构建页面和组件）。

这样很好，但是当我也在构建数据访问的API时，我觉得认证等也应该在Web API部分实现，因为这是数据访问的授权需要的地方。

最好/正确的设计方法是什么？

【问题讨论】：

嗨@ChrisMack，关于这个案例的任何更新？您是否已达到在 Blazor 项目中集成 ASP.NET Core Identity 的要求？
嗨@FeiHan，感谢您的回答，我仍在努力实施。我认为用户将通过 API 登录并获得一个 JWT 令牌然后证明他们已登录是否正确？令牌是否会用于访问 Blazor 应用程序中的页面，或者是否有其他机制可以做到这一点？

标签： c# asp.net-core asp.net-core-webapi blazor asp.net-core-identity

【解决方案1】：

我正在创建一个 Blazor 应用程序（.NET Core、C#），但对如何集成 .NET Core 的内置身份验证和授权服务（.NET Core Identity）感到困惑。

您可以参考这篇关于“Scaffold Identity into a Blazor Server project without existing authorization”的文档，将 ASP.NET Core Identity 集成到您的 Blazor 项目中，这将有助于添加所需的库并为您配置 Identity。

那么你应该在你的 Blazor 项目中做一些修改：

在Shared文件夹下添加LoginDisplay.razor

<AuthorizeView>
    <Authorized>
        <a href="Identity/Account/Manager">Hello, @context.User.Identity.Name!</a>
        <form method="post" action="Identity/Account/LogOut">
            <button type="submit" class="nav-link btn btn-link">Log out</button>
        </form>
    </Authorized>
    <NotAuthorized>
        <a href="Identity/Account/Register">Register</a>
        <a href="Identity/Account/Login">Login</a>
    </NotAuthorized>
</AuthorizeView>

在MainLayout.razor中引用LoginDisplay

@inherits LayoutComponentBase

<div class="sidebar">
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-4">
        <LoginDisplay></LoginDisplay>
        <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
    </div>

    <div class="content px-4">
        @Body
    </div>
</div>

如下更新 App.razor

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        @*<LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>*@
        <CascadingAuthenticationState>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </CascadingAuthenticationState>
    </NotFound>
</Router>

Startup 类中的配置

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
        //... 
        //other configurations here

        services.AddRazorPages();
        services.AddServerSideBlazor();

        services.AddScoped<AuthenticationStateProvider, ServerAuthenticationStateProvider>();
        services.AddSingleton<WeatherForecastService>();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        //...
        //other configurations here

        app.UseAuthentication();
        app.UseAuthorization();

        //...

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapBlazorHub();
            endpoints.MapFallbackToPage("/_Host");
        });
    }
}

当我也在构建数据访问的API时，我觉得认证等也应该在Web API部分实现

如果您在 Web API 项目中分离数据访问部分，保护 Web API 部分（通过 JWT 身份验证等）将有助于防止意外使用者调用您的 API。

测试结果

【讨论】：

【解决方案2】：

我了解您的情况：Blazor Web 应用（服务器端或客户端 Blazor）+ ASP.NET Core Web API。

您使用带有 JWT 令牌的 ASP.NET Core Identity 来归档您的需求。示例源码：https://github.com/donhuvy/dotnet5_jwt

教程：https://viblo.asia/p/xac-thuc-jwt-dua-theo-role-trong-aspnet-core-web-api-5-4P856vA95Y3

视频：https://www.youtube.com/watch?v=gsx3xCiJJlY&list=PLFJQnCcZXWjuHP03Kgf46FrX5L2fRzDsx

【讨论】：