集成开发手册

集成组态画面

如果用户需要将组态画面集成到自己的业务平台，可以通过签名的方式进行安全验证。下面介绍一下具体用法。

获取认证密钥

打开【可视化】【组态开发】界面，点击右侧的“打开编辑器”按钮，进入”组态开发编辑器“界面。

在”组态开发编辑器“界面，点击右上角的“查看认证密钥”按钮，获取认证密钥：

查看画面访问地址

在组态编辑器中打开图纸，点击右上角的“发布”按钮；
在弹出的页面发布窗口中，点击“复制”按钮，获取到画面的访问地址；

生成安全访问地址

不启用免登录访问的情况下，可以基于认证密钥生成安全访问地址，也可以达到免登录访问的目的。

画面访问地址格式：http://服务器IP/topv/public/viewer/cdp22ihmn3drqk08****。

画面ID：画面访问地址中最后一个 “/” 后面的字符内容。

以下安全访问地址的步骤如下：

将画面ID、当前时间（毫秒）连起来、第三方平台的当前用户名、第三方平台自定义的权限信息，用 |（竖线）分隔开。
使用认证密钥，通过HMAC-SHA256 base64对上一步得到的字符串进行加密。说明为保证应用的安全性，计算出来的签名（signature）有效期为32个小时。32小时之后，需要重新计算新的签名（signature）。
将“第三方平台的当前用户名”命名为username，将“第三方平台自定义的权限信息”命名为op，将时间和加密得到的签名分别命名为time和signature，并放入到画面访问地址的querystring中。
测试。使用含有签名信息的URL访问应用。

NOTE

username 和 op 可以在组态编辑器任何可以写脚本的地方获取：

javascript

var op = window.iotopo.utils.getQueryString('op')

示例

PHP示例代码：

php

<?php
$token = "54cc8224a92ddda750600157e17b****";
$pageID = 'efb7b37a2060402192f98c2a44f3****';
$time = time()*1000;
$username = "any";// 第三方平台的当前用户名
$op = "readonly"; // 第三方平台自定义的权限信息
$stringToSign = $pageID.'|'.$time.'|'.$username.'|'.$op;
$signature = urlencode(base64_encode(hash_hmac('sha256', $stringToSign, $token, true)));
$url = "http://${画面访问地址}"."?time=".$time."&username=".$username."&op=".$op."&signature=".$signature;
?>
<iframe width=100% height=100% src="<?=$url?>"/>

Node.js示例代码：

javascript

const crypto = require('crypto');
var pageID = 'efb7b37a2060402192f98c2a44f3****'
var token = "54cc8224a92ddda750600157e17b****";
var username = "any";// 第三方平台的当前用户名
var op = "readonly"; // 第三方平台自定义的权限信息
var time = Date.now();
var stringToSign = `${pageID}|${time}|${username}|${op}`;
var signature = crypto.createHmac('sha256', token).update(stringToSign).digest().toString('base64');
var url=`http://${画面访问地址}?time=${time}&username=${username}&op=${op}&signature=${encodeURIComponent(signature)}`;

Java示例代码：

javascript

package com.company;
import java.security.*;
import java.util.Date;
import javax.crypto.*;
import javax.crypto.spec.SecretKeySpec;
import org.apache.commons.codec.binary.Base64;
import java.net.URLEncoder;

/**
 * Created by studio on 2019/4/3.
 */
public class TokenTest {
    public static String getSignedUrl(String token){
        Date date = new Date();
        Long time = date.getTime();
        String pageID = "efb7b37a2060402192f98c2a44f3****";
        String username = "any";// 第三方平台的当前用户名
        String op = "readonly"; // 第三方平台自定义的权限信息
        String stringToSign = pageID + "|" + String.valueOf(time) + "|" + username + "|" op;
        String signature = HMACSHA256(stringToSign.getBytes(), token.getBytes());
        String url = "http://${画面访问地址}"+"?time="+time+"&username="+username+"&op="+op+"&signature="+ signature;
        return url;
    }

