使用odic JS客户端开发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：
接下来修改program.cs，使应用支持静态文件：
这样修改后，项目将Index.html作为缺省页面。
然后就是修改Index.html、callback.html和app.js中的内容。
Index.html中的内容如下：
内容很简单，就是创建三个按钮，分别是登录、登出和调用Api。所实现的功能在app.js中定义：
app.js使用oidc js客户端中定义的Oidc.UserManager实现对认证服务器的访问，完成认证和获取access token的工作，其配置在config 中定义，
最后，定义callback.html:
到此，客户端编写完成，我们还需要在认证服务管理中定义这个客户端，注意，在定义时需要选择单页面应用：
参考上面config中的定义设置客户端的其它部分：
最后一项工作是修改Web Api，增加这个网址的CORS设置：
好了，现在可以测试一下这个应用了，在Visual Studio中将解决方案的启动项目设置为多项目启动，同时启动JSClient和Web Api项目：
按F5运行，界面如下：
点击Login，会重定位到认证服务器的登录界面,登录完成后会显示用户的信息：
点击Call Api，会访问Web Api并显示结果：
到此，单页面客户端完成。相关代码可以从github下载： https://github.com/zhenl/IDS4ClientDemo 。
本文来自博客园，作者：寻找无名的特质，转载请注明原文链接：https://www.cnblogs.com/zhenl/p/15629457.html