發布PC端可視化應用 - DataV

通過PC端可視化應用的發布功能，可以將已經開發完成的PC端可視化應用發布到線上環境，並進行存取權限的設定，供其他人員線上觀看。本文介紹如何發布一個PC端可視化應用。

操作步驟

登入DataV控制台。
在我的可視化頁面中，滑鼠移動到任一可視化應用地區，單擊編輯。
在PC端畫布編輯器中，單擊頁面右上方的發布表徵圖。
在發布對話方塊中，單擊發布大屏。
說明
如果是首次發布可視化應用，系統會彈出發布成功的對話方塊，在對話方塊中您可以單擊前往快照管理查看快照，如果無需查看請單擊取消進入發佈頁面。當首次發布可視化應用時出現發布失敗的情況，您可以將當前頁面的DataV網址從HTTP協議切換成HTTPS協議網址後再重新選擇發布。
發布成功後，系統會開啟發行開關，並產生分享連結和二維碼。
掃描二維碼訪問您的PC端可視化應用。
單擊二維碼可展示當前可視化應用的二維碼，掃描該二維碼即可線上訪問您的可視化應用。
線上訪問您的PC端可視化應用。
單擊分享連結右側的複製表徵圖，開啟瀏覽器，將複製的連結粘貼到地址欄中，即可線上訪問您的PC端可視化應用。
說明
可視化應用專案發布後，如果您想更換分享連結，可單擊分享連結左側的（重建連結）表徵圖，重建一個分享連結。重建後，舊的分享連結將不可用，請使用新的分享連結訪問目標可視化應用。
可選，可視化應用分享成功後，您可以配置發布快照的參數內容，還可以進行訪問限制、分享資訊和載入頁設定的配置。

發布快照

設定分享連結後，可以配置發布快照，指定訪問者看到的可視化應用版本（預設為快照發布版本）。螢幕的內容會鎖定在快照建立的那一刻。

重要

存檔之後，螢幕內容的編輯和修改不會同步到歷史快照中，可作為穩定預覽版本的備份。

具體操作方式如下。

在發布對話方塊中，在發布快照列表中，選擇一個已存檔的歷史快照即可完成該歷史快照的發布。
- 如果當前可視化應用沒有歷史快照，系統會將當前編輯器的內容作為第一個快照進行發布。
- 如果當前可視化應用有歷史快照，系統會自動發布最新一條快照。
單擊下方覆蓋發行快照，把發行快照內的可視化應用的內容變成當前編輯頁下的內容。
單擊下方自動新增快照並發布，自動新增一個快照並選中新增的快照後立刻發布。
單擊下方管理快照，可在管理快照介面管理多個歷史快照，詳情請參見快照管理。

快照管理

單擊發布對話方塊內的管理快照，或者您也可以單擊可視化應用編輯器右上方產生快照右側的管理快照表徵圖，然後在快照管理對話方塊內可進行如下快照管理操作。

重要

當在管理快照介面內，單擊新增快照或修改快照，顯示新增或修改快照失敗時，您可以將當前頁面的DataV網址從HTTP協議切換成HTTPS協議網址後再重新操作。

查看額度：在快照管理對話方塊右上方可以查看管理快照介面內剩餘可建立快照的額度。一旦快照數量達到上限後無法新增快照，需要刪除不需要的快照。
說明
不同版本快照額度的數量不同。
- 基礎版：不超過1個。
- 企業版：不超過3個。
- 專業版：不超過10個。
新增快照：在快照管理對話方塊中單擊新增快照即可新增一個歷史快照。
覆蓋發行快照：單擊覆蓋發行快照，編輯器的內容覆蓋發布頁快照原有的內容，即更新發布頁內容，並且即時生效。更新內容包括畫布編輯器配置、資料來源配置、藍圖編輯器配置。
發布或關閉快照：選中管理欄內某個歷史快照，單擊右側表徵圖可快捷發布可視化應用或切換髮布的快照，切換後，發布頁內容將切換成對應快照的內容，再次單擊表徵圖即可關閉快照。
鎖定快照：單擊某個歷史快照右側的表徵圖即可鎖定快照，快照鎖定後，不可刪除和覆蓋。
大量刪除：在管理介面內多選或全選快照後，單擊下方大量刪除表徵圖可進行快照大量刪除。大量刪除功能無法刪除發行和被鎖定的快照。
重要
- 發行的快照無法被刪除。
- 目前僅支援切換快照，不具備復原的功能，刪除快照後無法恢複，請謹慎操作。
注釋快照：可單擊表徵圖，自訂添加快照的注釋內容。

