第13章 Token的Postman、Swagger和Vue调试
1 准备工作
1.1 WebApi.Controllers.JwtSettingModel
namespace WebApi.Test
{
/// <summary>
/// 【Jwt设置模型--纪录】
/// <remarks>
/// 摘要：
/// 通过该纪录中的属性成员实例存储“AppSettings.json”文件中的Jwt相关设置数据，为生成所有令牌(Token)字符串实例提供通用的数据支撑。
/// </remarks>
/// </summary>
public record JwtSettingModel
{
/// <summary>
/// 【Token签发机关】
/// <remarks>
/// 摘要：
/// 获取/设置用于生成所有令牌(Token)字符串实例的通用“签发机关”。
/// </remarks>
/// </summary>
public string Issuer { get; set; }
/// <summary>
/// 【Token订阅者】
/// <remarks>
/// 摘要：
/// 获取/设置用于生成所有令牌(Token)字符串实例的通用“订阅者”。
/// </remarks>
/// </summary>
public string Audience { get; set; }
/// <summary>
/// 【加密字符串】
/// <remarks>
/// 摘要：
/// 获取/设置用于生成所有令牌(Token)字符串实例的通用“加密字符串”。
/// </remarks>
/// </summary>
public string SecretKey { get; set; }
}
}
1.2 WebApi.Controllers.LoginModel
namespace WebApi.Test
{
/// <summary>
/// 【登录模型--纪录】
/// <remarks>
/// 摘要：
/// 通过该纪录中的属性成员实例存储用于登录操作账户名及其密码。
/// </remarks>
/// </summary>
public record LoginModel
{
/// <summary>
/// 【账户名】
/// <remarks>
/// 摘要：
/// 获取/设置1个用于登录操作的账户名。
/// </remarks>
/// </summary>
public string Name { get; set; }
/// <summary>
/// 【密码】
/// <remarks>
/// 摘要：
/// 获取/设置1个用于登录操作的密码。
/// </remarks>
/// </summary>
public string Password { get; set; }
}
}
1.3 在“appsettings.json”文件中设置“Jwt”初始化所需要数据
//"Jwt相关设置数据，为生成所有令牌(Token)字符串实例提供通用的数据支撑。"
"JwtSetting": {
"Issuer": "Token签发机关",
"Audience": "Token订阅者",
"SecretKey": "8kh2luzmp0oq9wfbdeasygj647vr531n" //由发行者(开发者)提供的常量“秘钥”字符串，注意：该字符串不能小于16个字符。
},
2 定义“JwtBearer”依赖注入中间件
2.1 引用“JwtBearer” 中间件
通过Nuget引用：“Microsoft.AspNetCore.Authentication.JwtBearer”
2.2 在Program.cs定义“JwtBearer”依赖注入中间件
builder.Services.Configure<JwtSettingModel>(builder.Configuration.GetSection("JwtSetting"));
JwtSettingModel _jwtSettingModel = new JwtSettingModel();
builder.Configuration.Bind("JwtSetting", _jwtSettingModel);
builder.Services.AddAuthentication("Bearer")
.AddJwtBearer(options => {
options.TokenValidationParameters = new TokenValidationParameters
{
ValidateIssuerSigningKey = true,
IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_jwtSettingModel.SecretKey)),
// 指示在使用jwt中间件生成所有令牌(Token)中是否包含有“签发机关”的数据信息，当前设定为：true，即包含。
ValidateIssuer = true,
//所有令牌(Token)“签发机关”所对应的数据信息为：“Token签发机关”。
ValidIssuer = _jwtSettingModel.Issuer,
// 指示在使用jwt中间件生成指定令牌(Token)中是否包含有“订阅者”的数据信息，当前设定为：true，即包含。
ValidateAudience = true,
//所有令牌(Token)“订阅者”所对应的数据信息为：“Token订阅”
ValidAudience = _jwtSettingModel.Audience,
//指示是否所有令牌(Token)的过期时间进行限定，当前设定为：true，即限定。
RequireExpirationTime = true,
//指示是否对指定令牌(Token)的生命周期进行自动管理，当前设定为：true，即管理，
//当前所有令牌(Token)的生命周期结束时，程序必须重新生成1个新的指定令牌(Token)才能方法授权页面。
//使用当前时间与Token的Claims中的NotBefore和Expires对比后，进行管理。
ValidateLifetime = true,
//缓冲过期时间，所有令牌(Token)的总有效时间等于该时间加上jwt的过期时间，缓冲过期时间的默认值为“5分钟”，
//当前把缓冲过期时间设定为：0，指定令牌(Token)的总有效时间即为jwt的过期时间。
ClockSkew = TimeSpan.FromSeconds(0),
};
});
builder.Services.AddControllers();
3 定义需要Token认证的控件器方法
3.1 WebApi.Controllers.CustomerController
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Options;
using Microsoft.IdentityModel.Tokens;
using System.IdentityModel.Tokens.Jwt;
using System.Security.Claims;
using System.Text;
using WebApi.Models;
using WebApi.Test;
namespace WebApi.Controllers
{
[Route("[controller]/[action]")]
[ApiController]
public class CustomerController : ControllerBase
{
#region 拷贝构造方法与变量
private JwtSettingModel _jwtSettingModel;
public CustomerController(IOptions<JwtSettingModel> options)
{
_jwtSettingModel = options.Value;
}
#endregion
/// <param name="login">登录模型记录的1个指定实例。</param>
/// <summary>
/// 【登录--无需权限】
/// </summary>
/// <remarks>
/// 摘要：
/// 通过登录操作获取1个指定用户(这里特指：“admin@yourStore.com”用户)的1个指定令牌(Token)字符串实例，为访问指定权限的Api提供数据支撑。
/// </remarks>
/// <returns>
/// 返回：
/// 1个指定用户(这里特指：“admin@yourStore.com”用户)的1个指定令牌(Token)字符串实例。
/// </returns>
[HttpPost]
public async Task<MessageModel<string>> Login([FromBody] LoginModel login)
{
string _token = string.Empty;
if (login.Name == "admin@yourStore.com" && login.Password == "111111")
{
Claim[] _claimArray = new Claim[] {
new Claim(ClaimTypes.Name, login.Name),
new Claim(ClaimTypes.Role, "Administrator"),
new Claim(ClaimTypes.Role, "Register"),
new Claim(ClaimTypes.Role, "Guest"),
};
SymmetricSecurityKey _symmetricSecurityKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_jwtSettingModel.SecretKey));
SigningCredentials _signingCredentials = new SigningCredentials(_symmetricSecurityKey, SecurityAlgorithms.HmacSha256);
JwtSecurityToken _jwtSecurityToken = new JwtSecurityToken(
issuer: _jwtSettingModel.Issuer,
audience: _jwtSettingModel.Audience,
claims: _claimArray,
notBefore: DateTime.Now,//1个指定令牌(Token)字符串实例的生效时间，“生效时间”是当前时间，即立即生效。
expires: DateTime.Now.AddSeconds(180),//1个指定令牌(Token)字符串实例的生命周期，这里为3分钟。
signingCredentials: _signingCredentials);
_token = new JwtSecurityTokenHandler().WriteToken(_jwtSecurityToken);
}
//实例化消息模型录，对当前“Api”控制器行方法的执行操作结果进行存储，为客户端页面的渲染提供数据支撑。
MessageModel<string> _tokenMessageModel = new MessageModel<string>()
{
Success = true,
Message = "获取成功！",
Response = _token,
};
return _tokenMessageModel;
}
}
}
3.2 WebApi.Controllers.ActionAuthorizationTestController
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using WebApi.Models;
namespace WebApi.Controllers
{
[Route("[controller]/[action]")]
[ApiController]
public class ActionAuthorizationTestController : ControllerBase
{
[Authorize(Roles = "Administrator,Register,Guest")]
[HttpGet]
public async Task<MessageModel<string>> ActionTest()
{
//实例化消息模型录，对当前“Api”控制器行方法的执行操作结果进行存储，为客户端页面的渲染提供数据支撑。
MessageModel<string> _actionAuthorizationMessageModel = new MessageModel<string>()
{
Success = true,
Message = "获取成功",
Response = "行为方法：“ActionTest”认证成功！",
};
return _actionAuthorizationMessageModel;
}
[Authorize]
[HttpGet]
public async Task<MessageModel<string>> ActionTest_1()
{
//实例化消息模型录，对当前“Api”控制器行方法的执行操作结果进行存储，为客户端页面的渲染提供数据支撑。
MessageModel<string> _actionAuthorizationMessageModel = new MessageModel<string>()
{
Success = true,
Message = "获取成功",
Response = "行为方法：“ActionTest_1”认证成功！",
};
return _actionAuthorizationMessageModel;
}
}
}
3.3 WebApi.Controllers.ControllerAuthorizationTestController
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using WebApi.Models;
namespace WebApi.Controllers
{
[Authorize(Roles = "Administrator,Register,Guest")]
[Route("[controller]/[action]")]
[ApiController]
public class ControllerAuthorizationTestController : ControllerBase
{
[HttpGet]
public async Task<MessageModel<string>> ControllerTest_1()
{
//实例化消息模型录，对当前“Api”控制器行方法的执行操作结果进行存储，为客户端页面的渲染提供数据支撑。
MessageModel<string> _controllerAuthorizationMessageModel = new MessageModel<string>()
{
Success = true,
Message = "获取成功",
Response = "控制器方法:“ControllerTest_1”认证成功！",
};
return _controllerAuthorizationMessageModel;
}
[HttpGet]
public async Task<MessageModel<string>> ControllerTest_2()
{
//实例化消息模型录，对当前“Api”控制器行方法的执行操作结果进行存储，为客户端页面的渲染提供数据支撑。
MessageModel<string> _controllerAuthorizationMessageModel = new MessageModel<string>()
{
Success = true,
Message = "获取成功",
Response = "控制器方法:“ControllerTest_2”认证成功！",
};
return _controllerAuthorizationMessageModel;
}
[HttpGet]
[AllowAnonymous]
public async Task<MessageModel<string>> ControlleTest_3()
{
//实例化消息模型录，对当前“Api”控制器行方法的执行操作结果进行存储，为客户端页面的渲染提供数据支撑。
MessageModel<string> _controllerAuthorizationMessageModel = new MessageModel<string>()
{
Success = true,
Message = "获取成功",
Response = "获取控制器不需要认证方法:“ControlleTest_3”！",
};
return _controllerAuthorizationMessageModel;
}
}
}
3.4 重构WebApi.Controllers.RoleController
/// <summary>
/// 【角色Api控制器--类】
/// </summary>
/// <remarks>
/// 摘要：
/// 通过该类中的方法成员，为前端角色页面提供Api方法和数据支撑。
/// </remarks>
[Authorize(Roles = "Administrator")]
[Route("[controller]/[action]")]
[ApiController]
public class RoleController : ControllerBase
4 Postman调试需要Token认证Api方法
5 Swagger调试需要Token认证Api方法
5.1 引用“Swashbuckle.AspNetCore.Filters” 中间件
通过Nuget引用：“Swashbuckle.AspNetCore.Filters”
5.2 开启“Swagger/index.html”页面对Token认证Api方法的访问调试
//通过AddSwaggerGen依赖注入中间，获取Api控制器方法的版本控制信息和注释等数据信息，依赖注入.Net7框架的内置容器中，为在“index.html”页面上渲染显示这些信息，作好预处理操作。
builder.Services.AddSwaggerGen(options => {
options.SwaggerDoc("v1",
new OpenApiInfo
{
Version = "v1",
Title = $"接口文档—{RuntimeInformation.FrameworkDescription}",
});
//获取"UserServer.xml"文件的文件名。
string _xmlFileName = $"{Assembly.GetExecutingAssembly().GetName().Name}.xml";
//获取"WebApi.xml"文件的绝对路径。
string _xmlFilePath = Path.Combine(AppContext.BaseDirectory, _xmlFileName);
//把控件器行为方法中的注释信息加载到"Swagger/index.html"页面中的控件器行为方法进行渲染显示。
//注意：如果不在“*.csproj”文件中启用“<GenerateDocumentationFile>true</GenerateDocumentationFile>”配置，下面语句会出现逻辑异常。
options.IncludeXmlComments(_xmlFilePath, true);
// 开启“Swagger/index.html”页面对Token认证Api方法的访问调试。
// 开启加权小锁
options.OperationFilter<AddResponseHeadersFilter>();
options.OperationFilter<AppendAuthorizeToSummaryOperationFilter>();
// 在header中添加token，传递到后台
options.OperationFilter<SecurityRequirementsOperationFilter>();
// 必须是 oauth2
options.AddSecurityDefinition("oauth2", new OpenApiSecurityScheme
{
Description = "JWT授权(数据将在请求头中进行传输) 直接在下框中输入Bearer {token}（注意两者之间是一个空格）\"",
Name = "Authorization",//jwt默认的参数名称
In = ParameterLocation.Header,//jwt默认存放Authorization信息的位置(请求头中)
Type = SecuritySchemeType.ApiKey
});
});
6 Vue调试需要Token认证Api方法
6.1 src\store\index.js
import {createStore} from 'vuex';
export default createStore({
state: {
//通过全局变量获取实例化“TokenJwt”字符串，或对“TokenJwt”字符串进行全局化存储。
token: localStorage.getItem('Token') ? localStorage.getItem('Token') : '',
},
getters: {},
mutations: {
//通过该方法把“TokenJwt”字符串，进行全局存储。
saveToken: function(state, data) {
state.token = data;
localStorage.setItem("Token", data);
},
},
actions: {},
modules: {}
})
6.2 src\views\LoginView.vue
<template>
<el-form :model="formLogin" label-position="left" label-width="0px" class="demo-ruleForm login-container">
<h3 class="title">系统登录</h3>
<el-form-item prop="account">
<el-input type="text" v-model="formLogin.account" auto-complete="off" placeholder="账号"></el-input>
</el-form-item>
<el-form-item prop="checkPass">
<el-input v-model="formLogin.checkPass" auto-complete="off" show-password placeholder="密码"></el-input>
</el-form-item>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;" @click="submitLogin">
登录
</el-button>
</el-form-item>
</el-form>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
formLogin: {
account: 'admin@yourStore.com',
checkPass: '111111',
},
};
},
methods: {
async submitLogin() {
let loginParams = {
name: this.formLogin.account,
password: this.formLogin.checkPass
};
let res = await axios.post('https://localhost:7043/Customer/Login', JSON.stringify(loginParams));
let userToken = 'Bearer ' res.data.response;
this.$store.commit("saveToken", userToken);
//console.log(this.$store.state.token);
if (res.status == 200) {
let token = localStorage.getItem('Token');
console.log(token);
if (token === null || token === '') {
await this.$router.replace(this.$route.query.redirect ? this.$route.query.redirect : "/");
}
await this.$router.replace(this.$route.query.redirect ? this.$route.query.redirect : "Users/Role");
} else {
this.$message.error(res.msg);
}
},
},
mounted() {
//把Token字符串添加到Header拦截守卫。
axios.interceptors.request.use(
config => {
if (localStorage.getItem('Token')) {
config.headers.Authorization = localStorage.getItem('Token');
}
return config;
},
error => {
return Promise.reject(error);
});
},
}
</script>
6.3 src\views\LoginView.vue
<template>
<h1>Test-1View-----Amin</h1>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
};
},
methods: {
async getControllerTest() {
let res = await axios.get('https://localhost:7043/ControllerAuthorizationTest/ControllerTest_1');
console.log(res);
},
},
mounted() {
this.getControllerTest();
},
}
</script>
<style scoped lang="scss">
</style>
对以上功能更为具体实现和注释见：
1、230111_007shopDemo(Token的Postman、Swagger和Vue调试)
2、230111_008shopvue(Token的Postman、Swagger和Vue调试)
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhfihbkg
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24
