2. 程式人生 > 其它 >用NetCore + ReactJS 實現一個前後端分離的網站 (4) 使用者登入與授權

用NetCore + ReactJS 實現一個前後端分離的網站 (4) 使用者登入與授權

阿新 • • 發佈：2022-12-02

用NetCore + ReactJS 實現一個前後端分離的網站 (4) 使用者登入與授權

1. 前言

這幾天學了一些前端的知識，用Ant Design Pro的腳手架搭建了一個前端專案->這裡。
登入介面是現成的，所以回到後端來完成相應的API。

2. 登入與授權

2.1. 首先利用EFCore的Migration功能建立資料表，並新增種子資料。

User.cs
using Microsoft.EntityFrameworkCore.Metadata.Internal;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Text.Json.Serialization;

namespace NovelTogether.Core.Model.Models
{
    public class User
    {
        [Key]
        public int ID { get; set; }
        [Required]
        [Column(TypeName = "varchar")]
        [MaxLength(128)]
        [JsonPropertyName("username")]
        public string? UserName { get; set; }
        [Required]
        public string? Password { get; set; }
        [Required]
        public string? PasswordSalt { get; set; }
        [Required]
        [Column(TypeName = "nvarchar")]
        [MaxLength(128)]
        public string? NickName { get; set; }
        [Column(TypeName = "nvarchar")]
        [MaxLength(128)]
        public string? FirstName { get; set; }
        [Column(TypeName = "nvarchar")]
        [MaxLength(128)]
        public string? LastName { get; set; }
        public string? IDNumber { get; set; }
        public string? Email { get; set; }
        public string? PhoneNumner { get; set; }
        public string? Address { get; set; }
        [Required]
        public DateTime Birthday { get; set; }
        [Required]
        public DateTime CreatedDate { get; set; }
        public DateTime? ModifiedTime { get; set; }
    }
}
ModelBuilderExtension.cs
public static void AddUserSeed(this ModelBuilder modelBuilder)
        {
            modelBuilder.Entity<User>().HasData(
                new User() { ID = 1, UserName = "SuperAdmin", Password = string.Empty, PasswordSalt = string.Empty, NickName = "我是超級管理員", Birthday = new DateTime(1970, 1, 1), CreatedDate = DateTime.Now },
                new User() { ID = 2, UserName = "Wright", Password = "ddcddb33bd354212e2c2404fbf079a84", PasswordSalt = "qwe123!@#", NickName = "我是普通管理員", Birthday = new DateTime(1970, 1, 1), CreatedDate = DateTime.Now }
                );
        }

2.2. 依葫蘆畫瓢新增IUserRepository, UserRepository, IUserService, UserService，為後面的API提供服務。

2.3. 使用者身份驗證和Jwt Token授權。

先說一下登入以及API授權訪問的原理：

  • 前端對使用者輸入的密碼和從後端獲取的密碼鹽一起用MD5加密，然後傳到後端驗證。

為什麼要加鹽：因為常見的密碼的MD5值是固定的，資料庫要是洩露了，很容易被別人猜出來，所以資料的密碼是MD5(密碼+鹽)。
為什麼不在後端生成隨機數保護密碼的傳輸：前後端分離，所有資訊都在網路上傳輸，隨機數也不安全，只有用Https來保護資料，所以不需要加額外的資料安全措施。

  • 後端密碼驗證通過之後，生成一個Jwt Token，並在Payload中存放一個userid通過SetCookie的方式在前端寫入HttpOnly的Cookie，確保這個Cookie前端JS的無法訪問和修改的。
  • 前端後續的API請求會自動帶上這個Cookie，後端接收到請求後，通過中介軟體取出Jwt Token，驗證通過後取出其中存放的userid放入上下文中。
  • 所有的API就可以從上下文中得到當前使用者的id。
    下面是相應的程式碼：

2.3.1. 在ViewModels目錄下建立登入介面用的request以及response的實體類，以及一般response的實體類。

LoginModel.cs
using System.Text.Json.Serialization;