訪問限制

DataV的發布功能提供了四種分享可視化應用的方式：

公開分享（預設）。
密碼訪問分享。
通過Token驗證分享。
IP白名單訪問分享。

重要

僅企業版及以上版本支援訪問限制功能。

密碼訪問

在發布對話方塊中，開啟訪問密碼。
在訪問密碼輸入框中，輸入您的驗證密碼。
密碼長度為6位及以上，且必須具備以下三個條件：
- 至少包含一個英文大寫字母A～Z。
- 至少包含一個英文小寫字母a～z。
- 至少包含一個數字0～9。
密碼設定成功後，系統會提示已設定訪問限制。
可選：配置驗證有效期間。
重要
只有密碼設定成功或開啟Token驗證後，才可配置驗證有效期間。
- 選中驗證有效期間，可以設定密碼的有效期間，最長為32小時。訪問者首次輸入密碼且成功訪問可視化應用後，在設定的有效期間時間內，可任意訪問該可視化應用而無需輸入密碼。
- 去掉選中驗證有效期間，每次訪問都需要輸入密碼。
密碼設定成功後，當您再次訪問可視化應用的分享連結時，系統會提示需要輸入密碼。

通過Token驗證

您可以通過Token驗證的方式，將可視化應用的存取權限與您的許可權體系進行整合。

在發布對話方塊中，開啟通過Token驗證開關，即可開啟Token驗證。Token驗證開啟後，您可進行如下操作：

擷取Token驗證碼。
開啟通過Token驗證開關後，DataV會產生一個Token，您需要記錄這個Token，以備後用。
（可選）配置驗證有效期間。
- 選中驗證有效期間，可自訂調整Token驗證的有效期間，最長設定為32小時。訪問者首次進行Token驗證並成功訪問可視化應用後，在設定的有效期間時間內，可任意訪問該可視化應用而無需再次進行驗證。
- 去選中驗證有效期間，每次訪問都需要通過驗證。

Token驗證開啟後，再次開啟可視化應用的分享頁面，會收到一個Access Denied訊息，表示您的訪問被拒絕了。如果想要開啟您的頁面，需要完成以下步驟。

重要

為了防止重放攻擊，請確保您的伺服器時間為東8區標準時間。DataV只會提供1分鐘的誤差，如果時間誤差超過1分鐘將會驗證失敗。

發布可視化應用，記錄可視化應用編碼（URL的最後一段）。
將編碼與目前時間（毫秒）連起來，並用 |（豎線）分隔開。
使用Token通過HMAC-SHA256 base64，對上一步得到的Token驗證碼進行加密。
將時間和加密後的簽名分別命名為_datav_time、_datav_signature。

將它們依次放入URL的querystring中。

重要

如果您的可視化應用URL中需要使用GET的方式傳遞參數，為了安全性，建議您使用DataV提供的Token參數簽名校正，詳情請參見DataV分享頁Token參數簽名校正。

範例程式碼如下：

PHP：

<?php
  $token = "kBwoX9rFX9v4zbOT0Gjd_wr65DZ****";
  $screenID = "03d1b68faeb09671046d1ef43f58****";
  $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_vfV****";
var screenID ="14c5448c00ecde02b065c231d165****";
var time = Date.now();
var stringToSign = screenID +'|'+ time;
var signature = crypto.createHmac('sha256', token).update(stringToSign).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"));
    }
}

C#：

using System;
using System.Security.Cryptography;
using System.Text.RegularExpressions;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;

