在你的框架里面执行: npm install oidc-client --save 配置oidc-client: 我的配置放在了angular5项目的environments里面, 因为这个配置根据环境的不同 (开发和生产)里面的设定是不同的: import { WebStorageStateStore } from 'oidc-client'; // The file contents for the current 其中的userKey字符串是oidc-client在localStorage默认存放用户信息的key, 这个可以通过oidc-client的配置来更改. /shared/services/auth.service'; import { User } from 'oidc-client'; import { ToastrService } from 'ngx-toastr 自动刷新Token: oidc-client的自动刷新token是只要配置好了, 你就不用再做什么操作了. 刷新的时候, 它好像是会在页面上弄一个iframe, 然后在iframe里面操作.
1.4 oidc-client library下载 在上篇,我们使用了一个库去处理OpenID Connect 协议,在JavaScript中,我们同样需要类似的库,只不过现在需要这个库能够在JavaScript 中使用且浏览器运行(因为node.js是服务端),https://github.com/IdentityModel/oidc-client-js 我们用npm下载 npm i oidc-client copy \node_modules\oidc-client\dist\* . \wwwroot\ 1.5 添加html和js文件 两个html文件和一个除上面的oidc-client之外的js文件组成我们JavaScript应用(SPA) index.html callback.html document.getElementById("logout").addEventListener("click", logout, false); //UserManager from the oidc-client
登陆需要使用到oidc-client.js所以通过npm安装: npm install --save oidc-client Auth Service 需要登陆服务 auth.service: ng g angular/core'; import { Observable } from 'rxjs/Observable'; import { User, UserManager, Log } from 'oidc-client server的地址是 http://localhost:5000, 登陆成功后跳转后来的地址是: http://localhost:4200/login-callback 其中的UserManager就是oidc-client /services/auth.service'; import { Router } from '@angular/router'; import { User } from 'oidc-client' /services/auth.service'; import 'rxjs/add/operator/map'; import { User } from 'oidc-client'; import {
oidc-client库是一个这样的库。 它可以通过NPM,Bower,以及从github直接下载。 NPM 如果你需要使用NPM下载oidc-client库,你需要遵循下面的步骤: 添加一个NPM的包文件"package.json" ? 在package.json中添加oidc-client到devDependency: "devDependencies": { "oidc-client": "1.4.1" } 保存此文件后,Visual 在〜/ node_modules / oidc-client / dist文件夹中找到名为oidc-client.js的文件,并将其复制到应用程序的〜/ wwwroot文件夹中。 api, false); document.getElementById("logout").addEventListener("click", logout, false); 接下来,我们可以使用oidc-client
第2步:OIDC-Client - 认证请求 紧接上一步,浏览器在接收到第1步的302响应后,会对Location所指定的URL发起一个Get请求。这个请求携带的参数如下: ? 第7步:OIDC-Client - 接收第6步POST过来的参数,构建自身的登录状态 ? 第1步:OIDC-Client - 触发登出请求 点击Logout链接。 ? 点击退出后会触发一个GET请求,如下: ? 第2步:OIDC-Client - 登出请求 浏览器通过GET访问上一步中指定的Location地址。 ? 第5步:OIDC-Client - 处理登出回调通知 在浏览器访问上面代码中iframe指向的地址的时候,被动登出的OIDC客户端会接收到登出通知。 ?
import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import { User } from 'oidc-client 登录成功后, 会跳转到login-callback, 这里有一个地方需要改一下(可能是oidc-client的bug?)
Vue项目和其他的SPA项目是一样的,连接IdentityServer4认证中心,主要是通过oidc-client这个插件来处理的, npm install oidc-client --save 用法其实很简单
但是,客户端必须对check_session_iframe执行监视,并且这由oidc-client JavaScript库实现。
运行js客户端,登陆, 并调用这个hug api http://localhost:8000/home: (我的js客户端是angular5的, 这个没法开源, 公司财产, 不过配置oidc-client
provider: auth-server # 授权服务器(如果不配置,则provider需要使用auth-client作为key) client-id: oidc-client
这里先说明一下,因为毕竟是集成Ids4,涉及的知识会比较多,比如如何使用oidc-client、如何c#调用js事件、如何封装service模块,不过本文就不过多的对这几个知识点讲解原理了,先列出来操作步骤和代码 window.users = { startSigninMainWindow: function () { // ... }, } 里边的内容很简单,就是调用上一节的oidc-client
运行js客户端,登陆, 并调用这个hug api http://localhost:8000/home: (我的js客户端是angular5的, 这个没法开源, 公司财产, 不过配置oidc-client
OIDC-Client :1 指定oidc-server.test使用Github认证(可选) 下图是上一篇中起始页面,这次我们点击Oidc Login(Github)这个链接(客户端也可以不指定采用Github
另外,如果是前后端分离的结构,也可以浏览一下ddrsql的《IdentityServer4之Implicit(隐式许可) —— oidc-client-js前后端分离》,里面介绍了oidc-client
为前台信息展示已经全部搞定,具体的代码查看指定Github的分支即可,分支名基本都是Is4,Ids4等字样; 02、Nuxt.tBug项目目前正在升级中,其实和Vue的前后端分离是一样的,都是使用的同一个组件框架oidc-client
req, res) => res.redirect('/') ); 前端JavaScript集成 前端可以用oidc-client-js库: import { UserManager } from 'oidc-client