namespace NovelTogether.Core.Model.ViewModels
{
    public class LoginModel
    {
        [JsonPropertyName("username")]
        public string? UserName { get; set; }
        public string? Password { get; set; }
        public bool AutoLogin { get; set; }
    }
}
LoginResultModel.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace NovelTogether.Core.Model.ViewModels
{
    public class LoginResultModel
    {
        public string? Status { get; set; }
        public string? Type { get; set; }
        public string? CurrentAuthority { get;set; }

        public LoginResultModel Success(LoginType loginType)
        {
            Status = "success";
            Type = loginType.ToString().ToLower();

            return this;    
        }

        public LoginResultModel Error(LoginType loginType)
        {
            Status = "error";
            Type = loginType.ToString().ToLower();

            return this;
        }
    }

    public enum LoginType
    {
        Account,
        Mobile
    }
}
ResponseModel.cs
using System.Text.Json;
using System.Text.Json.Serialization;

namespace NovelTogether.Core.Model.ViewModels
{
    public class ResponseModel<TEntity> where TEntity : class
    {
        public bool Success { get; set; }
        public TEntity Data { get; set; }
        public int ErrorCode { get; set; }
        public string ErrorMessage { get; set; }
        public ErrorShowType ErrorShowType { get; set; }

        public ResponseModel<TEntity> Ok(TEntity entity)
        {
            Success = true;
            Data = entity;
            
            return this;
        }

        public ResponseModel<TEntity> Failed(int statusCode)
        {
            Success = false;
            ErrorCode = statusCode;
            ErrorMessage = "error";

            return this;
        }

        public ResponseModel<TEntity> Failed(int statusCode, TEntity entity)
        {
            Success = false;
            ErrorCode = statusCode;
            ErrorMessage = JsonSerializer.Serialize(entity);

            return this;
        }
    }

    public enum ErrorShowType
    {
        SILENT = 0,
        WARN_MESSAGE = 1,
        ERROR_MESSAGE = 2,
        NOTIFICATION = 3,
        REDIRECT = 9,
    }
}

2.3.2. 在Common中建立工具類JwtHelper.cs，用來生成Jwt Token。

JwtHelper.cs
using Microsoft.IdentityModel.Tokens;
using System.IdentityModel.Tokens.Jwt;
using System.Security.Claims;
using System.Text;

namespace NovelTogether.Core.API.Helpers.Jwt
{
    public class JwtHelper
    {
        public static string CreateToken(string secret, string issuer, string audience, int expiredHours, List<Claim> claims)
        {
            //祕鑰
            byte[] secretBytes = Encoding.UTF8.GetBytes(secret);
            //生成祕鑰
            var key = new SymmetricSecurityKey(secretBytes);
            //生成數字簽名的簽名金鑰、簽名金鑰識別符號和安全演算法
            var credential = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);
            //構建JwtSecurityToken類例項
            var token = new JwtSecurityToken(
                //新增頒發者
                issuer: issuer,
                //新增受眾
                audience: audience,
                 //新增其他需要加密的資訊
                claims,
                //自定義過期時間
                expires: DateTime.UtcNow.AddHours(expiredHours),
                signingCredentials: credential);

            //簽發token
            var jwtToken = new JwtSecurityTokenHandler().WriteToken(token);

            return jwtToken;
        }
    }
}

2.3.3. 在API中新增Token驗證的中介軟體。

AuthMiddleware.cs
using Microsoft.IdentityModel.Tokens;
using NovelTogether.Core.API.Utils;
using System.IdentityModel.Tokens.Jwt;
using System.Text;

namespace NovelTogether.Core.API.Middlewares
{
    public class AuthMiddleware
    {
        private readonly RequestDelegate _next;
        private readonly JwtOption _jwtOption;

        public AuthMiddleware(RequestDelegate next, JwtOption jwtOption)
        {
            _next = next;
            _jwtOption = jwtOption;
        }

        public async Task Invoke(HttpContext context)
        {
            //Get the upload token, which can be customized and extended
            var token = context.Request.Cookies[Consts.TOKEN_NAME]?.Split(" ").Last();

            if (token != null)
                AttachTokenToContext(context, token);

            await _next(context);
        }

        private void AttachTokenToContext(HttpContext context, string token)
        {
            try
            {
                var tokenHandler = new JwtSecurityTokenHandler();
                tokenHandler.ValidateToken(token, new TokenValidationParameters
                {
                    ValidAudience = _jwtOption.Audience,
                    ValidIssuer = _jwtOption.Issuer,
                    ValidateIssuer = true,
                    ValidateAudience = true,
                    IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_jwtOption.Secret)),
                    ClockSkew = new System.TimeSpan(0, 0, 30)
                }, out SecurityToken validatedToken);

