Identity Server 4 从入门到落地(五)—— 使用Ajax访问Web Api
前面的部分:
Identity Server 4 从入门到落地(一)—— 从IdentityServer4.Admin开始
Identity Server 4 从入门到落地(二)—— 理解授权码模式
Identity Server 4 从入门到落地(三)—— 创建Web客户端
Identity Server 4 从入门到落地(四)—— 创建Web Api
认证服务和管理的github地址: https://github.com/zhenl/IDS4Admin
客户端及web api示例代码的github地址:https://github.com/zhenl/IDS4ClientDemo
在前面我们创建了Web Api,为了验证客户端,我们从后台访问Api,再将数据返回浏览器,但在实际项目中,一般不会这么做,我们会使用Ajax在页面上直接调用Web Api。现在我们在客户端中增加一个页面,在这个页面上使用Ajax访问Web Api。
在IDS4Client这个项目Views/Home目录下增加一个视图JSClient.cshtml,代码如下:
@using Microsoft.AspNetCore.Authentication
@{
var auth = await Context.AuthenticateAsync();
var token = auth.Properties.Items[".Token.access_token"];
}
<div id="result"">
</div>
@section Scripts
{
<script>
$(document).ready(function(){
$.ajax({
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", "Bearer " + "@token");
},
url: "http://localhost:5153/WeatherForecast",
type: 'get',
success: function (res) {
console.log(res);
for(var i=0;i<res.length;i++){
$("#result").append("<div>" +res[i].date + " : " + res[i].temperatureC + "</div>");
}
alert("success");
},
error: function (err) {
console.log(err);
alert(err.statusText);
}
});
});
</script>
}
代码很简单,直接了当。我们从当前上下文中获取Access Token,在Ajax的beforeSend中使用token进行认证,后面的访问部分没有什么特殊的。
在HomeController中增加下面的代码:
public IActionResult JSClient()
{
return View();
}
同时运行客户端和Web Api,登录后访问https://localhost:7002/Home/JSClient,看一下效果。不出意外的话,应该报错,我们会发现CORS错误,也就是从浏览器中使用Ajax直接访问Web Api受到跨域访问的限制。这需要我们对Web Api进行修改,增加对跨域访问的支持:
builder.Services.AddCors(option => option.AddPolicy("cors",
policy => policy.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials()
.WithOrigins(new[] { "https://localhost:7002" })));
... ...
app.UseCors("cors");
重新运行,这次可以了:
这种解决方案是基于MVC或者Razor Page模式应用的典型方案,虽然客户端采用Ajax访问Web Api,但认证和token获取实际上是在后台完成的,这是典型的授权码模式。我们可以回顾一下本系列第二部分授权码模式的工作过程,现在已经完整实现并验证了整个过程。
上面的示例虽然使用Ajax访问Web Api,但需要后台完成认证和token的获取,真正的单页面应用没有后台参与这些过程。下一步我们看一下如果使用JS在前端完成整个流程。
Identity Server 4 从入门到落地(五)—— 使用Ajax访问Web Api的更多相关文章
- Identity Server 4 从入门到落地(四)—— 创建Web Api
前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...
- Identity Server 4 从入门到落地(三)—— 创建Web客户端
书接上回,我们已经搭建好了基于Identity Server 4的认证服务和管理应用(如果还没有搭建,参看本系列前两部分,相关代码可以从github下载:https://github.com/zhen ...
- Identity Server 4 从入门到落地(六)—— 简单的单页面客户端
前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...
- Identity Server 4 从入门到落地(七)—— 控制台客户端
前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...
- Identity Server 4 从入门到落地(八)—— .Net Framework 客户端
前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...
- Identity Server 4 从入门到落地(九)—— 客户端User和Role的解析
前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...
- Identity Server 4 从入门到落地(十)—— 编写可配置的客户端和Web Api
前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...
- Identity Server 4 从入门到落地(十一)—— Docker部署
前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...
- Identity Server 4 从入门到落地(十二)—— 使用Nginx集成认证服务
前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...
随机推荐
- matlab添加永久路径
addpath('D:\MATLAB6p5\toolbox\svm'); 临时添加路径,不能添加子目录 addpath(genpath('D:\MATLAB6p5\toolbox\svm'));临时添 ...
- 21.7.1 test
\(NOI\) 模拟赛 呜呜呜 \(\cdots\cdots\) \(T1\) 类似哈夫曼编码,虽然没学过但是我依然画出了二叉树,然后尝试树形dp,并且最后还抓住了一个优化!让我兴奋地以为自己能赛时A ...
- 实验 1: SDN拓扑实践
(图片和文档是自己写的,因为在CSDN也写了,所以会有自己的水印) 一.实验目的 能够使用源码安装Mininet: 能够使用Mininet的可视化工具生成拓扑: 能够使用Mininet的命令行生成特定 ...
- hdu 4288 Coder (线段树+离线)
题意: 刚开始有一个空集合.有三种操作: 1.往集合中加入一个集合中不存在的数 x 2.从集合中删除一个已经存在的数 x 3.计算集合的digest sum并输出. digest sum求 ...
- hdu 2586 How far away? (LCA模板)
题意: N个点,形成一棵树,边有长度. M个询问,每个询问(a,b),询问a和b的距离 思路: 模板题,看代码.DFS预处理算出每个结点离根结点的距离. 注意: qhead[maxn],而不是qhea ...
- MongoDB 集群 config server 查询超时导致 mongos 集群写入失败
环境 OS:CentOS 7.x DB:MongoDB 3.6.12 集群模式:mongod-shard1 *3 + mongod-shard2 *3 + mongod-conf-shard *3 + ...
- Windows内核中的CPU架构-6-中断门(32-Bit Interrupt Gate)
Windows内核中的CPU架构-6-中断门(32-Bit Interrupt Gate) 中断门和调用门类似,也是一种系统段.同样的它也可以用来提权. 中断门: 虽然中断门的段描述符如下: 但是中断 ...
- Linux&C open creat read write lseek 函数用法总结
一:五个函数的参数以及返回值. 函数 参数 返回值 open (文件名,打开方式以及读 ...
- JSON数据和Java对象的相互转换
JSON解析器: 常见的解析器: Jsonlib, Gson, fastjson, jackson 其中应用最广泛的是jackson,阿里的fastjson虽然比jackson快一点,但存在的问题比较 ...
- redis客户端修改了key-value对之后有时会报MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist o...错误,不能持久化
解决方案,连接redis客户端 redis目录下:redis-cli -h 127.0.0.1 -p 6379-h后为redis服务器ip,-p后为端口号进入redis-client之后输入命令 co ...