集成开发手册

集成组态画面

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

获取认证密钥

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

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

查看画面访问地址

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

生成集成画面的访问地址

画面访问地址示例：服务地址/topv/public/viewer/cdp22ihmn3drqk08****。画面ID：画面访问地址中最后一个 “/”后面的字符内容为画面 ID。

以下是生成集成画面访问地址的代码示例。

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

WARNING

username 和 op 可以在组态编辑器任何可以写脚本的地方获取： 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));
    }
}

集成组态应用

用户可以发布组态应用，并集成到第三方平台。

应用开发

打开【可视化管理】【组态画面】界面。如下图所示，左侧为组态画面目录，右侧显示的是选中的画面目录下的所有图纸画面。占击右上方的“应用开发”按钮，进入可视化应用管理界面。

发布应用

步骤1：点击发布按钮，打开应用发布对话框步骤2：设置安全选项，并点击保存按钮

令牌访问

开启令牌访问后，系统会为该应用自动生成令牌密钥（Token），单击查看图标即可显示。

集成应用的访问地址URL。开启Token后，用户便不能通过原来的URL直接访问您的应用页面。您需要在URL中集成Token加签信息。以下是集成访问地址的代码示例。
1. 将当前时间（毫秒）转化为字符串。
2. 使用Token，通过HMAC-SHA256 base64对上一步得到的字符串进行加密。说明为保证应用的安全性，计算出来的签名（signature）有效期为32个小时。32小时之后，需要重新计算新的签名（signature）。
3. 将时间和加密得到的签名分别命名为time和signature，并放入到URL的querystring中。
4. 测试。使用含有Token加签的URL访问应用。
- 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));
    }
}

集成组态编辑器

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

获取认证密钥

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

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

生成访问地址

组态编辑器路径地址：/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/{项目标识}

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/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=

集成开发手册 ​

集成组态画面 ​

获取认证密钥 ​

查看画面访问地址 ​

生成集成画面的访问地址 ​

示例 ​

集成组态应用 ​

应用开发 ​

发布应用 ​

令牌访问 ​

集成组态编辑器 ​

获取认证密钥 ​

生成访问地址 ​

代码示例 ​

用在线工具进行测试 ​

指定打开默认的图纸 ​

集成应用编辑器 ​

获取认证密钥 ​

生成访问地址 ​

代码示例 ​

用在线工具进行测试 ​

集成开发手册

集成组态画面

获取认证密钥

查看画面访问地址

生成集成画面的访问地址

示例

集成组态应用

应用开发

发布应用

令牌访问

集成组态编辑器

获取认证密钥

生成访问地址

代码示例

用在线工具进行测试

指定打开默认的图纸

集成应用编辑器

获取认证密钥

生成访问地址

代码示例

用在线工具进行测试