Identity Server 4 原理和实战（完结）_Implicit Flow 实例

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