营销型网站建设推来客网络,tomcat做网站属于什么,知乎 wordpress 插件,详情页设计收费前言上一篇Resource Owner Password Credentials模式虽然有用户参与#xff0c;但对于非信任的第三方的来说#xff0c;使用这种模式是有风险的#xff0c;所以相对用的不多#xff1b;这里接着说说implicit隐式模式#xff0c;这种模式比较适合于纯前端客户端#xff0c… 前言上一篇Resource Owner Password Credentials模式虽然有用户参与但对于非信任的第三方的来说使用这种模式是有风险的所以相对用的不多这里接着说说implicit隐式模式这种模式比较适合于纯前端客户端比如Vue、Angular、React项目等相对来说整个流程比较安全只需在认证服务器进行认证即可无需在客户端进行相关隐私信息录入但前提是要客户端保证安全不然容易被别人钓鱼(安全很重要)那IdentityServer4不背这个锅。正文既然有用户参与交互肯定少不了认证那更不能缺少所以这里使用OIDC(OpenID Connect)的协议进行用户身份验证别跑不管是客户端还是认证服务器端已经都封装好了拿过来直接用即可从流程先了解一下直接上图流程简要说明用户通过浏览器(User-Agent)访问第三方客户端(Client)如果客户端需要进行认证授权则将其重定向到认证服务器(Authorization server);用户(ResorceOwner)在认证服务器上进行认证认证服务器(Authorization server)验证成功之后返回AccessToken和Id Token客户端后续用户再操作客户端的时候若需访问保护资源直接在请求中带上AccessToken即可最终资源服务器(Resource server)返回对应信息术语解释User-Agent这里指就是浏览器如果客户端是Web就需要用户通过浏览器访问客户端所以这里的浏览器就是User-Agent;Id Token标识用户身份的Token这是OpenID Connect带上的。知道大概的流程接下来就通过代码实践的方式演示一把。1.拷贝上一节Reource Owner Password的授权服务器和资源服务器代码并完善对于资源服务器来说这里先暂时不用修改其他认证服务器增加界面支持而认证服务器需要有自己的页面因为在访问客户端时会重定向到认证服务器进行认证信息录入和授权相关操作那页面需要自己写吗不需要的IdentityServer4模板中已经准备好了如下操作方式一直接从github上下载下载地址https://github.com/IdentityServer/IdentityServer4.Quickstart.UI/tree/main方式二命令行方式从IdentityServer4模板中获取dotnet new -i IdentityServer4.Templates ##先安装模板里面有很多关于IDS4的模板
dotnet new is4ui ## 指定UI模板获取
通过以上两种方式都可以获取到以下文件将其拷贝到认证服务器项目中如下由于之前的认证服务器只是单纯API项目不支持MVC因为增加的界面是MVC页面所以需要在Startup.cs中增加MVC的支持页面中需要样式文件的加载则同时需要增加静态文件处理如下运行起来看效果如下备案客户端上面界面没问题了这里打算做一个纯前端(Vue)的客户端进行测试所以需要在认证服务器中提前将客户端进行备案如下2. 增加纯前端客户端(Vue)这里不打算使用脚手架工具去生成项目为了不喧宾夺主这里就很单纯的写html和Js只是在其中引用Vue用Vue的思路进行编码演示既然是个纯前端项目得要有个服务器作为宿主然后通过URL地址访问页面这里不想用其他比较重的服务器live-server简单好用就用它了简单搭建一下环境环境准备我是用npm安装所以需要安装nodejs这里就不详细扩展了具体安装步骤详见https://www.runoob.com/nodejs/nodejs-install-setup.html有了nodejs环境直接npm安装live-server如下命令npm install -g live-server ###全局安装live-server后续都可以用
安装完就可以直接使用了直接在指定目录下执行live-server即可默认端口是8080创建纯前端客户端项目目录结构如下简要说明js目录存放依赖的jslive-server-https目录是提供live-server启动时提供live-server-https支持其实项目本身并不需要后续如果需要将前端页面指定https访问可以指定此库运行oidc-client.js/oidc-client.min.js是用于前端客户端实现OpenID Connect引入直接使用即可也可以自行在网上下载(https://github.com/IdentityModel/oidc-client-js)vue.js提供vue的支持虽然没用脚手架但用vue还是没问题callback.html登录成功之后回调的页面即当在认证服务器登录成功之后重定向客户端的页面index.html主页面这里也用于登出时重定向的页面noauth.html无权限时跳转的页面代码主要集中在index.html下面直接上代码吧具体说明直接看注释吧index.html代码!DOCTYPE html
html
headmeta charsetutf-8 /title/title
/head
bodydiv idappbutton idlogin clickloginLogin/buttonbutton idapi clickcallApiCall API/buttonbutton idlogout clicklogoutLogout/button!-- 显示日志包含登入、登出和请求API结果 --pre idresults{{results}}/pre/divscript src./js/oidc-client.js/scriptscript srcjs/vue.js/script!-- script src./js/app.js/script --scriptvar vm new Vue({el: #app,created() {// 根据配置信息创建用户管理对象后续直接使用this.mgr new Oidc.UserManager(this.config);},mounted() {// 这里要注意this的使用var that this;this.mgr.getUser().then(function(user) {if (user) { // 判断是否登录成功that.log(User logged in, user.profile);} else { // 没登录that.log(User not logged in);}});},data: {// 客户端配置config: {authority: http://localhost:6100,client_id: JsClient,redirect_uri: http://localhost:8080/callback.html,response_type: id_token token,scope: openid profile orderApi, //客户端需要的权限范围 post_logout_redirect_uri: http://localhost:8080/index.html,},mgr: null, //登录对象results: //登录通过数据},methods: {// 登录login: function() {console.log(login);this.mgr.signinRedirect();},callApi: function() {console.log(CallAPI);var that this;// 先判断是否登录登录之后在去调用APIthis.mgr.getUser().then(function(user) {var url http://localhost:5000/api/Order;// 这里使用原生异步请求就是引入第三方ajax库啦var xhr new XMLHttpRequest();xhr.open(GET, url);xhr.onload function() {// 显示请求API获取到的数据that.log(xhr.status, JSON.parse(xhr.responseText));};xhr.setRequestHeader(Authorization, Bearer user.access_token);// 发送请求xhr.send();});},logout: function() {console.log(logout);// 登出this.mgr.signoutRedirect();},// 将信息展示log: function() {var that this;Array.prototype.forEach.call(arguments, function(msg) {if (msg instanceof Error) {msg Error: msg.message;} else if (typeof msg ! string) {msg JSON.stringify(msg, null, 2);}that.results msg \r\n;});}}});/script
/body
/html
callback.html代码!DOCTYPE html
html
headmeta charsetutf-8 /title/title
/head
bodyscript src./js/oidc-client.js/scriptscriptnew Oidc.UserManager().signinRedirectCallback().then(function() {console.log(test);// 如果登录成功就回到主页面window.location index.html;}).catch(function(e) {console.log(e);//没有权限就跳转到无权限页面window.locationnoauth.html;});/script
/body
/html
noauth.html代码!DOCTYPE html
html
headmeta charsetutf-8 /title/title
/head
bodydiv没权限/div
/body
/html
到这客户端的代码已经撸完了直接进入JsClient目录执行live-server即可如果使用http请求执行live-server即可3.联合调试看效果上一步已经将客户端启起来了接下来把认证服务器和API资源服务器启动看看效果点击Login进行登录就会跳转到认证服务器进行验证如下到这一步估计用其他浏览器没什么问题会继续进行跳转但如果用到谷歌最新的浏览器这里就不会跳转因为谷歌对Cookie进行整改尽管输入正确的用户名和密码也只是刷新一下还是在登录页面需要做一下处理如下新增一个处理类SameSiteCookiesServiceCollectionExtensions.cs代码内容就不贴啦这是公开代码大佬写好的解决方案写好处理类之后直接使用即可如下完成以上步骤谷歌不能跳转的问题就解决啦 继续往下走输入用户名和密码 Zoe/123456点击登录直接进入授权选择页面如下这个界面是不是比较熟通常我们用微信、QQ或者是其他登录时都会弹出一个授权页面选择授权内容。这个授权页面是可以控制不显示的只需要在认证服务器备案客户端时设置属性即可如下点击授权完成之后就会重定向配置的callback.html页面在callback.html代码中可以看到如果判断用户已经登录就直接转到index.html主页面否则就转到noauth.html无权限页面这里已经登录授权成功肯定最终就转到index.html页面如下点击CallAPI去调用受保护资源内部是根据上一步得到AccessToken进行保护资源的访问注意这里资源服务器一定要进跨域配置允许客户访问在API资源服务器中进行如下配置然后运行效果如下image-20210128165434044点击Logout登出这里不截图了小伙伴试试好吧今天状态不佳先到这后续项目实战再好好说说。源码地址https://github.com/zyq025/IDS4Demo/tree/main/ImlicitDemo总结Implicit模式使用思路差不多就是这样但这种模式特别要注意项目本身安全如数据传输过程被拦截或网站本身容易被攻击黑客通过钓鱼页面就容易获取隐私信息等所以项目通常都强烈推荐https降低数据传输过程被抓包的风险而对于钓鱼等这种攻击可以通过判断校验源IP等方式安全的点很多这里只是简单举例下次说说Authorization Code(授权码)模式一个被程序搞丑的帅小伙关注Code综艺圈跟我一起学~