    /**
     * 利用Java原生的摘要实现SHA256加密
     * @param str 加密后的报文
     * @return
     */
    public static String HMACSHA256(byte[] data, byte[] key)
    {
        try  {
            SecretKeySpec signingKey = new SecretKeySpec(key, "HmacSHA256");
            Mac mac = Mac.getInstance("HmacSHA256");
            mac.init(signingKey);
            return URLEncoder.encode(byte2Base64(mac.doFinal(data)));
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        } catch (InvalidKeyException e) {
            e.printStackTrace();
        }
        return null;
    }

    private static String byte2Base64(byte[] bytes){
        return Base64.encodeBase64String(bytes);
    }

    public static void main(String[] args) throws Exception {
        String token = "54cc8224a92ddda750600157e17b****";
        System.out.println(getSignedUrl(token));
    }
}

集成组态开发编辑器

如果用户需要将组态编辑器集成到自己的业务平台，可以通过签名的方式进行安全验证。

下面介绍一下具体用法。

打开【可视化】【组态开发】界面，点击右侧的“打开编辑器”按钮。

获取认证密钥

在”组态开发编辑器“界面，点击右上角的“查看认证密钥”按钮，获取认证密钥：

生成访问地址

组态编辑器路径地址：/topv/public/editor/{项目标识}

DANGER

单项目模式下，项目标识为固定的值：iotopo。多项目模式下，项目标识可以在总览页面查看。

以下是生成集成组态编辑器访问地址的代码示例。

将当前时间（毫秒）转化为字符串。
使用认证密钥，通过HMAC-SHA256 base64对上一步得到的字符串进行加密。说明为保证应用的安全性，计算出来的签名（signature）有效期为32个小时。32小时之后，需要重新计算新的签名（signature）。
将时间和加密得到的签名分别命名为time和signature，并放入到URL的querystring中。
测试。使用含有签名信息的URL访问应用。

代码示例

PHP示例代码：

php

<?php
$host = 'localhost';
$projID = 'iotopo';
$token = "54cc8224a92ddda750600157e17b****"; // 认证密钥
$time = time()*1000;
$stringToSign = strval($time);
$signature = urlencode(base64_encode(hash_hmac('sha256', $stringToSign, $token, true)));
$url = "http://".$host."/topv/public/editor/".$projID."?time=".$time."&signature=".$signature;
?>
<iframe width=100% height=100% src="<?=$url?>"/>

Node.js示例代码：

javascript

const crypto = require('crypto');
const host = 'localhost';
const projID = 'iotopo';
var token = "54cc8224a92ddda750600157e17b****";
var time = Date.now();
var stringToSign = time.toString();
var signature = encodeURIComponent(crypto.createHmac('sha256', token).update(stringToSign).digest().toString('base64'));
var url=`http://${host}/topv/public/editor/${projID}?time=${time}&signature=${signature}`;

Java示例代码：

javascript

package com.company;
import java.security.*;
import java.util.Date;
import javax.crypto.*;
import javax.crypto.spec.SecretKeySpec;
import org.apache.commons.codec.binary.Base64;
import java.net.URLEncoder;


public class SampleApp {
    public static String getSignedUrl(String token){
        String host = "localhost";
        String projID = "iotopo";
        Date date = new Date();
        Long time = date.getTime();
        String stringToSign = String.valueOf(time);
        String signature = HMACSHA256(stringToSign.getBytes(), token.getBytes());
        String url = "http://"+host+"/topv/public/editor/"+projID+"?time="+time+"&signature="+ signature;
        return url;
    }

