AntDesign Pro + .NET Core 实现基于JWT的登录认证功能攻略

本攻略将介绍如何使用AntDesign Pro和.NET Core实现基于JWT的登录认证功能。本攻略将提供详细的步骤和示例说明，以帮助您快速入门AntDesign Pro和.NET Core的登录认证功能。

步骤

步骤1：创建一个新的AntDesign Pro项目

首先，需要创建一个新的AntDesign Pro项目。可以使用以下命令在命令行中创建新的AntDesign Pro项目：

yarn create umi

在上面的命令中，使用 yarn create umi 命令创建一个新的AntDesign Pro项目。

步骤2：创建一个新的.NET Core项目

接下来，需要创建一个新的.NET Core项目。可以使用以下命令在命令行中创建新的.NET Core项目：

dotnet new webapi -n MyWebApi

在上面的命令中，使用 dotnet new 命令创建一个新的.NET Core Web API应用程序。使用 -n 参数指定项目的名称为 MyWebApi。

步骤3：配置.NET Core项目

接下来，需要配置.NET Core项目以支持JWT身份验证。可以使用以下命令安装 Microsoft.AspNetCore.Authentication.JwtBearer 包：

dotnet add package Microsoft.AspNetCore.Authentication.JwtBearer

在上面的命令中，使用 dotnet add package 命令安装 Microsoft.AspNetCore.Authentication.JwtBearer 包。

接下来，可以在 Startup.cs 文件中添加以下代码：

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.IdentityModel.Tokens;
using System.Text;

public void ConfigureServices(IServiceCollection services)
{
    // 添加身份验证服务
    services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
        .AddJwtBearer(options =>
        {
            options.TokenValidationParameters = new TokenValidationParameters
            {
                ValidateIssuer = true,
                ValidateAudience = true,
                ValidateLifetime = true,
                ValidateIssuerSigningKey = true,
                ValidIssuer = Configuration["Jwt:Issuer"],
                ValidAudience = Configuration["Jwt:Audience"],
                IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration["Jwt:SecretKey"]))
            };
        });

    // 添加授权服务
    services.AddAuthorization(options =>
    {
        options.AddPolicy("Admin", policy => policy.RequireClaim("Role", "Admin"));
        options.AddPolicy("User", policy => policy.RequireClaim("Role", "User"));
    });

    // 添加其他服务
    services.AddControllers();
}

在上面的代码中，我们添加了身份验证服务和授权服务，并配置了JWT身份验证参数。

步骤4：实现登录认证功能

接下来，需要实现登录认证功能。可以在.NET Core项目中创建一个名为 AuthController.cs 的文件，并添加以下代码：

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.IdentityModel.Tokens;
using System;
using System.IdentityModel.Tokens.Jwt;
using System.Security.Claims;
using System.Text;

[ApiController]
[Route("[controller]")]
public class AuthController : ControllerBase
{
    private readonly IConfiguration _configuration;

    public AuthController(IConfiguration configuration)
    {
        _configuration = configuration;
    }

    [AllowAnonymous]
    [HttpPost("login")]
    public IActionResult Login([FromBody] LoginModel login)
    {
        if (login == null)
        {
            return BadRequest("Invalid client request");
        }

        if (login.Username == "admin" && login.Password == "admin")
        {
            var secretKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_configuration["Jwt:SecretKey"]));
            var signinCredentials = new SigningCredentials(secretKey, SecurityAlgorithms.HmacSha256);

            var claims = new List<Claim>
            {
                new Claim(ClaimTypes.Name, login.Username),
                new Claim(ClaimTypes.Role, "Admin")
            };

            var tokeOptions = new JwtSecurityToken(
                issuer: _configuration["Jwt:Issuer"],
                audience: _configuration["Jwt:Audience"],
                claims: claims,
                expires: DateTime.Now.AddMinutes(5),
                signingCredentials: signinCredentials
            );

            var tokenString = new JwtSecurityTokenHandler().WriteToken(tokeOptions);
            return Ok(new { Token = tokenString });
        }

        return Unauthorized();
    }
}

public class LoginModel
{
    public string Username { get; set; }
    public string Password { get; set; }
}

在上面的代码中，我们创建了一个名为 AuthController 的控制器，并实现了一个名为 Login 的方法，该方法接受一个 LoginModel 对象作为参数，并返回一个JWT令牌。

步骤5：在AntDesign Pro中实现登录认证功能

接下来，需要在AntDesign Pro中实现登录认证功能。可以在 src/pages/User/Login.tsx 文件中添加以下代码：

import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Alert, message } from 'antd';
import React, { useState } from 'react';
import { connect, Dispatch, history } from 'umi';
import { LoginParamsType } from '@/services/login';
import LoginForm from './components/LoginForm';
import styles from './style.less';

interface LoginProps {
  dispatch: Dispatch;
  userLogin: any;
  submitting?: boolean;
}

const Login: React.FC<LoginProps> = (props) => {
  const { submitting } = props;
  const [loginError, setLoginError] = useState<string>('');

  const handleSubmit = (values: LoginParamsType) => {
    const { dispatch } = props;
    dispatch({
      type: 'login/login',
      payload: { ...values },
      callback: (response: any) => {
        if (response.status === 'ok') {
          localStorage.setItem('token', response.token);
          history.push('/');
        } else {
          setLoginError(response.message);
        }
      },
    });
  };

  return (
    <div className={styles.main}>
      <LoginForm onSubmit={handleSubmit}>
        {loginError && (
          <Alert
            message="登录失败"
            description={loginError}
            type="error"
            showIcon
            closable
          />
        )}
        <div className={styles.other}>
          <a href="">忘记密码</a>
          <a href="">注册账户</a>
        </div>
      </LoginForm>
    </div>
  );
};

export default connect(({ login, loading }: { login: any; loading: any }) => ({
  userLogin: login,
  submitting: loading.effects['login/login'],
}))(Login);

在上面的代码中，我们创建了一个名为 Login 的组件，并实现了一个名为 handleSubmit 的方法，该方法将调用后端API以获取JWT令牌，并将令牌存储在本地存储中。

示例说明

以下是两个示例说明，演示如何在AntDesign Pro和.NET Core中实现基于JWT的登录认证功能。

示例1：使用Postman测试API

以下是使用Postman测试API的步骤：

启动.NET Core项目。

在命令行中使用以下命令启动.NET Core项目：

dotnet run

在上面的命令中，使用 dotnet run 命令启动.NET Core项目。

使用Postman发送POST请求。

使用Postman发送以下POST请求：

POST http://localhost:5000/auth/login
Content-Type: application/json

{
    "username": "admin",
    "password": "admin"
}

在上面的请求中，我们向 http://localhost:5000/auth/login 发送了一个POST请求，并提供了用户名和密码。

检查响应。

如果用户名和密码正确，则应该收到以下响应：

```json
{
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJhZG1pbiIsIlJvbGUiOiJBZG1pbiIsIm5iZiI6MTYyMzIwMjMwMCwiZXhwIjoxNjIzMjA2OTAwfQ.5JZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZJZ

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：AntDesign Pro + .NET Core 实现基于JWT的登录认证功能 - Python技术站

AntDesign Pro + .NET Core 实现基于JWT的登录认证功能