IdentityServer4之Implicit和纯前端好像很配哦

2023-11-06 02:18
文章标签 前端 frontend implicit 好像 identityserver4 很配

本文主要是介绍IdentityServer4之Implicit和纯前端好像很配哦，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

上一篇Resource Owner Password Credentials模式虽然有用户参与，但对于非信任的第三方的来说，使用这种模式是有风险的，所以相对用的不多；这里接着说说implicit隐式模式，这种模式比较适合于纯前端客户端，比如Vue、Angular、React项目等，相对来说整个流程比较安全，只需在认证服务器进行认证即可，无需在客户端进行相关隐私信息录入，但前提是要客户端保证安全，不然容易被别人钓鱼(安全很重要)，那IdentityServer4不背这个锅。

正文

既然有用户参与，交互肯定少不了，认证那更不能缺少，所以这里使用OIDC(OpenID Connect)的协议进行用户身份验证；别跑，不管是客户端还是认证服务器端，已经都封装好了，拿过来直接用即可；

从流程先了解一下，直接上图：

流程简要说明：

  1. 用户通过浏览器(User-Agent)访问第三方客户端(Client)；

  2. 如果客户端需要进行认证授权，则将其重定向到认证服务器(Authorization server);

  3. 用户(ResorceOwner)在认证服务器上进行认证；

  4. 认证服务器(Authorization server)验证成功之后，返回AccessToken和Id Token客户端；

  5. 后续用户再操作客户端的时候，若需访问保护资源，直接在请求中带上AccessToken即可；

  6. 最终资源服务器(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目录：存放依赖的js；

    live-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>
<head><meta charset="utf-8" /><title></title>
</head>
<body><div id="app"><button id="login" @click="login">Login</button><button id="api" @click="callApi">Call API</button><button id="logout" @click="logout">Logout</button><!-- 显示日志，包含登入、登出和请求API结果 --><pre id="results">{{results}}</pre></div><script src="./js/oidc-client.js"></script><script src="js/vue.js"></script><!-- <script src="./js/app.js"></script> --><script>var 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>
<head><meta charset="utf-8" /><title></title>
</head>
<body><script src="./js/oidc-client.js"></script><script>new Oidc.UserManager().signinRedirectCallback().then(function() {console.log("test");// 如果登录成功就回到主页面window.location = "index.html";}).catch(function(e) {console.log(e);//没有权限就跳转到无权限页面window.location="noauth.html";});</script>
</body>
</html>

noauth.html代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><div>没权限</div>
</body>
</html>

到这客户端的代码已经撸完了，直接进入JsClient目录，执行live-server即可：

如果使用http请求，执行live-server即可；

3.联合调试看效果

上一步已经将客户端启起来了，接下来把认证服务器和API资源服务器启动，看看效果：

  1. 点击Login进行登录，就会跳转到认证服务器进行验证，如下：


    到这一步，估计用其他浏览器没什么问题，会继续进行跳转；但如果用到谷歌最新的浏览器，这里就不会跳转，因为谷歌对Cookie进行整改，尽管输入正确的用户名和密码，也只是刷新一下，还是在登录页面，需要做一下处理，如下：

    新增一个处理类：SameSiteCookiesServiceCollectionExtensions.cs，代码内容就不贴啦，这是公开代码，大佬写好的解决方案；

    写好处理类之后，直接使用即可，如下：


    完成以上步骤，谷歌不能跳转的问题就解决啦； 继续往下走；

  2. 输入用户名和密码  Zoe/123456，点击登录，直接进入授权选择页面，如下：


    这个界面是不是比较熟，通常我们用微信、QQ或者是其他登录时，都会弹出一个授权页面选择授权内容。这个授权页面是可以控制不显示的，只需要在认证服务器备案客户端时设置属性即可，如下：


  3. 点击授权完成之后，就会重定向配置的callback.html页面，在callback.html代码中可以看到，如果判断用户已经登录，就直接转到index.html主页面，否则就转到noauth.html无权限页面，这里已经登录授权成功，肯定最终就转到index.html页面，如下：


  4. 点击CallAPI去调用受保护资源，内部是根据上一步得到AccessToken进行保护资源的访问；

    注意，这里资源服务器一定要进跨域配置，允许客户访问，在API资源服务器中进行如下配置：

    然后运行效果如下：

    image-20210128165434044

  5. 点击Logout登出，这里不截图了，小伙伴试试；

好吧，今天状态不佳，先到这，后续项目实战再好好说说。

源码地址：https://github.com/zyq025/IDS4Demo/tree/main/ImlicitDemo；

总结

Implicit模式使用思路差不多就是这样，但这种模式特别要注意项目本身安全，如数据传输过程被拦截，或网站本身容易被攻击，黑客通过钓鱼页面就容易获取隐私信息等，所以项目通常都强烈推荐https，降低数据传输过程被抓包的风险；而对于钓鱼等这种攻击，可以通过判断校验源IP等方式；安全的点很多，这里只是简单举例；下次说说Authorization Code(授权码)模式；

一个被程序搞丑的帅小伙，关注"Code综艺圈"，跟我一起学~

这篇关于IdentityServer4之Implicit和纯前端好像很配哦的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/353921。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
【VUE】跨域问题的概念，以及解决方法。

【VUE】跨域问题的概念，以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略，该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同，则需要服务器显式地允许这种跨域请求。一般在springbo
阅读更多...
HTML提交表单给python

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',
阅读更多...
Java 后端接口入参 - 联合前端VUE 使用AES完成入参出参加密解密

Java 后端接口入参 - 联合前端VUE 使用AES完成入参出参加密解密

加密效果： 解密后的数据就是正常数据： 后端：使用的是spring-cloud框架，在gateway模块进行操作 <dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>30.0-jre</version></dependency> 编写一个AES加密
阅读更多...
vue2 组件通信

vue2 组件通信

props + emits props:用于接收父组件传递给子组件的数据。可以定义期望从父组件接收的数据结构和类型。‘子组件不可更改该数据’emits:用于定义组件可以向父组件发出的事件。这允许父组件监听子组件的事件并作出响应。(比如数据更新) props检查属性 属性名类型描述默认值typeFunction指定 prop 应该是什么类型，如 String, Number, Boolean,
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2