                var jwtToken = (JwtSecurityToken)validatedToken;

                // attach user id to context on successful jwt validation
                context.Items[Consts.USER_ID] = jwtToken.Claims.First(x => x.Type == Consts.USER_ID).Value;
            }
            catch
            {
            }
        }
    }
}

2.3.4 在API中新增自定義屬性用替換預設的[Authorize]屬性。

ApiAuthorizeAttribute.cs
using Microsoft.AspNetCore.Mvc.Filters;
using Microsoft.AspNetCore.Mvc;
using System.Net;
using NovelTogether.Core.Model.ViewModels;
using NovelTogether.Core.API.Utils;

namespace NovelTogether.Core.API.Attributes
{
    public class ApiAuthorizeAttribute : Attribute, IAuthorizationFilter
    {
        public void OnAuthorization(AuthorizationFilterContext context)
        {
            var accountId = context.HttpContext.Items[Consts.USER_ID];
            if (accountId == null)
            { 
                //context.HttpContext.Response.StatusCode = HttpStatusCode.Unauthorized.GetHashCode();
                context.Result = new UnauthorizedObjectResult(new ResponseModel<string>().Failed(HttpStatusCode.Unauthorized.GetHashCode()));
            }
        }
    }
}

2.3.5. 建立UserController，下面的程式碼中實現了三個方法：登入、登出、獲取當前使用者資訊。

獲取使用者資訊的介面受[ApiAuthorize]屬性保護。

UserController.cs
using Microsoft.AspNetCore.Mvc;
using NovelTogether.Core.API.Attributes;
using NovelTogether.Core.API.Helpers.Jwt;
using NovelTogether.Core.API.Utils;
using NovelTogether.Core.IService;
using NovelTogether.Core.Model.ViewModels;
using System.Net;
using System.Security.Claims;

namespace NovelTogether.Core.API.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class UserController : Controller
    {
        private readonly IUserService _userService;
        private readonly IConfiguration _configuration;

        public UserController(IUserService userService, IConfiguration configuration)
        {
            _userService = userService;
            _configuration = configuration;
        }

        [HttpPost("Login")]
        public async Task<LoginResultModel> Login(LoginModel loginModel)
        {
            // 驗證使用者名稱、密碼
            var userName = loginModel.UserName;
            var password = loginModel.Password;

            if (string.IsNullOrEmpty(userName) || string.IsNullOrWhiteSpace(password))
            {
                return new LoginResultModel().Error(LoginType.Account);
            }

            var user = await _userService.SelectAsync(x => x.UserName != null && x.UserName.ToLower() == userName.ToLower() && x.Password == password);
            if (user == null)
            {
                return new LoginResultModel().Error(LoginType.Account);
            }

            var token = JwtHelper.CreateToken(
                _configuration.GetValue<string>("Config:JWT:Secret"),
                _configuration.GetValue<string>("Config:JWT:Issuer"),
                _configuration.GetValue<string>("Config:JWT:Audience"),
                _configuration.GetValue<int>("Config:JWT:ExpiredHours"),
                new List<Claim>()
                {
                    new Claim(ClaimTypes.NameIdentifier, userName.ToLower()),
                    new Claim(Consts.USER_ID, user.ID.ToString())
                });

            // 返回JWT Token
            Response.Cookies.Append(Consts.TOKEN_NAME, token, new CookieOptions
            {
                 HttpOnly = true
            });
            return new LoginResultModel().Success(LoginType.Account);
        }

        [HttpPost("Logout")]
        public ResponseModel<string> Logout()
        {
            Response.Cookies.Delete(Consts.TOKEN_NAME);

            return new ResponseModel<string>().Ok("Logout");
        }

        [HttpGet]
        [ApiAuthorize]
        public async Task<ResponseModel<UserModel>> Get()
        {
            var userId = int.Parse(HttpContext.Items[Consts.USER_ID].ToString());
            var user = await _userService.SelectAsync(x => x.ID == userId);
            if (user == null)
            {
                return new ResponseModel<UserModel>().Failed(HttpStatusCode.NotFound.GetHashCode());
            }

            // 返回使用者資訊
            return new ResponseModel<UserModel>().Ok(new UserModel() { UserName = user.UserName, NickName = user.NickName });
        }
    }
}