    /**
     * 利用Java原生的摘要实现SHA256加密
     * @param str 加密后的报文
     * @return
     */
    public static String HMACSHA256(byte[] data, byte[] key)
    {
        try  {
            SecretKeySpec signingKey = new SecretKeySpec(key, "HmacSHA256");
            Mac mac = Mac.getInstance("HmacSHA256");
            mac.init(signingKey);
            return URLEncoder.encode(byte2Base64(mac.doFinal(data)));
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        } catch (InvalidKeyException e) {
            e.printStackTrace();
        }
        return null;
    }

    private static String byte2Base64(byte[] bytes){
        return Base64.encodeBase64String(bytes);
    }

    public static void main(String[] args) throws Exception {
        String token = "54cc8224a92ddda750600157e17b****";
        System.out.println(getSignedUrl(token));
    }
}

用在线工具进行测试

我们可以使用在线工具生成签名进行测试。认证密钥：8061337fe3e34be1bf0ee1a4e15d3a63 时间戳：1684120252508 项目标识：iotopo

打开 hmac 在线生成工具，按下图输入时间戳和认证密钥，点击“计算”按钮生成 Base64 签名：uJqrdfD1H/TWOhO8dg9wdaZuZ5DFBJJR/3EiZ6vVsi4= 用 encodeURI 在线工具对生成的 Base64 签名进行转义处理：uJqrdfD1H%2FTWOhO8dg9wdaZuZ5DFBJJR%2F3EiZ6vVsi4%3D 基于以上信息，生成访问地址如下：/topv/public/editor/iotopo?time=1684120252508&signature=uJqrdfD1H/TWOhO8dg9wdaZuZ5DFBJJR/3EiZ6vVsi4=

指定打开默认的图纸

如果用户希望集成编辑器时，自动打开指定的图纸，可以在生成的访问地址后追加一个图纸路径的参数，参数名称为 open，参数值为图纸的路径。追加的参数不需要参与签名。例如，图纸的 ID 为 cekkbdhmn3dm652l8tjg，则图纸路径为：displays/cekkbdhmn3dm652l8tjg.json。

DANGER

注意：图纸路径中带有特殊字符，需要用 encodeURIComponent 进行转义处理。上面示例中的图纸路径转义后的内容为displays%2Fcekkbdhmn3dm652l8tjg.json

可以直接在编辑器中查看图纸路径，如下图所示：以下是一个带有 open 参数的编辑器访问地址示例，其中项目标识为 iotopo： /topv/public/editor/iotopo?time=1672195754054&signature=AlEbONQ8ugF0tK%2FERjLJStXJZk7z0MRq2viEYypwMs0%3D=&open=displays%2Fcekkbdhmn3dm652l8tjg.json

集成门户开发编辑器

如果用户需要将门户开发编辑器集成到自己的业务平台，可以通过签名的方式生成安全访问地址。

下面介绍一下具体用法。

打开【可视化】【门户开发】界面，如下图所示：

认证密钥

点击右上角的“查看认证密钥”按钮，获取认证密钥：

生成安全访问地址

门户开发编辑器路径地址格式：/topv/public/compose/{项目标识}

CAUTION

单项目模式下，项目标识为固定的值：iotopo。多项目模式下，项目标识可以在总览页面查看。

步骤如下：

将当前时间（毫秒）转化为字符串。
使用认证密钥，通过HMAC-SHA256 base64对上一步得到的字符串进行加密。
将时间和加密得到的签名分别命名为 time 和 signature，并放入到 URL 的querystring中。
测试。使用含有Token加签的URL访问应用。

IMPORTANT

为保证应用的安全性，计算出来的签名（signature）有效期为32个小时。32小时之后，需要重新计算新的签名（signature）。

代码示例

PHP示例代码：

php

<?php
$host = 'localhost';
$projID = 'iotopo';
$token = "54cc8224a92ddda750600157e17b****"; // 认证密钥
$time = time()*1000;
$stringToSign = strval($time);
$signature = urlencode(base64_encode(hash_hmac('sha256', $stringToSign, $token, true)));
$url = "http://".$host."/topv/public/compose/".$projID."?time=".$time."&signature=".$signature;
?>
<iframe width=100% height=100% src="<?=$url?>"/>

