使用 ReactJS SPA 在 .net Core 中进行身份验证答案

【问题标题】：Authentication in .net Core with ReactJS SPA使用 ReactJS SPA 在 .net Core 中进行身份验证
【发布时间】：2019-05-29 13:33:41
【问题描述】：

我尝试向 .net Core 2.1 应用程序添加身份验证。从头开始：我们可以使用 VS 模板创建带有 React 的新 Web 应用程序。

在这个tempate中我们可以看到：

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
    spa.ApplicationBuilder.UseAuthentication();


    if (env.IsDevelopment())
    {
        spa.UseReactDevelopmentServer(npmScript: "start");
    }
});

我还添加了身份验证控制器和带有登录/注册端点的视图。

如何添加在我们登录应用程序之前拒绝访问 SPA 的逻辑？

我知道如何使用 asp.net 身份规范，但对于这个 SPA，我需要建议。

【问题讨论】：

标签： c# reactjs asp.net-core .net-core asp.net-core-mvc

【解决方案1】：

在中间件中你可以检查用户是否被认证，例如：

app.UseSpa(spa =>
{
    spa.ApplicationBuilder.MapWhen(
        (context)=>!context.User.Identity.IsAuthenticated, 
        ab => {
            ab.Run(async (ctx )=> {
                ctx.Response.StatusCode = 401;
                //redirect to login page
                ctx.Response.Headers.Add("Location", "....");
                //await ctx.Response.WriteAsync("Authecation Failed");
            });
        }
    );

    spa.Options.SourcePath = "ClientApp";

    if (env.IsDevelopment())
    {
        spa.UseReactDevelopmentServer(npmScript: "start");
    }
});

【讨论】：

我可以跳过 favicon.ico 请求吗？因为目前使用此解决方案的 favicon 请求也被重定向。

【解决方案2】：

对于使用 SPA 的身份验证，您可以使用一些服务器端技术（如 JWT）来对用户进行身份验证。因此，如果用户登录成功，您可以给他们令牌，当用户请求您的 API 时，您可以在请求的标头中提交令牌，以便服务器知道您是谁并允许您访问 API 资源。

你可以看看openiddict。他们有 Angular 应用程序的完整示例

【讨论】：