前言

前面已经解释了两个案例了，通信原理其实已经很清楚了，那么纯js客户端是怎么处理的呢？

正文

直接贴例子哈。

https://github.com/IdentityServer/IdentityServer4/tree/main/samples/Quickstarts/4_JavaScriptClient

那么解释一下其实怎么做的吧。

那么就直接来看这个javascriptClient 是怎么实现的吧。

public void Configure(IApplicationBuilder app)

{

	app.UseDefaultFiles();

	app.UseStaticFiles();

}

这个两个就是给静态文件设置路由，这个不过多介绍，.net core 系列已经解读过其源码了。

<!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"></script>

    <script src="app.js"></script>

</body>

</html>

这个的话，那么引入了oidc-client.js 和 app.js。

app.js 肯定就是自己项目的代码了。

oidc-client 可以看下官方介绍。https://github.com/IdentityModel/oidc-client-js

也就是说用好了oidc-client就可以了。

首先实例了一个客户端:

var config = {

    authority: "https://localhost:5001",

    client_id: "js",

    redirect_uri: "https://localhost:5003/callback.html",

    response_type: "code",

    scope:"openid profile api1",

    post_logout_redirect_uri : "https://localhost:5003/index.html",

};

var mgr = new Oidc.UserManager(config);

然后登录的时候:

function login() {

    mgr.signinRedirect();

}

这里面根据我们前面的例子，也能猜到其实就是去查idenityserver的wellknown 跳转到登录地址。

然后identityServer 注册好jsClient 就行。

// JavaScript Client

new Client

{

	ClientId = "js",

	ClientName = "JavaScript Client",

	AllowedGrantTypes = GrantTypes.Code,

	RequireClientSecret = false,

	RedirectUris =           { "https://localhost:5003/callback.html" },

	PostLogoutRedirectUris = { "https://localhost:5003/index.html" },

	AllowedCorsOrigins =     { "https://localhost:5003" },

	AllowedScopes =

	{

		IdentityServerConstants.StandardScopes.OpenId,

		IdentityServerConstants.StandardScopes.Profile,

		"api1"

	}

}

下面直接看效果就好了。

首先去拿identityserver 的公开信息。

然后访问identityServer:

然后就到了登录页面了。

然后进行登录。

还是和以前一样，这里可以直接运行例子更加直观。

然后看下客户端拿到授权码后如何获取token的。

然后通过token 获取到了userinfo。

这里解释一下这里有几个token，一个是access_token 这个是来表示授权令牌，比如访问一些接口的api。

然后这个id_token 是身份令牌，在线解析一下哈:

那么这个身份令牌是用来干什么的。授权令牌用来访问api授权的，那么身份令牌用来干什么的呢？

这样我们不要猜，直接看官方怎么说。

https://auth0.com/docs/secure/tokens/id-tokens#learn-more

ID tokens are used in token-based authentication to cache user profile information and provide it to a client application, thereby providing better performance and experience. The application receives an ID token after a user successfully authenticates, then consumes the ID token and extracts user information from it, which it can then use to personalize the user's experience.

上面说id tokens 是基于认证token 来缓存用户的信息提供给客户端，提供更好的性能和体验。在认证后应用收到id token，使用id token 收集用户的信息，可以被使用与私有化的用户体验。

我们知道auth2.0 管理授权，但是不管理用户信息。当然了auth 2.0 可以通过api 获取到用户信息，但是这是另外一回事。

比如说我们访问简书，跳转到qq登录，然后又登录回来，这其中包括了认证和授权。认证应该返回id tokens，来证明这个用户认证了。授权应该返回access_token 表示授权token。

然后文档中也给了例子。

For example, suppose you have a regular web app that you register it with Auth0 and configure to allow users to login with Google. Once a user logs in, use the ID token to gather information such as name and email address, which you can then use to auto-generate and send a personalized welcome email.

比如说，假设你有一个常规的web app，这个app 你允许用户他能给个google 登录。 一但用户登录，使用这个id token 可以收集用户信息，比如说名字邮件，这样你就可以给这个用户发送邮件。

上面那些id_token 中好像没有什么东西，那么其实我们可以增加一些东西。

全部可以看这个:

https://docs.authing.cn/v2/concepts/id-token.html

那么作为客户端下次访问的时候如何去读取数据呢？

也就是从下面这里去读数据:

当然里面还会去执行是否会话过期。

这里面就是检查会话是否过期。

这个有什么用呢？

假如我们在identity server 中退出了登录，那么会发生什么呢？

下面是我identity server 退出后的结果:

那么就会访问https://localhost:5001/connect/authorize。

这里就不看细节了，讲一下效果。

cookie 清除了，会话结束了。

前面是有identity 会话的。

那么这cookie 有什么用呢？

如果cookie 在的话，那么会把cookie带上去访问identity server，identity 如果确定这个会话没有过期，那么不会进入登录界面，而是直接callback 回来。

结

现在都是不带数据库的，后面把数据库例子说明一下。

