接入H5
下载 SDK
登录 TMF 控制台，新建应用，按照《移动开发框架 用户手册》接入 Android 或者 iOS 某一端 App， 并单击【下载应用配置】下载配置文件。
左侧选择【移动网关】，进入网关配置页面，单击右下角下载 H5 SDK。
注意：从控制台下载 SDK 时，已经内置了当前应用的信息（如产品 ID，服务器公钥)。因此，从 A 应用下载的 SDK，只能用于请求A应用下面的接口。 sdk 为了方便环境切换，sdk目前也支持初始化时传入 productId、keyId 、pubKey (对应的值还是需要到对应的控制台sdk下载获得)
// 查看sdk版本
const version = TMFRequest.VERSION
console.log(version)
// 初始化实例
const env = {
url: "http://xxxxxx.com/v2", // 可选
returnOriginResponse: false, // 可选。如果为 true, 则返回完整的response 信息， 包含 data，status，statusText，headers等， 默认为 fasle
productId: '8999',
keyId: 'app-xxxxx',
pubKey: 'xxxxxxxxxxxxx',
}
var client = new TMFRequest(env);
引入
请求库的引入方式有两种，一种是以模块化的方式导入，另一种是创建script标签全局引入。
- 以模块方式引入
把从控制台获取的SDK，放到项目中，然后通过importt的方式引入。（以下以vue项目为例）
<template>
<div>
you html code
</div>
</template>
<script>
import TMFRequest from "./dist/tmf-request.js"; // 引用地址为模块在项目中相对当前文件的相对路径
const client = new TMFRequest(); // 该模块导出的是一个类，所以需要先实例化再使用
export default {
data() {
return {};
},
methods: {
onSubmit() {
// post demo
client.request({
method: 'POST',
url: 'http://www.test.com/v2',
headers: {
'tmf_apiname': 'TMFEcho'
// 用户可以在此处自定义请求头，同时需要在httpMaZu的配置中心配置自定义头名
},
timeout: 10 * 1000, // 对于请求体较大的请求应该将超时时间设置长一些， 默认5000ms
data: { // SDK会自定把body的内容加密
name: 'tmf'
}
})
.then(res => { // 请求成功，获得SM4解密后的数据
console.log('res', res)
})
.catch(err => {
console.log(err)
});
// get demo
const get = {
url: 'http://xxxxx.com/v2',
method: "get",
headers: {
"tmf_apiname": "test"
}
}
client.request(get).then(data=>{
console.log(data,'-----');
})
}
}
};
</script>
- 以全局引入
该方式需要把SDK传到CDN，然后通过script标签引入。需要注意的是，必须要在使用SDK之前引入。
全局导入的情况下，SDK 会在全局添加一个名为TMFRequest的变量，也就是TMFRequest类，通过它可以创建一个实例用于发起请求。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>国密SDK测试DEMO</title>
</head>
<body>
<div id="app"></div>
<script src="//www.cdn.com/sdk.js"></script>
<script>
var client = new TMFRequest();
client.request({
method: 'post',
url: 'http://182.254.180.81:10180/v2',
headers: {
tmf_apiname: 'TMFEcho'
},
data: {
a: 1
}
}).then(res => {
console.log(res.data)
})
</script>
</body>
</html>
其他说明
使用方式参考上面 Demo 以下有几点说明：
TMFRequest的实例提供了一个request方法，可以通过method配置请求的方法。- 目前只支持
POST和GET方法。 - 该SDk同时自持H5和小程序环境运行，使用方式一致
- 如果请求时
data字段为空，则会导致请求失败。因为SDK本来的用意就是用来加密data，所以请确保data有值。 - 如果没有数据加密需求，请不要使用
SDK进行请求。使用SDK会先通过sm2加解密跟网关交换对称密钥，然后对请求数据进行加密。这要求请求的接口所在的网关必须支持相应的功能。因此，如果没有加密需求，请使用其他常规请求库如axios。 - 如果请求的接口跨域，请在服务器做相应支持如
CORS。否则将会导致请求失败。 SDK只会对请求体进行加密，而不会对 querystring 进行处理。- 对于一些特定的引入方式，如vite es6 可以参考封装一个 http.ts
import './tmf-request.js'; export default window.TMFRequest;