搜索到
61
篇与
的结果
-
后端新手初学接口验签和摘要 接口验签（Signature Verification）什么是接口验签？接口验签是一种验证请求或响应是否被篡改的机制。通过生成和验证签名，确保数据在传输过程中没有被篡改，并且请求确实来自合法的客户端。验签的原理客户端生成签名：客户端使用约定的算法（如 HMAC-SHA256 或 MD5）和密钥，对请求参数进行签名。签名通常基于请求的参数、时间戳、随机字符串等数据。签名结果会附加到请求中（如 sign 字段）。服务端验证签名：服务端收到请求后，使用相同的算法和密钥，对请求参数重新计算签名。将计算出的签名与客户端传递的签名进行比对。如果一致，说明请求未被篡改；如果不一致，则拒绝请求。验签的步骤客户端：将请求参数按一定规则排序（如按字母顺序）。将排序后的参数拼接成字符串。使用密钥和算法生成签名。将签名附加到请求中。服务端：提取请求中的签名。按相同规则对请求参数排序并拼接。使用密钥和算法重新计算签名。比对签名，验证请求的合法性。示例假设客户端发送以下请求：{ "param1": "value1", "param2": "value2", "timestamp": "1698765432", "nonce": "123456" }客户端使用 HMAC-SHA256 和密钥 secret 对参数进行签名：import hmac import hashlib params = "param1=value1¶m2=value2×tamp=1698765432&nonce=123456" key = "secret" signature = hmac.new(key.encode(), params.encode(), hashlib.sha256).hexdigest()生成的签名会附加到请求中：{ "param1": "value1", "param2": "value2", "timestamp": "1698765432", "nonce": "123456", "sign": "生成的签名" }服务端收到请求后，按相同规则重新计算签名并验证。接口摘要（Digest）什么是接口摘要？接口摘要是对请求或响应内容的哈希值，用于验证数据的完整性。它确保数据在传输过程中没有被篡改。摘要的原理生成摘要：对请求或响应的内容（如 JSON 或 XML）进行哈希计算（如 SHA-256）。将哈希值附加到请求或响应中（如 digest 字段）。验证摘要：接收方对收到的内容重新计算哈希值。将计算出的哈希值与传递的摘要进行比对。如果一致，说明数据未被篡改；如果不一致，则拒绝数据。摘要的步骤发送方：对请求或响应的内容进行哈希计算。将哈希值附加到请求或响应中。接收方：提取请求或响应中的摘要。对内容重新计算哈希值。比对哈希值，验证数据的完整性。示例假设客户端发送以下请求：{ "param1": "value1", "param2": "value2" }客户端使用 SHA-256 对请求内容进行哈希计算：import hashlib content = '{"param1":"value1","param2":"value2"}' digest = hashlib.sha256(content.encode()).hexdigest()生成的摘要会附加到请求中：{ "param1": "value1", "param2": "value2", "digest": "生成的摘要" }服务端收到请求后，按相同规则重新计算摘要并验证。接口验签 vs 接口摘要特性接口验签接口摘要目的验证请求的完整性和真实性验证数据的完整性依赖需要密钥（对称或非对称）不需要密钥生成方式基于参数和密钥生成签名基于内容生成哈希值验证方式比对签名比对哈希值适用场景确保请求来自合法客户端确保数据未被篡改实际应用场景接口验签：用于身份验证和防篡改，如支付接口、API 调用。接口摘要：用于确保数据传输的完整性，如文件上传、数据同步。注意事项密钥管理：验签的密钥需要严格管理，避免泄露。时间戳和随机数：在验签中加入时间戳和随机数，防止重放攻击。哈希算法：选择安全的哈希算法（如 SHA-256），避免使用弱算法（如 MD5）。附：现在比较流行的商用国密算法说明SM2（加签验签的算法）可以理解为国产RSA。非对称加密，基于ECC。该算法已公开。由于该算法基于ECC，故其签名速度与秘钥生成速度都快于RSA。SM2椭圆曲线公钥密码算法是我国自主设计的公钥密码算法，包括SM2-1椭圆曲线数字签名算法，SM2-2椭圆曲线密钥交换协议，SM2-3椭圆曲线公钥加密算法，分别用于实现数字签名密钥协商和数据加密等功能。SM2算法与RSA算法不同的是，SM2算法是基于椭圆曲线上点群离散对数难题，相对于RSA算法，256位的SM2密码强度已经比2048位的RSA密码强度要高，但运算速度快于RSA。SM3（degist摘要生成算法）可以理解为国产MD5。消息摘要。可以用MD5作为对比理解。该算法已公开。校验结果为256位。SM4（敏感数据加解密）可以理解为国产AES。无线局域网标准的分组数据算法。对称加密，密钥长度和分组长度均为128位。SM9一种标识密码(IBE)算法，由国家密码管理局于2016年3月28日发布，相关标准为“GM/T 0044-2016 SM9标识密码算法”。主要用于用户的身份认证。SM9的加密强度等同于3072位密钥的RSA加密算法。 -
小程序给图片添加水印（时间，经纬度信息） 在移动互联网时代，小程序因其轻量、便捷的特性，逐渐成为用户日常生活中不可或缺的工具。无论是社交、购物，还是记录生活，小程序都提供了丰富的功能。然而，随着用户对数据安全和信息追溯需求的增加，如何在图片中添加关键信息（如时间、经纬度等）成为开发者需要解决的问题之一。尤其是在一些特定场景下，如户外打卡、旅行记录、证据留存等，为图片添加时间戳和地理位置信息不仅能增强数据的可信度，还能为用户提供更丰富的上下文信息。本文将详细介绍如何在小程序中实现为图片添加时间、经纬度信息的水印功能。我们将从获取用户地理位置、格式化时间信息，到将水印动态添加到图片中，一步步讲解实现过程。无论你是小程序开发新手，还是有一定经验的开发者，都能通过本文掌握这一实用技能，为你的小程序增添更多实用价值。让我们一起探索如何通过技术手段，让每一张图片都“有迹可循”。实现思路如下：1、使用小程序的canvas来绘制图片，画布的大小根据图片的实际宽高设置2、在画布中左下角位置一个黑色半透明的矩形3、在矩形上绘制文本，文本内容为时间和经纬度4、使用 wx.canvasToTempFilePath 方法将canvas内容导出成图片缓存到小程序本地存储5、使用 wx.compressImage 压缩图片，这一步很重要，因为通过canvas直接导出的图片非常大，所以要根据情况压缩图片import moment from '../../utils/moment'; export const addWatermark = (pageIns, imgpath, position) => { const time = moment().format('YYYY-MM-DD HH:mm:ss'); return new Promise((resolve, reject) => { const dataSrc = imgpath; const query = pageIns.createSelectorQuery(); console.log('query canvas result', query); query.select('#watermark-canvas') .fields({ node: true, size: true }) .exec(async (res) => { console.log('query canvas result', res); const canvas = res[0].node; const ctx = canvas.getContext('2d'); // 加载图片 const img = canvas.createImage(); img.src = dataSrc; // 替换为你的图片地址 img.onload = () => { // 获取原图的宽高 const imgWidth = img.width; const imgHeight = img.height; console.log('待压缩图片宽高', imgWidth, imgHeight); // 设置 Canvas 的实际宽高为原图的宽高 const dpr = wx.getSystemInfoSync().pixelRatio; canvas.width = imgWidth * dpr; canvas.height = imgHeight * dpr; ctx.scale(dpr, dpr); // 绘制图片 ctx.drawImage(img, 0, 0, imgWidth, imgHeight); // 绘制黑色半透明矩形块 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; // ctx.fillRect(0, imgHeight - 60, imgWidth, 60); // 矩形块位于图片底部 ctx.fillRect(0, imgHeight - 60, 210, 60); // 绘制水印文本 ctx.font = '16px sans-serif'; ctx.fillStyle = '#ffffff'; ctx.fillText(time, 20, imgHeight - 35); // 文本位于矩形块内 ctx.fillText(position.latitude + '--' + position.longitude, 20, imgHeight - 14); // 文本位于矩形块内 // 生成临时文件路径 wx.canvasToTempFilePath({ canvas, fileType: 'jpg', destWidth: imgWidth, destHeight: imgHeight, quality: 0.5, success: (res) => { const tempFilePath = res.tempFilePath; wx.compressImage({ src: tempFilePath, // 图片路径 quality:60, // 压缩质量 success({tempFilePath: tempPathAfterCompress}) { console.log("压缩成功", tempPathAfterCompress) wx.getFileInfo({ filePath: tempPathAfterCompress, success(resInfo) { console.log('添加水印后文件大小（KB）:', (resInfo.size / 1024).toFixed(2)); // 输出文件大小（KB），保留两位小数 console.log('添加水印后文件大小（MB）:', (resInfo.size / (1024 * 1024)).toFixed(2)); // 输出文件大小（MB），保留两位小数 }, fail(err) { console.error('图片添加水印->获取文件信息失败', err); } }); resolve(tempPathAfterCompress); } }) }, fail: (error) => { console.info('给图片加水印，导出canvas处理后的图片错误', error) } }); }; }); }); } export const batchAddWatermark = (pageIns, paths, position) => { console.log('batchAddWatermark', paths); const promises = paths?.map(p => { return addWatermark(pageIns, p, position); }); console.log('promises of add watermark', promises); return Promise.all(promises) }
-
关于vscode remote-ssh远程开发的常见问题 1、VSCode远程连接报错报错信息：Remote host key has changed, port forwarding is disabled could not establish connection to “”:Remote host key has changed, port forwarding is disabled错误原因是原来用VSCode远程过服务器，后来服务器重装了，再用原来的ssh去连接服务器需要重新添加连接信息解决的方法:客户端是windows：是在C:\Users\用户名.ssh上找到known_hosts文件，是隐藏文件，需要先到文件管理器的设置里显示隐藏文件，然后，将里面原来关于该服务器的内容删掉，再重新添加和连接。客户端是Mac：/Users/用户名/.ssh下找到known_hosts文件，将里面原来关于该服务器的内容删掉，再重新添加和连接。2、免密登录初始状态下，每次连接remote都需要手动输入服务器密码来连接，有点麻烦，可以通过配置安全秘钥的方式，让服务器和本地vscode之间自动通过秘钥认证，操作很简单，就是将本地的ssh公钥（一般在~/.ssh目录下的id_rsa.pub文件）复制到服务器的 ~/.ssh/authorized_keys 文件中PS:如果本地还没有ssh文件，通过 ssh-keygen 生成就好
-
three.js中的重要基础概念 Three.js 是一个功能强大的 JavaScript 库，用于创建和展示基于 WebGL 的三维图形。在学习使用Three.js来构建3D世界之前，有一些基本概念是需要牢记的，否则，在你绘制3D世界时，思绪会是杂乱无章的：场景（Scene）定义：场景是所有三维对象的容器，用于存储和管理几何体、光源、相机等元素。作用：场景是渲染的基础，所有需要显示的对象都必须添加到场景中。创建：const scene = new THREE.Scene();相机（Camera）定义：相机定义了从哪个视角观察三维场景。常见类型：透视相机（PerspectiveCamera）：模拟人眼透视效果，远处物体看起来更小。const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);正交相机（OrthographicCamera）：不考虑透视效果，所有物体大小一致。const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 1000);渲染器（Renderer）定义：渲染器负责将场景和相机中的内容绘制到屏幕上。常用渲染器：THREE.WebGLRenderer 是最常用的渲染器。创建：const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);几何体（Geometry）定义：几何体定义了物体的形状。常见几何体：BoxGeometry：立方体。SphereGeometry：球体。PlaneGeometry：平面。BufferGeometry：更高效的自定义几何体。创建：const geometry = new THREE.BoxGeometry(1, 1, 1);材质（Material）定义：材质定义了物体的外观属性，如颜色、纹理、反射等。常见材质：MeshBasicMaterial：基础材质，不考虑光照。MeshLambertMaterial：漫反射材质，适合哑光表面。MeshPhongMaterial：高光材质，适合光滑表面。MeshStandardMaterial：基于物理的材质，适合现代渲染效果。创建：const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });网格（Mesh）定义：网格是几何体和材质的组合，用于创建具体的三维物体。创建：const mesh = new THREE.Mesh(geometry, material); scene.add(mesh);光源（Light）定义：光源用于照亮场景中的物体。现实中的一切物体之所以能被看到，都是因为有了光，在three.js 的世界里，亦是如此，需要看到哪个地方，就需要有光线照亮那个地方常见光源：AmbientLight：环境光，均匀照亮整个场景。DirectionalLight：方向光，模拟太阳光。PointLight：点光源，从一点向四周发射光线。SpotLight：聚光灯，模拟手电筒或舞台灯光。创建：const light = new THREE.DirectionalLight(0xffffff, 1); scene.add(light);控制器（Controls）定义：控制器用于控制相机的移动和旋转，实现用户交互。常见控制器：OrbitControls：允许用户通过鼠标或触摸屏旋转、平移和缩放视图。TrackballControls：类似于轨道球的交互方式。使用：const controls = new THREE.OrbitControls(camera, renderer.domElement);加载器（Loader）定义：加载器用于加载外部资源，如模型、纹理、字体等。这个库很重要，没有这个库，所有的东西都需要我们用代码来绘制，这是相当庞大的工作量，而有了这个库，我们就可以加载设计师和建模师做好了的模型，纹理图等内容到场景中，常见加载器：GLTFLoader：加载 GLTF 格式的 3D 模型。TextureLoader：加载图像作为纹理。FontLoader：加载字体文件。使用：const loader = new THREE.TextureLoader(); const texture = loader.load('texture.jpg');动画（Animation）定义：动画用于实现动态效果，如旋转、移动、缩放等。实现方式：使用 requestAnimationFrame 实现循环更新。使用 THREE.AnimationMixer 播放模型动画。示例：function animate() { requestAnimationFrame(animate); mesh.rotation.y += 0.01; renderer.render(scene, camera); } animate();坐标系（Coordinate System）定义：Three.js 使用右手坐标系，X 轴指向右方，Y 轴指向上方，Z 轴指向屏幕外。注意：默认情况下，原点位于场景中心。缓冲区几何体（BufferGeometry）定义：BufferGeometry 是一种高效的数据结构，用于定义复杂的几何体。优点：性能更高，适合大规模数据处理。使用：const geometry = new THREE.BufferGeometry(); const vertices = new Float32Array([ 0, 0, 0, 1, 0, 0, 0, 1, 0 ]); geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));辅助工具（Helpers）定义：辅助工具用于可视化调试，如网格、轴、光源范围等。常见工具：GridHelper：显示网格。AxesHelper：显示坐标轴。DirectionalLightHelper：显示方向光的方向。雾效（Fog）定义：雾效用于模拟远近物体的模糊效果。使用：scene.fog = new THREE.Fog(0xffffff, 1, 10);
-
-
-
-
-
安装npm依赖时报node版本不支持问题解决办法 安装npm依赖时报如下错误[2024-02-26 18:00:32]error webpack-dev-middleware@7.0.0: The engine "node" is incompatible with this module. Expected version ">= 18.12.0". Got "16.15.1" [2024-02-26 18:00:32]error Found incompatible module. [2024-02-26 18:00:32]info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command. [2024-02-26 18:00:32]The command "yarn" exited with 1.手动删除 node_modules 目录并且清空了npm缓存 npm cache clean --force 重新安装还是不行执行以下命令，禁止npm扫描所有包的 engine -> node 选项yarn config set ignore-engines true
-
nginx配置返回文本或json的方法 有些时候请求某些接口的时候需要返回指定的文本字符串或者json字符串，如果逻辑非常简单或者干脆是固定的字符串，那么可以使用nginx快速实现，这样就不用编写程序响应请求了，可以减少服务器资源占用并且响应性能非常快先看返回固定的文本和json，都是在server中配置location拦截即可，配置示例如下：固定文本：location ~ ^/get_text { default_type text/html; return 200 'This is text!'; }固定json:location ~ ^/get_json { default_type application/json; return 200 '{"status":"success","result":"nginx json"}'; }保存后重新载入配置即可生效，注意：default_type必须要添加，否则浏览器会当成不识别的文件进行下载另外也可以简单的根据请求的URL返回不同的字符串，示例如下：location ~ ^/get_text/article/(.*)_(\d+).html$ { default_type text/html; set $s $1; set $d $2; return 200 str:$s$d; }这样可以简单截取url中的字符串，当然也可以用(.*)匹配所有的，实际中根据不同需求定义即可上面的就是一些简单的案例，在服务器环境中对于简单的处理，充分使用nginx可以省去一些编程工作另外补充一下中文显示的问题，因为Linux下采用的是utf-8的字符编码，默认情况下我们的浏览器在服务器没有指定编码或者静态页面没有声明编码的情况下会以GBK的编码去渲染页面，这样默认情况下返回中文的话浏览器用gbk来解析utf-8编码，显然会出现乱码，这时要在nginx location块中主动添加header来输出正确编码，添加内容为： add_header Content-Type 'text/html; charset=utf-8'; 这样浏览器就知道我们使用的是哪种编码了，或者把add_header这行换成 charset utf-8; 也是可以的原文链接：https://www.cnblogs.com/freeweb/p/5944894.html声明：本文内容来源于网络，版权归原作者所有
