前面的部分:

Identity Server 4 从入门到落地(一)—— 从IdentityServer4.Admin开始

Identity Server 4 从入门到落地(二)—— 理解授权码模式

Identity Server 4 从入门到落地(三)—— 创建Web客户端

Identity Server 4 从入门到落地(四)—— 创建Web Api

Identity Server 4 从入门到落地(五)—— 使用Ajax 访问 Web Api

认证服务和管理的github地址: https://github.com/zhenl/IDS4Admin

客户端及web api示例代码的github地址:https://github.com/zhenl/IDS4ClientDemo

前面我们在Web应用的页面上使用Ajax访问Web Api, 这种情况下,认证以及获取Access Token还是在后台进行的,而真正的单页面应用没有后台的参与,web服务器只起到host文件的作用,这部分我们编写简单的单页面应用,试验一下单页面访问受认证保护的Web Api。

我们参考Identity Server 4的官网示例编写这个单页面应用,将其中的认证服务器改为我们本地运行的认证服务http://localhost:4010,Web Api使用前面编写的简单示例,地址为http://localhost:5153。在编写之前,首先下载oidc的客户端,可以从github下载: https://github.com/IdentityModel/oidc-client-js/releases/tag/1.11.5 。我们使用编译完成的最终文件,将下载的文件解压,dist目录就是我们需要的文件。

首先使用Visual Studio 2022创建一个空的Asp.Net Core Web项目,我们使用这个项目作为html和js文件的宿主,除此之外不做其它工作。在项目目录下创建wwwroot目录,用于保存html和js文件,将下载的dist目录拷贝到这个目录中,目录名字改为oidc-client-js-1.11.5。然后在wwwroot下创建index.html、callback.html和app.js三个文件,文件的内容在后面填写。项目的结构如下:



然后修改lanuchSettings.json,项目的运行地址是http://localhost:5210:

{
"profiles": {
"IDS4ClientJS": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": true,
"applicationUrl": "http://localhost:5210",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
}
}
}

接下来修改program.cs,使应用支持静态文件:

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
app.UseDefaultFiles();
app.UseStaticFiles();
app.Run();

这样修改后,项目将Index.html作为缺省页面。

然后就是修改Index.html、callback.html和app.js中的内容。

Index.html中的内容如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button id="login">Login</button>
<button id="api">Call API</button>
<button id="logout">Logout</button> <pre id="results"></pre> <script src="oidc-client-js-1.11.5/oidc-client.js"></script>
<script src="app.js"></script>
</body>
</html>

内容很简单,就是创建三个按钮,分别是登录、登出和调用Api。所实现的功能在app.js中定义:

function log() {
document.getElementById('results').innerText = ''; Array.prototype.forEach.call(arguments, function (msg) {
if (msg instanceof Error) {
msg = "Error: " + msg.message;
}
else if (typeof msg !== 'string') {
msg = JSON.stringify(msg, null, 2);
}
document.getElementById('results').innerHTML += msg + '\r\n';
});
} document.getElementById("login").addEventListener("click", login, false);
document.getElementById("api").addEventListener("click", api, false);
document.getElementById("logout").addEventListener("click", logout, false); var config = {
authority: "http://localhost:4010",
client_id: "js",
redirect_uri: "http://localhost:5210/callback.html",
response_type: "code",
scope: "openid profile myapi",
post_logout_redirect_uri: "http://localhost:5210/index.html",
};
var mgr = new Oidc.UserManager(config); mgr.getUser().then(function (user) {
if (user) {
log("User logged in", user.profile);
}
else {
log("User not logged in");
}
}); function login() {
mgr.signinRedirect();
} function api() {
mgr.getUser().then(function (user) {
var url = "http://localhost:5153/WeatherForecast"; var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onload = function () {
log(xhr.status, JSON.parse(xhr.responseText));
}
xhr.setRequestHeader("Authorization", "Bearer " + user.access_token);
xhr.send();
});
} function logout() {
mgr.signoutRedirect();
}

app.js使用oidc js客户端中定义的Oidc.UserManager实现对认证服务器的访问,完成认证和获取access token的工作,其配置在config 中定义,

var config = {
authority: "http://localhost:4010",
client_id: "js",
redirect_uri: "http://localhost:5210/callback.html",
response_type: "code",
scope: "openid profile myapi",
post_logout_redirect_uri: "http://localhost:5210/index.html",
};

最后,定义callback.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script src="oidc-client-js-1.11.5/oidc-client.js"></script>
<script>
new Oidc.UserManager({response_mode:"query"}).signinRedirectCallback().then(function() {
window.location = "index.html";
}).catch(function(e) {
console.error(e);
});
</script>
</body>
</html>

