Blazor client-side + webapi (.net core 3.1) 添加jwt验证流程(非host)第一步
第一步,设置并检查CROS跨域请求
因为我们并不打算将Blazor 由webapi来进行host,所以Blazor和api将是两个域名,这样操作即方便以后单独使用Blazor来写前端,但后端采用已有或其他语言框架或版本的api。
这也是我接下来项目的打算。
准备工作,生成项目:
这里使用的是.Net CLI,即命令行,这样方便将前后端都运行进行测试。
1. cd到文件夹(你自己创建)
2.dotnet new sln -n AuthApiAndBlazor (这步用来生成解决方案)
3.dotnet new blazorwasm -n client (生成Blazor client-side)
4.dotnet new webapi -n server (生成Api)
5.打开AuthApiAndBlazor.sln 解决方案,并添加前两个我们刚创建好的项目。
完成准备工作后,打开server(api)的Startup.cs,我们需要添加CROS设置,请看下面代码,其他代码我已经省略,请勿直接全部复制!否则你项目就gg了
public class Startup
{
//其他代码..... readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins"; public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddPolicy(MyAllowSpecificOrigins,
builder =>
{
//替换成你Blazor wasm(client)的域名
builder.WithOrigins("http://localhost:5001").AllowAnyHeader().AllowAnyMethod();
});
}); //其他代码....... } public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{ app.UseRouting(); //添加CORS到管道中,记得一定要放在UseRouting和UseEndpoints之间,否则没用
app.UseCors(MyAllowSpecificOrigins);
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
}
}
接下来,打开客户端 client (blazor wasm) 的Pages/FetchData.razor ,由于.net core 3.1的模板中,有一个天气信息页面,几乎是全模板同步,他们的类也是相同的(你也可以自己检查下WeatherForecast.cs)
我们将42行的代码改一下,将从本地读取json信息,改为调用api读取。
protected override async Task OnInitializedAsync()
{
forecasts = await Http.GetJsonAsync<WeatherForecast[]>("https://localhost:5002/weatherforecast");
}
这里的域名请替换成api的域名,如果你没有修改将会导致Blazor和webapi使用同一端口,将会导致无法运行。
这时候用命令行启动server (记得先生成项目,命令:dotnet build,又或者用vs生成)
再启动你的client,这时候选择Fetch Data,你就可以看到从api调取的数据被展示了
Blazor client-side + webapi (.net core 3.1) 添加jwt验证流程(非host)第一步的更多相关文章
- Blazor client-side + webapi (.net core 3.1) 添加jwt验证流程(非host)第二步 添加Identity
添加Identity数据上下文 安装nuget包:Microsoft.AspNetCore.Identity.EntityFrameworkCore 创建ApplicationDbContext类 创 ...
- Blazor client-side + webapi (.net core 3.1) 添加jwt验证流程(非host)第三章 客户端存储及验证
准备工作: 安装Nuget包:Blazored.LocalStorge. 这是一个client-side 浏览器存储库,找了非常久. 官方文档中也有一款Microsoft.AspNetCore.Pro ...
- ASP.NET Core 6.0 添加 JWT 认证和授权
序言 本文将分别介绍 Authentication(认证) 和 Authorization(授权). 并以简单的例子在 ASP.NET Core 6.0 的 WebAPI 中分别实现这两个功能. 相关 ...
- 为 ASP.NET Core (6.0)服务应用添加ApiKey验证支持
这个代码段演示了如何为一个ASP.NET Core项目中添加Apikey验证支持. 首先,通过下面的代码创建项目 dotnet new webapi -minimal -o yourwebapi 然后 ...
- jwt-在asp.net core中的使用jwt
JWT学习文章: 第一篇:JWT原理 第二篇:JWT原理实现代码 第三篇:在asp.net core中的使用JWT 前两篇文章中我写了jwt的原理,并且也用原理实现了jwt的验证.如果要看前两篇文章, ...
- .net core webapi+EF Core
.net core webapi+EF Core 一.描述: EF Core必须下载.net core2.0版本 Micorsoft.EntityFrameworkCore:EF框架的核心包Micor ...
- 【Blazor】在ASP.NET Core中使用Blazor组件 - 创建一个音乐播放器
前言 Blazor正式版的发布已经有一段时间了,.NET社区的各路高手也创建了一个又一个的Blazor组件库,其中就包括了我和其他小伙伴一起参与的AntDesign组件库,于上周终于发布了第一个版本0 ...
- ASP.NET Core 实战:基于 Jwt Token 的权限控制全揭露
一.前言 在涉及到后端项目的开发中,如何实现对于用户权限的管控是需要我们首先考虑的,在实际开发过程中,我们可能会运用一些已经成熟的解决方案帮助我们实现这一功能,而在 Grapefruit.VuCore ...
- 007.Adding a view to an ASP.NET Core MVC app -- 【在asp.net core mvc中添加视图】
Adding a view to an ASP.NET Core MVC app 在asp.net core mvc中添加视图 2017-3-4 7 分钟阅读时长 本文内容 1.Changing vi ...
随机推荐
- Qt Installer Framework翻译(7-4)
组件脚本 对于每个组件,您可以指定一个脚本,来准备要由安装程序执行的操作.脚本格式必须与QJSEngine兼容. 构造 脚本必须包含安装程序在加载脚本时创建的Component对象. 因此,脚本必须至 ...
- GC原理---垃圾收集算法
垃圾收集算法 Mark-Sweep(标记-清除算法) 标记清除算法分为两个阶段,标记阶段和清除阶段.标记阶段任务是标记出所有需要回收的对象,清除阶段就是清除被标记对象的空间. 优缺点:实现简单,容易产 ...
- kdevelop 是什么 什么鬼(windows系统非linux)
这个软件尼玛 有懂的没,编译执行 1.需要gcc 2.需要啥怎么配置尼玛 3........................... 4.疯了都 大家懂得来说说
- Mybatisplus代码生成器主类CodeGenerator配置
//代码自动生成public class CodeGenerator { /** * <p> * 读取控制台内容 * </p> */ public static String ...
- Nginx-入门(源码编译安装http://nginx.org/en/download.html)
比较早的时候 web主要经典组合--->LAMP 近几年---->nginx后来居上--->LNMP=LEMP Nginx = Engine x Nginx和Apache 都是 ...
- 时序数据库 Apache-IoTDB 源码解析之文件数据块(四)
上一章聊到行式存储.列式存储的基本概念,并介绍了 TsFile 是如何存储数据以及基本概念.详情请见: 时序数据库 Apache-IoTDB 源码解析之文件格式简介(三) 打一波广告,欢迎大家访问Io ...
- ATL窗口
标准的Windows应用程序框架: /*------------------------------------------------------------ HELLOWIN.C -- Displ ...
- 七、Application类
前言:每个运行的WPF应用程序都由System.Windows.Application类的一个实例来表示.程序集资源(assemblyre sources)的每个资源是一块可嵌入到编译过得应用程序中的 ...
- RC振荡电路
RC振荡电路,由电阻R和电容C构成的适用于产生低频信号的电路 1.原理---简介 RC振荡电路,采用RC选频网络构成,适用于低频振荡,一般用于产生1Hz~1MHz(fo=1/2πRC)的低频信号.对于 ...
- 【WPF学习】第四十章 画刷
画刷填充区域,不管是元素的背景色.前景色以及边框,还是形状的内部填充和笔画(Stroke).最简单的画刷类型是SolidColorBrush,这种画刷填充一种固定.连续的颜色.在XAML中设置形状的S ...