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 ...
随机推荐
- nginx文件压缩
nginx文件压缩 如果我们租用了一个带宽很低的服务器,网站访问速度会很慢,这时我们可以通过让nginx开启GZIP压缩来提高网站的访问速度. 首先我们对nginx进行限速操作,限制每个连接的访问速度 ...
- JDBC的学习笔记-手动实现
JDBC是SUN公司提供的一套用于数据库操作的接口,Java程序员只需要面向这套接口编程即可.不同的数据库厂商,需要针对这套接口,提供不同实现. 使用JDBC的好处:1.程序员不需要关注不同数据库的细 ...
- 三、Linux系统中的文件类型和文件扩展名
.sock文件也是一类特殊的文件,这类文件通常用在网络之间进行数据连接,如:我们可以启动一个程序来监听客户端的要求,客户端可以通过套接字来进行通信: linux中的文件类型 文件类型介绍 Linux系 ...
- cpu负载高简单排查思路
首先通过uptime查看系统负载,然后使用mpstat结合pidstat来初步判断到底是cpu计算量大还是进程争抢过大或者是io过多,接着使用vmstat分析切换次数,以及切换类型,来进一步判断到底是 ...
- JSP&Servlet学习笔记----第5章
Servlet进阶API 每个Servlet都必须由web容器读取Servlet设置信息(标注或者web.xml).初始化. 对于每个Servlet的设置信息,web容器会为其生成一个ServletC ...
- VS debug下为什么多此一举jmp函数地址?
VS debug下为什么call 函数后,会jmp函数地址?多此一举? http://blog.csdn.net/viper/article/details/6332934 在写跑在main之前的时候 ...
- 当你的程序在朋友的机器上显示丢失msvcr100d.dll的时候
0. 给朋友发了个DEMO,收到提示:丢失 msvcr100d.dll 1. 一看是运行库文件,赶紧让朋友下载并安装vc++ 2010 redistribution,朋友反馈还是提示丢失这个dll文件 ...
- 【WPF学习】第三十九章 理解形状
在WPF用户界面中,绘制2D图形内容的最简单方法是使用形状(shape)——专门用于表示简单的直线.椭圆.矩形以及多变形的一些类.从技术角度看,形状就是所谓的绘图图元(primitive).可组合这些 ...
- nginx+lua在我司的实践
导读:nginx是一个高性能的反向代理服务器,lua是一个小巧的脚本语言,这两个的巧妙结合会擦出怎样的火花呢. 关键词:nginx,lua,nginx+lua 前言 nginx,lua,nginx+l ...
- WeChall_Training: Crypto - Caesar I (Crypto, Training)
As on most challenge sites, there are some beginner cryptos, and often you get started with the good ...