Node.js示例代码：

javascript

const crypto = require('crypto');
const host = 'localhost';
const projID = 'iotopo';
var token = "54cc8224a92ddda750600157e17b****";
var time = Date.now();
var stringToSign = time.toString();
var signature = encodeURIComponent(crypto.createHmac('sha256', token).update(stringToSign).digest().toString('base64'));
var url=`http://${host}/topv/public/compose/${projID}?time=${time}&signature=${signature}`;

Java示例代码：

javascript

package com.company;
import java.security.*;
import java.util.Date;
import javax.crypto.*;
import javax.crypto.spec.SecretKeySpec;
import org.apache.commons.codec.binary.Base64;
import java.net.URLEncoder;


public class SampleApp {
    public static String getSignedUrl(String token){
        String host = "localhost";
        String projID = "iotopo";
        Date date = new Date();
        Long time = date.getTime();
        String stringToSign = String.valueOf(time);
        String signature = HMACSHA256(stringToSign.getBytes(), token.getBytes());
        String url = "http://"+host+"/topv/public/compose/"+projID+"?time="+time+"&signature="+ signature;
        return url;
    }

    /**
     * 利用Java原生的摘要实现SHA256加密
     * @param str 加密后的报文
     * @return
     */
    public static String HMACSHA256(byte[] data, byte[] key)
    {
        try  {
            SecretKeySpec signingKey = new SecretKeySpec(key, "HmacSHA256");
            Mac mac = Mac.getInstance("HmacSHA256");
            mac.init(signingKey);
            return URLEncoder.encode(byte2Base64(mac.doFinal(data)));
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        } catch (InvalidKeyException e) {
            e.printStackTrace();
        }
        return null;
    }

    private static String byte2Base64(byte[] bytes){
        return Base64.encodeBase64String(bytes);
    }

    public static void main(String[] args) throws Exception {
        String token = "54cc8224a92ddda750600157e17b****";
        System.out.println(getSignedUrl(token));
    }
}

用在线工具进行测试

我们可以使用在线工具生成签名进行测试。认证密钥：8061337fe3e34be1bf0ee1a4e15d3a63 时间戳：1684120252508 项目标识：iotopo

打开 hmac 在线生成工具，按下图输入时间戳和认证密钥，点击“计算”按钮生成 Base64 签名：uJqrdfD1H/TWOhO8dg9wdaZuZ5DFBJJR/3EiZ6vVsi4= 用 encodeURI 在线工具对生成的 Base64 签名进行转义处理：uJqrdfD1H%2FTWOhO8dg9wdaZuZ5DFBJJR%2F3EiZ6vVsi4%3D 基于以上信息，生成访问地址如下：/topv/public/compose/iotopo?time=1684120252508&signature=uJqrdfD1H/TWOhO8dg9wdaZuZ5DFBJJR/3EiZ6vVsi4=

集成数据门户

用户可以配置数据门户，并集成到第三方平台。

门户开发

打开【可视化】【门户开发】界面，如下图所示：

发布应用

步骤1：点击发布按钮，打开应用发布对话框

步骤2：设置安全选项，并点击保存按钮。

认证密钥

点击右上角的“查看认证密钥”按钮，获取认证密钥：

生成安全访问地址

不启用免登录访问的情况下，可以基于认证密钥生成安全访问地址，也可以达到免登录访问的目的。

步骤如下：

将当前时间（毫秒）转化为字符串。
使用认证密钥，通过HMAC-SHA256 base64对上一步得到的字符串进行加密。
将时间和加密得到的签名分别命名为 time 和 signature，并放入到 URL 的querystring中。
测试。使用含有Token加签的URL访问应用。

CAUTION

