首页 > 其他 > 详细

Identity Server 4 原理和实战(完结)_Implicit Flow 实例

时间:2019-06-02 15:54:39      阅读:186      评论:0      收藏:0      [点我收藏+]


技术分享图片
技术分享图片
技术分享图片

技术分享图片

技术分享图片

oidc-client.js貌似是IdentityServer4的团队开发的
技术分享图片
服务端的设置
在服务端新增一个Client
技术分享图片


技术分享图片
之后需要在angular客户端页建两个页面,对应这两个url才行

登出之后要跳转的url地址
技术分享图片
允许跨域的地址
技术分享图片
这里和以前一样技术分享图片

angular客户端设置


angular客户端设置,首先需要安装oidc-client
技术分享图片

技术分享图片
oidc-client需要配置一些参数,在这个文件内。environments/environment.ts相当于我们开发的时候会使用这个文件
技术分享图片
生产环境会走这个文件
environment.prod.ts这个文件。和asp.net core文件里面 那个 appsettings差不多
声明两个常量,分别是IdentityServe的地址和api1 的地址
技术分享图片
视频中装了个这么个东西,号称是可以在保存的时候自动把分号给你补上
技术分享图片
把idpBase的url放在environment里面输出。然后定义openIdConnectSettings这个对象设置openIdConnect的一些参数
技术分享图片
配置这写相关的参数
技术分享图片
新建Service。ng g s iodc/openIdConnect:创建完成后他会改名,为opne-id-connect
技术分享图片
技术分享图片
定义私有变量
技术分享图片
技术分享图片

技术分享图片
ReplaySubject表示即可以订阅又可以发布
技术分享图片
userManager.getUser()方法返回的是一个Promise
技术分享图片

技术分享图片
技术分享图片
自动刷新的功能
技术分享图片
最后再加一个退出的
技术分享图片
在首页顶部的右侧 加一些按钮什么的,用户登陆后把用户名显示出来
技术分享图片
注入进来才能在HTML内使用
技术分享图片

技术分享图片
点击登陆:
技术分享图片

登陆
技术分享图片
idToken和AccessToken都在应用里
技术分享图片
是因为我们没做回调的页面这个signin-oidc
技术分享图片
我们需要在前端做一下这个页面
技术分享图片
这个页面可以不用挂在angular应用里面,可以作为单独的页面
技术分享图片

这样登陆的回调就写完了。
技术分享图片
html页面随便写点文字
技术分享图片

再写刷新的页面
技术分享图片
再页面中定义一个看不见frame页面,进行刷新,从而刷新accessToken
技术分享图片
配置上着两个组件的路由
技术分享图片
测试登陆
技术分享图片

api1设置只有登陆的用户才可以访问
技术分享图片

这样再去访问 就读取不到数据了,再访问数据的时候没有带上accessToken
技术分享图片

angular拦截器


如果每一个地方都要加上参数比较麻烦,所以angular的拦截器
angular拦截器,对所有发出的请求进行拦截。然后修改下Authorization的Header就可以了
新建拦截器没有生成的命令,只能自己新建一个ts的文件
authorization-header.interceptor.ts
技术分享图片

注入opneIdConnectService
技术分享图片
技术分享图片
注册拦截器
技术分享图片

技术分享图片
这样整个代码就完成了

技术分享图片
https://github.com/IdentityModel/oidc-client-js


 

Identity Server 4 原理和实战(完结)_Implicit Flow 实例

原文:https://www.cnblogs.com/wangjunwei/p/10963143.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!