本文档为您介绍如何发布一个大屏项目,通过大屏项目的发布功能,可以将已经开发完成的大屏发布到线上环境,并进行访问权限的设置,供其他人员在线观看。

操作步骤

  1. 登录DataV控制台
  2. 单击我的可视化,进入大屏管理页面。
  3. 选择一个大屏项目,单击右上角的发布图标。
    发布可视化大屏
  4. 发布对话框中,打开发布分享开关,即可通过下图的分享链接公开访问您的可视化应用。
    发布可视化大屏对话框
    打开发布分享开关后,会随机生成一个分享链接,此链接每次打开之后都会变更,上一次的分享链接随即失效且不能恢复到历史分享链接。
    注意 为了更好地支持分享,DataV大屏分享页域名即将从datav.aliyun.com/share/example切换为 datav.aliyuncs.com/share/example,此变更可能对您的DataV大屏项目造成的影响,对您造成的不便敬请谅解。请参考DataV发布分享页域名变更解决方案及时排查并解决可能存在的问题。

    大屏分享成功后,您还可以进行访问限制发布页面的配置。

访问限制

DataV的发布功能提供了三种分享大屏的方式:

请选择合适的方式以方便其他用户进行可视化应用的访问。

密码访问(仅企业版及以上用户可用)

  1. 在发布弹窗中,勾选访问密码
  2. 访问密码输入框中输入您的验证密码,密码长度为6位以上,且必须具备以下三个条件:
    • 至少包含一个英文大写字母A~Z
    • 至少包含一个英文小写字母a~z
    • 至少包含一个数字0~9

    如果密码设置成功,系统会提示设置密码成功

  3. (可选)配置验证有效期
    注意 只有密码设置成功或开启Token验证后才可进行验证有效期的配置。
    • 开启验证有效期,可以设置密码的有效期,最长为32小时。访问者首次输入密码且成功访问大屏后,在设置的有效期时间内,可任意访问该大屏而无需输入密码。
    • 关闭验证有效期,每次访问都需要输入密码。
密码设置成功后,当您再次访问大屏的分享链接时,系统会提示需要输入密码。
密码访问大屏页面

Token验证(仅企业版及以上用户可用)

您可以通过Token验证的方式将大屏访问权限与您的权限体系进行集成。

在发布弹窗中,勾选Token验证,即可开启Token验证。Token验证开启后,您可进行如下操作:
  • (可选)配置验证有效期
    • 开启验证有效期,可以设置Token验证的有效期,最长为32小时。访问者首次进行Token验证并成功访问大屏后,在设置的有效期时间内,可任意访问该大屏而无需再次进行验证。
    • 关闭验证有效期,每次访问都需要通过验证。
  • 获取Token验证码。
    开启Token 验证功能后,DataV会生成一个Token,如下图所示,您需要记录下这个 Token,以备后用。
    获取Token验证码
Token验证开启后,再次打开您所分享的页面,会收到一个Access Denied消息,表示您的访问被拒绝了,如果想要打开您的页面,需要完成下面几个步骤:
注意 为了防止重放攻击,请确保您的服务器时间为东8区标准时间,DataV只会提供1分钟的误差,如果时间误差超过1分钟将会验证失败。
  1. 发布大屏,记录大屏编码(URL的最后一段)。
  2. 将编码与当前时间(毫秒)连起来,并用 |(竖线)分隔开。
  3. 使用Token通过HMAC-SHA256 base64对上一步得到的Token验证码进行加密。
  4. 将时间和加密后的签名分别命名为_datav_time_datav_signature
  5. 将它们依次放入url 的querystring中。
    注意 如果您的大屏URL中需要使用Get的方式传递参数,为了安全性,建议您使用DataV提供的Token参数签名校验,具体请参考DataV分享页Token参数签名校验
示例代码如下:
  • PHP:
    <?php
      $token = "kBwoX9rFX9v4zbOT0Gjd_wr65DZ3P_WW";
      $screenID = "03d1b68faeb09671046d1ef43f588c33";
      $time = time()*1000;
      $stringToSign = $screenID.'|'.$time;
      $signature = urlencode(base64_encode(hash_hmac('sha256', $stringToSign, $token, true)));
      $url = "http://datav.aliyuncs.com/share/".$screenID."?_datav_time=".$time."&_datav_signature=".$signature;
    ?>
    <iframe width=100% height=100% src="<?=$url?>"/>
  • Node.js:
    const crypto = require('crypto');
    var token = "Ev97wOUSAtJusc3Vsd9O2ngr_vfVFH67";
    var screenID ="14c5448c00ecde02b065c231d1659f38";
    var time = Date.now();
    var stringToSign = screenID +'|'+ time;
    var signature = crypto.createHmac('sha256', token).update(str).digest().toString('base64');
    var url="http://datav.aliyuncs.com/share/"+ screenID +"?_datav_time="+time+"&_datav_signature="+ encodeURIComponent(signature);
  • Java:
    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 TokenTest {
        public static String getSignedUrl(String screenID, String token){
            Date date = new Date();
            Long time = date.getTime();
            String stringToSign = screenID + "|" + time;
            String signature = HMACSHA256(stringToSign.getBytes(), token.getBytes());
            String url = "http://datav.aliyuncs.com/share/"+ screenID +"?_datav_time="+time+"&_datav_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 {
            System.out.println(getSignedUrl("screenId", "token"));
        }
    }

发布页面(仅企业版及以上用户可用)

设置分享链接后,可以配置访问者看到的大屏版本,默认为实时更新发布版本,也可以设置为历史版本,具体说明如下:
  • 实时页面:屏幕内容的编辑和修改会实时更新同步到该版本中。分享该版本可让访问者即时查看到屏幕内容的最新调整。
  • 历史快照:屏幕的内容会锁定在历史快照创建的那一刻,存档之后屏幕内容的编辑和修改不会同步到历史快照中,可作为稳定预览版本的备份。
    1. 在发布弹窗中单击历史快照 > 新建当前时间为快照,系统会将单击时的大屏配置项作为快照存起来。
      • 可在注释列添加注释备忘。
      • 关闭发布分享功能之后,快照的数据会继续保留。
    2. 再次单击新建当前时间为快照,可新增历史快照,系统支持三个有效快照。
    3. 单击删除,删除多余快照。
      注意 快照目前仅支持切换,不具备回滚的功能,删除后将无法恢复,请谨慎操作。
    4. 单击快照前的椭圆点,可在快照与快照之间切换;单击实时页面,可在实时页面与历史快照页面之间切换。
      历史快照页面
    5. 快照设置成功后,刷新分享页即可看到您选中的快照版本的大屏内容。