Identity Server 4 从入门到落地（六）—— 简单的单页面客户端
前面的部分：
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 从入门到落地（六）—— 简单的单页面客户端的更多相关文章
- Identity Server 4 从入门到落地（八）—— .Net Framework 客户端
前面的部分: 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 从入门到落地（九）—— 客户端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 从入门到落地(二)-- 理解授权码模式 ...
- Identity Server 4 从入门到落地（五）—— 使用Ajax访问Web Api
前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...
- Identity Server 4 从入门到落地（四）—— 创建Web Api
前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...
随机推荐
- 零基础小白要如何跟好的学习嵌入式Linux（转）
作为一个新人,怎样学习嵌入式Linux?被问过太多次,特写这篇文章来回答一下. 在学习嵌入式Linux之前,肯定要有C语言基础.汇编基础有没有无所谓(就那么几条汇编指令,用到了一看就会). C语言要学 ...
- 双堆DEAP
记录一道遇到的考研真题 特性分析: DEAP为一颗完全二叉树,左子树小堆,右子树大堆,故左右子树分别可以用l[].r[]数组存储,用m和n分别表示当前两完全二叉树的结点,左右子树高度差为1,且左子树的 ...
- Java代理：静态代理、JDK动态代理和CGLIB动态代理
代理模式(英语:Proxy Pattern)是程序设计中的一种设计模式.所谓的代理者是指一个类别可以作为其它东西的接口.代理者可以作任何东西的接口:网络连接.存储器中的大对象.文件或其它昂贵或无法复制 ...
- Linux上的多进程间通信机制
最近项目需要一个类似于Android上广播通信机制,方便多进程间相互通信,可以是一对多,多对一,或者多对多. 大致如下 Linux现有的进程间通信能用的只有 管道 消息队列 信号量(这个还只能算同步机 ...
- 转载: VIVADO的增量综合流程
http://xilinx.eetrend.com/content/2019/100044286.html 从 Vivado 2019.1 版本开始,Vivado 综合引擎就已经可以支持增量流程了.这 ...
- 平衡二叉树检查 牛客网 程序员面试金典 C++ Python
平衡二叉树检查 牛客网 程序员面试金典 C++ Python 题目描述 实现一个函数,检查二叉树是否平衡,平衡的定义如下,对于树中的任意一个结点,其两颗子树的高度差不超过1. 给定指向树根结点的指针T ...
- hdu 4288 Coder (线段树+离线)
题意: 刚开始有一个空集合.有三种操作: 1.往集合中加入一个集合中不存在的数 x 2.从集合中删除一个已经存在的数 x 3.计算集合的digest sum并输出. digest sum求 ...
- inline hook原理和实现
inline hook是通过修改函数执行指令来达到挂钩的.比如A要调用B,但人为地修改执行流程导致A调用了C,C在完成了自己的功能后,返回B再执行. 修改这段指令前首先要获取修改权限 由于要修改的代码 ...
- mininet-2.2.2-170321-ubuntu-14.04.4-server-amd64的使用
1.使用Vmware打开下载好的mininet-2.2.2-170321-ubuntu-14.04.4-server-amd64 2.登录账号密码都为mininet 3.用命令行生成拓扑,并测试连通性 ...
- 攻防世界 WEB 高手进阶区 easytornado Writeup
攻防世界 WEB 高手进阶区 easytornado Writeup 题目介绍 题目考点 Python模板 tornado 模板注入 Writeup 进入题目, 目录遍历得到 /flag.txt /w ...