JavaScript/uni-app对接海康ISC openapi

2023-10-13 19:10

本文主要是介绍JavaScript/uni-app对接海康ISC openapi,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

JavaScript/uni-app对接海康ISC openapi

        • JavaScript实现HMAC SHA256
        • 下载安装
        • 使用crypto-js
        • 使用签名生成工具
        • 参考

JavaScript实现HMAC SHA256
Run the code online with this jsfiddle. Dependent upon an open source js library calledhttp://code.google.com/p/crypto-js/.<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/hmac-sha256.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/components/enc-base64-min.js"></script><script>var hash = CryptoJS.HmacSHA256("Message", "secret");var hashInBase64 = CryptoJS.enc.Base64.stringify(hash);document.write(hashInBase64);
</script>
下载安装

JavaScript实现HMAC SHA256算法实现基于crypto-js
安装安装crypto-js

npm install crypto-js

引入crypto-js
支持ES6导入、Modular

import CryptoJS from "crypto-js";

或者

const CryptoJS = require("crypto-js");

安装完成,在uni-app项目中出现crypto-js文件目录
在这里插入图片描述

使用crypto-js

可以创建文件signature.js,生成一个签名然后暴露出去

const CryptoJS = require("crypto-js");function sign(key, value){return (CryptoJS.enc.Base64.stringify(CryptoJS.HmacSHA256(value, key)))
}const appKey = '22649972'//AK(Access Key ID):访问密钥ID。
const  appSecret = 'cHj40YDRoSdgBAuemTb2'//SK(Secret Access Key):与访问密钥ID结合使用的密钥,对请求进行加密签名
let url = '/artemis/api/resource/v1/org/advance/orgList'//接口地址
let sign_str = `POST\n*/*\napplication/json\nx-ca-key:${appKey}\n${url}`//签名拼接字符串let signature = sign(appSecret,sign_str)//生成的签名console.log(sign_str,signature)export default signature

也可以在封装http请求的时候,直接动态生成一个签名,加入到请求头中

······const appKey = '22649972';
const appSecret = 'cHj40YDRoSdgBAuemTb2';function sign(key, value){return (CryptoJS.enc.Base64.stringify(CryptoJS.HmacSHA256(value, key)))
}// 获取请求头
function getHeaders(url) {let sign_str = `POST\n*/*\napplication/json\nx-ca-key:${appKey}\n${url}`let signature = sign(appSecret,sign_str)let header = {'Accept':'*/*','Content-Type':'application/json','x-ca-key':appKey,'x-ca-signature':signature,'x-ca-signature-headers':'x-ca-key'}return header
}······
使用签名生成工具

下载海康开放平台的签名生成工具,阅读开发指南,获得签名,对比一下我们自己用js方法生成的签名,检查js方法是否正确。
在这里插入图片描述
双击签名生成工具程序直接运行
在这里插入图片描述
修改appKey,appSecret,接口地址,点生成签名按钮,得到我们需要的签名。
在这里插入图片描述

参考
  1. python对接海康ISC openapi:https://www.jianshu.com/p/ed362150ec1f
  2. 海康开放平台:海康开放平台文档-综合安防管理平台(iSecure Center)
  3. 海康开放平台相关工具:下载
  4. 各种语言HMAC SHA256实现:https://www.cnblogs.com/love-snow/articles/8241314.html

这篇关于JavaScript/uni-app对接海康ISC openapi的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/205267

相关文章

java对接海康摄像头的完整步骤记录

《java对接海康摄像头的完整步骤记录》在Java中调用海康威视摄像头通常需要使用海康威视提供的SDK,下面这篇文章主要给大家介绍了关于java对接海康摄像头的完整步骤,文中通过代码介绍的非常详细,需... 目录一、开发环境准备二、实现Java调用设备接口(一)加载动态链接库(二)结构体、接口重定义1.类型

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

使用Python和Tkinter实现html标签去除工具

《使用Python和Tkinter实现html标签去除工具》本文介绍用Python和Tkinter开发的HTML标签去除工具,支持去除HTML标签、转义实体并输出纯文本,提供图形界面操作及复制功能,需... 目录html 标签去除工具功能介绍创作过程1. 技术选型2. 核心实现逻辑3. 用户体验增强如何运行

java对接第三方接口的三种实现方式

《java对接第三方接口的三种实现方式》:本文主要介绍java对接第三方接口的三种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录HttpURLConnection调用方法CloseableHttpClient调用RestTemplate调用总结在日常工作

CSS 样式表的四种应用方式及css注释的应用小结

《CSS样式表的四种应用方式及css注释的应用小结》:本文主要介绍了CSS样式表的四种应用方式及css注释的应用小结,本文通过实例代码给大家介绍的非常详细,详细内容请阅读本文,希望能对你有所帮助... 一、外部 css(推荐方式)定义:将 CSS 代码保存为独立的 .css 文件,通过 <link> 标签

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts?1. 基于 ECharts,功能强大2. 更符合 Vue

Vue中插槽slot的使用示例详解

《Vue中插槽slot的使用示例详解》:本文主要介绍Vue中插槽slot的使用示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、插槽是什么二、插槽分类2.1 匿名插槽2.2 具名插槽2.3 作用域插槽三、插槽的基本使用3.1 匿名插槽

springboot+vue项目怎么解决跨域问题详解

《springboot+vue项目怎么解决跨域问题详解》:本文主要介绍springboot+vue项目怎么解决跨域问题的相关资料,包括前端代理、后端全局配置CORS、注解配置和Nginx反向代理,... 目录1. 前端代理(开发环境推荐)2. 后端全局配置 CORS(生产环境推荐)3. 后端注解配置(按接口

Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践举例

《Vue2项目中配置TailwindCSS和FontAwesome的最佳实践举例》:本文主要介绍Vue2项目中配置TailwindCSS和FontAwesome的最... 目录vue 2 项目中配置 Tailwind css 和 Font Awesome 的最佳实践一、Tailwind CSS 配置1. 安

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2