namespace datavToken
{
    class Program
    {
        static void Main(string[] args)
        {
            var dic = new Dictionary<string, string>();  // 自訂參數。
            dic.Add("datav_sign_no", "123998");         // datav_sign_開頭，需要簽名。
            dic.Add("datav_sign_lo", "kk");
            dic.Add("datav_sign_ao", "xx");

            dic.Add("name", "123");   // 不需要簽名。
            // 分享頁首碼，螢幕分享id、token，自訂參數字典。
            Console.WriteLine(GenerateUrl("https://datav.aliyun.com/share/", "ca74bea5e45503070d607795e0****", "66DsL2qjrXRHluSJScv_flOUhn****", dic));
        }
        private static string GenerateUrl(string datavBase, string screenId, string token, Dictionary<string, string> customeParams)
        {
            string pattern = @"^datav_sign_.*";
            string timestamp = GetTimeStamp();

            // 參數排序。
            Dictionary<string, string>.KeyCollection keyCol = customeParams.Keys;
            List<string> signKeys = new List<string>();

            foreach (var item in keyCol.ToList())
            {
                if (Regex.IsMatch(item, pattern))
                {
                    signKeys.Add(item);
                }
            }

            // 按照key排序。
            signKeys = signKeys.OrderBy(k => k).ToList();

            string paramsSignStr = signKeys.Aggregate("", (total, key) =>
            {
                if (total != "")
                {
                    total += "&";
                }
                total += key + "=" + customeParams[key];
                return total;
            });
            //不存在參數認證
            string signStr = screenId + "|" + timestamp;
            //存在參數認證
            //string signStr = screenId + "|" + timestamp + "|" + paramsSignStr;
            

            var encoding = new System.Text.ASCIIEncoding();
            byte[] keyByte = encoding.GetBytes(token);
            byte[] messageBytes = encoding.GetBytes(signStr);
            string signature;
            using (var hmacsha256 = new HMACSHA256(keyByte))
            {
                byte[] hashmessage = hmacsha256.ComputeHash(messageBytes);
                signature = Convert.ToBase64String(hashmessage);
            }


            var paramDic = new Dictionary<string, string>();
            paramDic.Add("_datav_time", timestamp);
            paramDic.Add("_datav_signature", signature);

            foreach (var item in customeParams)
            {
                paramDic.Add(item.Key, item.Value);
            }
            return datavBase + screenId + "?" + ParseToString(paramDic);
        }
        public static string GetTimeStamp()
        {
            TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);
            return Convert.ToInt64(ts.TotalMilliseconds).ToString();
        }
        static public string ParseToString(IDictionary<string, string> parameters)
        {
            IDictionary<string, string> sortedParams = new SortedDictionary<string, string>(parameters);
            IEnumerator<KeyValuePair<string, string>> dem = sortedParams.GetEnumerator();

            StringBuilder query = new StringBuilder("");
            while (dem.MoveNext())
            {
                string key = dem.Current.Key;
                string value = dem.Current.Value;
                if (!string.IsNullOrEmpty(key) && !string.IsNullOrEmpty(value))
                {
                    query.Append(key).Append("=").Append(HttpUtility.UrlEncode(value)).Append("&");
                }
            }
            string content = query.ToString().Substring(0, query.Length - 1);

            return content;
        }
    }
}

IP白名單訪問

設定啟用IP白名單後，發布後的可視化應用僅允許在設定範圍內的白名單IP下訪問。

在發布對話方塊中，開啟IP白名單。
在下方IP白名單輸入框中，輸入您的IP，並用“,“號分隔不同的白名單。
IP白名單設定成功後，當您再次訪問可視化應用的分享連結時，如果您使用了非白名單IP訪問當前可視化應用，可視化應用頁面訪問將被拒絕。

分享資訊

DataV可視化應用在DingTalk用戶端內分享發布連結時提供了可自訂修改分享資訊內容的功能，詳細參數配置介紹如下。

配置參數	說明
標題	您可以自訂修改即將發布的可視化應用分享連結的標題名稱，預設顯示為建立該可視化應用時的標題名。
描述	您可以對即將發布的可視化應用分享連結進行簡單的內容描述。
圖片	您可以對即將發布的可視化應用，通過自訂輸入圖片URL連結或拖動本地圖片到右側圖片欄內，為分享連結設定一張圖片。說明此處支援添加靜態或動態圖片，但在分享連結展示中均為靜態展示。

DingTalk用戶端分享連結範例展示

重要

如果您分享的卡片未生效，可能是由於DingTalk用戶端的緩衝機制，導致多次修改分享資訊。建議您重啟DingTalk用戶端，再進行連結分享。

載入頁設定

DataV可視化應用在分享發布連結時提供了可自訂設定載入頁內容的功能，詳細參數配置介紹如下。

說明

僅專業版支援載入頁配置功能。

配置參數	說明
背景	您可以自訂修改即將發布的可視化應用載入頁的背景顏色，支援純色及漸層色。
Logo	您可以對即將發布的可視化應用載入頁的Logo圖片，通過自訂輸入圖片URL連結或拖動本地圖片到右側圖片欄內，為Logo設定一張圖片。說明此處支援添加靜態或動態圖片，如果設定的是動態圖片，在載入頁面會動態展示。