相關推薦

用NetCore + ReactJS 實現一個前後端分離的網站 (4) 使用者登入與授權

用NetCore + ReactJS 實現一個前後端分離的網站 (4) 使用者登入與授權 1. 前言 這幾天學了一些前端的知識，用Ant Design Pro的腳手架搭建了一個前端專案->這裡。

如何實現一個前後端實時更新的進度條功能

技術標籤：進度條javajavascripthtmljs 1、需求背景 我們的產品有個下載匯出成員資訊表單的功能，但當資料量大的時候，處理時間較長，客戶希望能有個進度條顯示下載的進度，在焦急等待的時候，有個心理安慰2、開

基於Flask實現的前後端分離API

目錄1.起步與紅圖1.新建入口檔案2.藍圖分離檢視函式的缺陷3.建立自己的紅圖4.實現Redprint5.優化Redprint2.自定義異常物件1.構建client驗證器2.處理不同客戶端註冊的方案3.建立User模型4.完成客戶端註冊5.生成使用者

基於RBAC-前後端分離-動態路由得登入流程

說明 以下流程是基於前後端分離得，採用 RBAC 使用者-部門-角色-許可權得登入流程得實現（不懂可以看這裡RBAC模型概述以及功能許可權資料許可權設計思路） 前端 vue，動態路由 後臺sprintboot

前後端分離：使用 token 登入解決方案

這篇文章寫一下前後端分離下的登入解決方案，目前大多數都採用請求頭攜帶 Token 的形式。

前後端分離下的第三方登入

大致流程(授權碼模式) 以碼云為例 img { } 獲取使用者請求的API需要在請求中攜帶授權碼

Django學習筆記（12）基於前後端分離模式-新增用例介面實現

Django之前學習的的都是實現前後的不分離式的，Django也可以實現前後端分離式的開發，即檢視中不使用render返回渲染的html頁面，而是改用JsonResponse返回json字串

微信第三方登入前後端分離實現思路

微信第三方登入前後端分離實現思路 前端實現 這裡說一下前後端的思路，頁面載入時宣告一個變數state=\'時間戳+6位隨機數\',前端路徑生成二維碼，

Spring boot整合shiro+jwt實現前後端分離

本文例項為大家分享了Spring boot整合shiro+jwt實現前後端分離的具體程式碼，供大家參考，具體內容如下

部署vue+Springboot前後端分離專案的步驟實現

單頁應用 vue經常被用來開發單頁應用（SinglePage Web Application，SPA）,什麼叫做單頁應用呢，也就是隻有一張web頁面的應用，單頁應用的跳轉只需要重新整理區域性資源，大大加快的了我們頁面的響應速度

SpringBoot+Vue前後端分離實現請求api跨域問題

前言 最近過年在家無聊，剛好有大把時間學習Vue，順便做了一個增刪查改+關鍵字匹配+分頁的小dome,可是使用Vue請求後端提供的Api的時候確發現一個大問題，前後端分離了，但是請求的時候也就必定會有跨域這種問題，那如

ssm+vue前後端分離框架整合實現(附原始碼)

前言 本文針對Spring+SpringMVC+Mybatis後臺開發框架（基於maven構建）與vue前端框架（基於webpack構建）的專案整合進行介紹，對於ssm和vue單獨專案的搭建不作為本文的重點，而著重介紹兩者之間互動的要點。

Springboot+Vue+shiro實現前後端分離、許可權控制的示例程式碼

本文總結自實習中對專案的重構。原先專案採用Springboot+freemarker模版，開發過程中覺得前端邏輯寫的實在噁心，後端Controller層還必須返回Freemarker模版的ModelAndView，逐漸有了前後端分離的想法，由於之前，沒有

Windows配置Nginx實現前後端分離部署

環境 Windows 10 SpringBoot 1.5.20 Vue 2.5.2 Nginx 1.12.2 OpenSSL-Win64 下載 Nginx官網下載：http://nginx.org/en/download.html

開源netcore前後端分離,前端服務端渲染方案

SPA單頁面應用容器開源地址：https://github.com/yuzd/Spa