为保证应用的安全性，计算出来的签名（signature）有效期为32个小时。32小时之后，需要重新计算新的签名（signature）。

代码示例

PHP示例代码：

php

<?php
$token = "lfc8si7z";
$time = time()*1000;
$stringToSign = strval($time);
$signature = urlencode(base64_encode(hash_hmac('sha256', $stringToSign, $token, true)));
$url = "http://${应用访问地址}"."?time=".$time."&signature=".$signature;
?>
<iframe width=100% height=100% src="<?=$url?>"/>

Node.js示例代码：

javascript

const crypto = require('crypto');
var token = "lfc8si7z";
var time = Date.now();
var stringToSign = time.toString();
var signature = crypto.createHmac('sha256', token).update(stringToSign).digest().toString('base64');
var url="http://${应用访问地址}"+"?time="+time+"&signature="+ encodeURIComponent(signature);

Java示例代码：

javascript

package com.company;
import java.security.*;
import java.util.Date;
import javax.crypto.*;
import javax.crypto.spec.SecretKeySpec;
import org.apache.commons.codec.binary.Base64;
import java.net.URLEncoder;

/**
 * Created by studio on 2019/4/3.
 */
public class TokenTest {
    public static String getSignedUrl(String token){
        Date date = new Date();
        Long time = date.getTime();
        String stringToSign = String.valueOf(time);
        String signature = HMACSHA256(stringToSign.getBytes(), token.getBytes());
        String url = "http://${应用访问地址}"+"?time="+time+"&signature="+ signature;
        return url;
    }

    /**
     * 利用Java原生的摘要实现SHA256加密
     * @param str 加密后的报文
     * @return
     */
    public static String HMACSHA256(byte[] data, byte[] key)
    {
        try  {
            SecretKeySpec signingKey = new SecretKeySpec(key, "HmacSHA256");
            Mac mac = Mac.getInstance("HmacSHA256");
            mac.init(signingKey);
            return URLEncoder.encode(byte2Base64(mac.doFinal(data)));
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        } catch (InvalidKeyException e) {
            e.printStackTrace();
        }
        return null;
    }

    private static String byte2Base64(byte[] bytes){
        return Base64.encodeBase64String(bytes);
    }

    public static void main(String[] args) throws Exception {
        String token = "lfc8si7z";
        System.out.println(getSignedUrl(token));
    }
}

工作台操作手册

物联网

运维

可视化

组态开发

集成开发手册

集成组态画面

获取认证密钥

查看画面访问地址

生成安全访问地址

示例

集成组态开发编辑器

获取认证密钥

生成访问地址

代码示例

用在线工具进行测试

指定打开默认的图纸

集成门户开发编辑器

认证密钥

生成安全访问地址

代码示例

用在线工具进行测试

集成数据门户

门户开发

发布应用

认证密钥

生成安全访问地址

代码示例

组态开发

集成开发手册 ​

集成组态画面 ​

获取认证密钥 ​

查看画面访问地址 ​

生成安全访问地址 ​

示例 ​

集成组态开发编辑器 ​

获取认证密钥 ​

生成访问地址 ​

代码示例 ​

用在线工具进行测试 ​

指定打开默认的图纸 ​

集成门户开发编辑器 ​

认证密钥 ​

生成安全访问地址 ​

代码示例 ​

用在线工具进行测试 ​

集成数据门户 ​

门户开发 ​

发布应用 ​

认证密钥 ​

生成安全访问地址 ​

代码示例 ​

​

集成开发手册

集成组态画面

获取认证密钥

查看画面访问地址

生成安全访问地址

示例

集成组态开发编辑器

获取认证密钥

生成访问地址

代码示例

用在线工具进行测试

指定打开默认的图纸

集成门户开发编辑器

认证密钥

生成安全访问地址

代码示例

用在线工具进行测试

集成数据门户

门户开发

发布应用

认证密钥

生成安全访问地址

代码示例