identity4 系列————纯js客户端案例篇[四]的更多相关文章

  1. [OIDC in Action] 2. 基于OIDC（OpenID Connect）的SSO（纯JS客户端）

    在上一篇基于OIDC的SSO的中涉及到了4个Web站点: oidc-server.dev:利用oidc实现的统一认证和授权中心,SSO站点. oidc-client-hybrid.dev:oidc的一 ...

  2. 纯JS拖动案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. 【HANA系列】【第六篇】SAP HANA XS使用JavaScript(JS)调用存储过程(Procedures)

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列][第六篇]SAP HANA XS ...

  4. Node.js Stream-基础篇

    Node.js Stream - 基础篇 邹斌 ·2016-07-08 11:51 背景 在构建较复杂的系统时,通常将其拆解为功能独立的若干部分.这些部分的接口遵循一定的规范,通过某种方式相连,以共同 ...

  5. 纯JS Web在线可拖拽的流程设计器

    F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...

  6. HAproxy指南之haproxy实现动静分离（案例篇）

    HAproxy指南之haproxy实现动静分离(案例篇) 转自   https://blog.51cto.com/blief/1751806   实际应用环境中,往往需要根据业务请求将相关不同请求跳转 ...

  7. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  8. 纯JS实现KeyboardNav(学习笔记)一

    纯JS实现KeyboardNav(学习笔记)一 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 GitHub项目源码 预览地址 最终效果 KeyboardNav使用指南 ...

  9. 【基于WPF+OneNote+Oracle的中文图片识别系统阶段总结】之篇四：关于OneNote入库处理以及审核

    篇一:WPF常用知识以及本项目设计总结:http://www.cnblogs.com/baiboy/p/wpf.html 篇二:基于OneNote难点突破和批量识别:http://www.cnblog ...

随机推荐

  1. JS数组at函数(获取最后一个元素的方法)介绍

    本文介绍js中数组的at函数,属于比较简单的知识普及性文章,难度不大. 0x00 首先,我们可以思考如下一个问题,如果要获取一个数组的最后一个元素(这是很常用的操作),我们应该怎么做? 相信大部分人能 ...

  2. MySQL-5-TCL,视图,变量,存储过程和函数,流程控制

    TCL:Transaction Control Language事务控制语言 TCL 事务的特点 acid: 原子性(Atomicity),一致性(Consistency),隔离性(isolation ...

  3. ConcurrentHashMap深入剖析（基于JDK1.7）

    最近有点时间,翻了翻ConcurrentHashMap的源码学习了一下,对我自己认为比较重要的一些方法进行了学习,添加了一些必要的注释,拿出来与园子的小伙伴分享一下,有说的不对的地方,还请各位批评指正 ...

  4. nginx源码层面探究request_time、upstream_response_time、upstream_connect_time与upstream_header_time指标具体含义

    背景概述 最近计划着重分析一下线上各api的HTTP响应耗时情况,检查是否有接口平均耗时.99分位耗时等相关指标过大的情况,了解到nginx统计请求耗时有四个指标:request_time.upstr ...

  5. Quick Pow: 如何快速求幂

    今天讲个有趣的算法:如何快速求 \(n^m\),其中 n 和 m 都是整数. 为方便起见,此处假设 m >= 0,对于 m < 0 的情况,求出 \(n^{|m|}\) 后再取倒数即可. ...

  6. JAVA学习的第一周

    这是发表的第一篇博客,关于Java编程的学习体会如下 1.了解Java的产生与发展时机:1995左右出现Java语言,然后Java的最主要的特点是"跨平台".对于跨平台我不太理解, ...

  7. 【RocketMQ】消息的拉取

    RocketMQ消息的消费以组为单位,有两种消费模式: 广播模式:同一个消息队列可以分配给组内的每个消费者,每条消息可以被组内的消费者进行消费. 集群模式:同一个消费组下,一个消息队列同一时间只能分配 ...

  8. SpringCloudAlibaba分布式事务解决方案Seata实战与源码分析-中

    事务模式 概述 在当前的技术发展阶段,不存一个分布式事务处理机制可以完美满足所有场景的需求.一致性.可靠性.易用性.性能等诸多方面的系统设计约束,需要用不同的事务处理机制去满足. 目前使用的流行度情况 ...

  9. 强化版按键消抖Verilog实现

    介绍:按键的物理结构导致了会有抖动现象的出现,判断按键是否真正按下,需要把抖动的部分滤波.根据经验可知,抖动一般在20ms内,所以常规的消抖方法是从变化沿出现时刻开始,延时20ms后判断按键的状态.这 ...

  10. .Net CLR R2R编译的原理简析

    前言 躺平了好一段时间了,都懒得动了.本文均为个人理解所述,如有疏漏,请指正. 楔子 金庸武侠天龙八部里面,少林寺至高无上的镇寺之宝,武林人士梦寐以求的内功秘笈易筋经被阿朱偷了,但是少林寺也没有大张旗 ...