到此,客户端编写完成,我们还需要在认证服务管理中定义这个客户端,注意,在定义时需要选择单页面应用:



参考上面config中的定义设置客户端的其它部分:





最后一项工作是修改Web Api,增加这个网址的CORS设置:

builder.Services.AddCors(option => option.AddPolicy("cors",
policy => policy.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials()
.WithOrigins(new[] { "https://localhost:7002", "http://localhost:5210" })));

好了,现在可以测试一下这个应用了,在Visual Studio中将解决方案的启动项目设置为多项目启动,同时启动JSClient和Web Api项目:

按F5运行,界面如下:



点击Login,会重定位到认证服务器的登录界面,登录完成后会显示用户的信息:



点击Call Api,会访问Web Api并显示结果:



到此,单页面客户端完成。相关代码可以从github下载: https://github.com/zhenl/IDS4ClientDemo

Identity Server 4 从入门到落地(六)—— 简单的单页面客户端的更多相关文章

  1. Identity Server 4 从入门到落地(八)—— .Net Framework 客户端

    前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...

  2. Identity Server 4 从入门到落地(三)—— 创建Web客户端

    书接上回,我们已经搭建好了基于Identity Server 4的认证服务和管理应用(如果还没有搭建,参看本系列前两部分,相关代码可以从github下载:https://github.com/zhen ...

  3. Identity Server 4 从入门到落地(七)—— 控制台客户端

    前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...

  4. Identity Server 4 从入门到落地(九)—— 客户端User和Role的解析

    前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...

  5. Identity Server 4 从入门到落地(十)—— 编写可配置的客户端和Web Api

    前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...

  6. Identity Server 4 从入门到落地(十一)—— Docker部署

    前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...

  7. Identity Server 4 从入门到落地(十二)—— 使用Nginx集成认证服务

    前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...

  8. Identity Server 4 从入门到落地(五)—— 使用Ajax访问Web Api

    前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...

  9. Identity Server 4 从入门到落地(四)—— 创建Web Api

    前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...

随机推荐

  1. IdentityServer4 负载均衡配置

    在不用到负载之前,一切都很好,但是部署多个实例之后,问题挺多的:session问题.令牌签发后的校验问题. 在此之前,先自查官方文档:Deployment - IdentityServer4 1.0. ...

  2. 基于openeuler的openssl编程

    ------------恢复内容开始------------ 一.编译环境 我下载好之后默认安装了openssl,若未安装的可输入以下命令: wget https://www.openssl.org/ ...

  3. 汇编--LDR

    转载:https://my.oschina.net/zengsai/blog/23733 ARM LDR 伪指令的格式: LDR Rn, =expr 如果name是立即数的话LDR R0,=0X123 ...

  4. STL 去重 unique

    一.unique函数 类属性算法unique的作用是从输入序列中"删除"所有相邻的重复元素. 该算法删除相邻的重复元素,然后重新排列输入范围内的元素,并且返回一个迭代器(容器的长度 ...

  5. hdu 1069 Monkey and Banana(记忆搜)

    题意: N(不超过30)种木块,每种木块有长.宽.高x,y,z. 木块A可以搭在木块B上当且仅当A的底面长和宽都分别小于B的顶面的长与宽,即不能有超出B的部分. 问垒起来的"木块塔" ...

  6. You (oracle) are not allowed to access to (crontab) because of pam configura

    用oracle用户添加备份计划任务,crontab -e,提示:You (oracle) are not allowed to access to (crontab) because of pam c ...

  7. TDSQL | 在整个技术解决方案中HTAP对应的混合交易以及分析系统应该如何实现?

    从主交易到传输,到插件式解决方案,每个厂商对HTAP的理解和实验方式都有自己的独到解法,在未来整个数据解决方案当中都会往HTAP中去牵引.那么在整个技术解决方案中HTAP对应的混合交易以及分析系统应该 ...

  8. 手撸一个IOC容器

    IoC 什么是IoC? IoC是Inversion of Control(控制反转)的简称,注意它是一个技术思想.描述的是对象创建.管理的事情. 传统开发方式:比如类A依赖类B,往往会在类A里面new ...

  9. Linux下Zabbix5.0 LTS添加MySQL监控,实现邮件报警并执行预处理操作

    依据前文:Linux下Zabbix5.0 LTS监控基础原理及安装部署(图文教程) 环境,继续添加MySQL应用集. 第一部分:添加Zabbix自带的MySQL应用集. 在ZabbixClient-0 ...

  10. [luogu5616]恶魔之树

    记录$lcm$的质因子状态(包括大于$\sqrt 300$的质因子),设$f[s]$表示质因子状态为$s$的$lcm$之和,转移枚举当前的数$k$,转移到$lcm(s,k)$即可,时间复杂度为$o(n ...