發(fā)布PC端可視化應(yīng)用
通過PC端可視化應(yīng)用的發(fā)布功能,可以將已經(jīng)開發(fā)完成的PC端可視化應(yīng)用發(fā)布到線上環(huán)境,并進(jìn)行訪問權(quán)限的設(shè)置,供其他人員在線觀看。本文介紹如何發(fā)布一個(gè)PC端可視化應(yīng)用。
操作步驟
- 登錄DataV控制臺。
在我的可視化頁面中,鼠標(biāo)移動(dòng)到任一可視化應(yīng)用區(qū)域,單擊編輯。
在PC端畫布編輯器中,單擊頁面右上角的發(fā)布圖標(biāo)。
在發(fā)布對話框中,單擊發(fā)布大屏。
說明如果是首次發(fā)布可視化應(yīng)用,系統(tǒng)會(huì)彈出發(fā)布成功的對話框,在對話框中您可以單擊前往快照管理查看快照,如果無需查看請單擊取消進(jìn)入發(fā)布頁面。當(dāng)首次發(fā)布可視化應(yīng)用時(shí)出現(xiàn)發(fā)布失敗的情況,您可以將當(dāng)前頁面的DataV網(wǎng)址從HTTP協(xié)議切換成HTTPS協(xié)議網(wǎng)址后再重新選擇發(fā)布。
發(fā)布成功后,系統(tǒng)會(huì)開啟已發(fā)布開關(guān),并生成分享鏈接和二維碼。
掃描二維碼訪問您的PC端可視化應(yīng)用。
單擊二維碼可展示當(dāng)前可視化應(yīng)用的二維碼,掃描該二維碼即可在線訪問您的可視化應(yīng)用。
在線訪問您的PC端可視化應(yīng)用。
單擊分享鏈接右側(cè)的復(fù)制圖標(biāo),打開瀏覽器,將復(fù)制的鏈接粘貼到地址欄中,即可在線訪問您的PC端可視化應(yīng)用。
說明可視化應(yīng)用項(xiàng)目發(fā)布后,如果您想更換分享鏈接,可單擊分享鏈接左側(cè)的(重新生成鏈接)圖標(biāo),重新生成一個(gè)分享鏈接。重新生成后,舊的分享鏈接將不可用,請使用新的分享鏈接訪問目標(biāo)可視化應(yīng)用。
可選,可視化應(yīng)用分享成功后,您可以配置發(fā)布快照的參數(shù)內(nèi)容,還可以進(jìn)行訪問限制、分享信息和加載頁設(shè)置的配置。
發(fā)布快照
設(shè)置分享鏈接后,可以配置發(fā)布快照,指定訪問者看到的可視化應(yīng)用版本(默認(rèn)為快照發(fā)布版本)。屏幕的內(nèi)容會(huì)鎖定在快照創(chuàng)建的那一刻。
存檔之后,屏幕內(nèi)容的編輯和修改不會(huì)同步到歷史快照中,可作為穩(wěn)定預(yù)覽版本的備份。
具體操作方式如下。
在發(fā)布對話框中,在發(fā)布快照列表中,選擇一個(gè)已存檔的歷史快照即可完成該歷史快照的發(fā)布。
如果當(dāng)前可視化應(yīng)用沒有歷史快照,系統(tǒng)會(huì)將當(dāng)前編輯器的內(nèi)容作為第一個(gè)快照進(jìn)行發(fā)布。
如果當(dāng)前可視化應(yīng)用有歷史快照,系統(tǒng)會(huì)自動(dòng)發(fā)布最新一條快照。
單擊下方覆蓋已發(fā)布快照,把已發(fā)布快照內(nèi)的可視化應(yīng)用的內(nèi)容變成當(dāng)前編輯頁下的內(nèi)容。
單擊下方自動(dòng)新增快照并發(fā)布,自動(dòng)新增一個(gè)快照并選中新增的快照后立刻發(fā)布。
單擊下方管理快照,可在管理快照界面管理多個(gè)歷史快照,詳情請參見快照管理。
快照管理
單擊發(fā)布對話框內(nèi)的管理快照,或者您也可以單擊可視化應(yīng)用編輯器右上角生成快照右側(cè)的管理快照圖標(biāo),然后在快照管理對話框內(nèi)可進(jìn)行如下快照管理操作。
當(dāng)在管理快照界面內(nèi),單擊新增快照或修改快照,顯示新增或修改快照失敗時(shí),您可以將當(dāng)前頁面的DataV網(wǎng)址從HTTP協(xié)議切換成HTTPS協(xié)議網(wǎng)址后再重新操作。
查看額度:在快照管理對話框右上角可以查看管理快照界面內(nèi)剩余可創(chuàng)建快照的額度。一旦快照數(shù)量達(dá)到上限后無法新增快照,需要?jiǎng)h除不需要的快照。
說明不同版本快照額度的數(shù)量不同。
企業(yè)版:不超過3個(gè)。
專業(yè)版:不超過10個(gè)。
尊享版:不超過10個(gè)。
新增快照:在快照管理對話框中單擊新增快照即可新增一個(gè)歷史快照。
覆蓋已發(fā)布快照:單擊覆蓋已發(fā)布快照,編輯器的內(nèi)容覆蓋發(fā)布頁快照原有的內(nèi)容,即更新發(fā)布頁內(nèi)容,并且實(shí)時(shí)生效。更新內(nèi)容包括畫布編輯器配置、數(shù)據(jù)源配置、藍(lán)圖編輯器配置。
發(fā)布或關(guān)閉快照:選中管理欄內(nèi)某個(gè)歷史快照,單擊右側(cè)圖標(biāo)可快捷發(fā)布可視化應(yīng)用或切換發(fā)布的快照,切換后,發(fā)布頁內(nèi)容將切換成對應(yīng)快照的內(nèi)容,再次單擊圖標(biāo)即可關(guān)閉快照。
鎖定快照:單擊某個(gè)歷史快照右側(cè)的圖標(biāo)即可鎖定快照,快照鎖定后,不可刪除和覆蓋。
批量刪除:在管理界面內(nèi)多選或全選快照后,單擊下方批量刪除圖標(biāo)可進(jìn)行快照批量刪除。批量刪除功能無法刪除已發(fā)布和被鎖定的快照。
重要已發(fā)布的快照無法被刪除。
目前僅支持切換快照,不具備回滾的功能,刪除快照后無法恢復(fù),請謹(jǐn)慎操作。
注釋快照:可單擊圖標(biāo),自定義添加快照的注釋內(nèi)容。
訪問限制
DataV的發(fā)布功能提供了四種分享可視化應(yīng)用的方式:
公開分享(默認(rèn))。
密碼訪問分享。
通過Token驗(yàn)證分享。
IP白名單訪問分享。
僅企業(yè)版及以上版本支持訪問限制功能。
密碼訪問
在發(fā)布對話框中,打開訪問密碼。
在訪問密碼輸入框中,輸入您的驗(yàn)證密碼。
密碼長度為6位及以上,且必須具備以下三個(gè)條件:
至少包含一個(gè)英文大寫字母A~Z。
至少包含一個(gè)英文小寫字母a~z。
至少包含一個(gè)數(shù)字0~9。
密碼設(shè)置成功后,系統(tǒng)會(huì)提示已設(shè)置訪問限制。
可選:配置驗(yàn)證有效期。
重要只有密碼設(shè)置成功或開啟Token驗(yàn)證后,才可配置驗(yàn)證有效期。
選中驗(yàn)證有效期,可以設(shè)置密碼的有效期,最長為32小時(shí)。訪問者首次輸入密碼且成功訪問可視化應(yīng)用后,在設(shè)置的有效期時(shí)間內(nèi),可任意訪問該可視化應(yīng)用而無需輸入密碼。
去掉選中驗(yàn)證有效期,每次訪問都需要輸入密碼。
密碼設(shè)置成功后,當(dāng)您再次訪問可視化應(yīng)用的分享鏈接時(shí),系統(tǒng)會(huì)提示需要輸入密碼。
通過Token驗(yàn)證
您可以通過Token驗(yàn)證的方式,將可視化應(yīng)用的訪問權(quán)限與您的權(quán)限體系進(jìn)行集成。
在發(fā)布對話框中,打開通過Token驗(yàn)證開關(guān),即可開啟Token驗(yàn)證。Token驗(yàn)證開啟后,您可進(jìn)行如下操作:
獲取Token驗(yàn)證碼。
打開通過Token驗(yàn)證開關(guān)后,DataV會(huì)生成一個(gè)Token,您需要記錄這個(gè)Token,以備后用。
(可選)配置驗(yàn)證有效期。
選中驗(yàn)證有效期,可自定義調(diào)整Token驗(yàn)證的有效期,最長設(shè)置為32小時(shí)。訪問者首次進(jìn)行Token驗(yàn)證并成功訪問可視化應(yīng)用后,在設(shè)置的有效期時(shí)間內(nèi),可任意訪問該可視化應(yīng)用而無需再次進(jìn)行驗(yàn)證。
去選中驗(yàn)證有效期,每次訪問都需要通過驗(yàn)證。
Token驗(yàn)證開啟后,再次打開可視化應(yīng)用的分享頁面,會(huì)收到一個(gè)Access Denied消息,表示您的訪問被拒絕了。如果想要打開您的頁面,需要完成以下步驟。
為了防止重放攻擊,請確保您的服務(wù)器時(shí)間為東8區(qū)標(biāo)準(zhǔn)時(shí)間。DataV只會(huì)提供1分鐘的誤差,如果時(shí)間誤差超過1分鐘將會(huì)驗(yàn)證失敗。
發(fā)布可視化應(yīng)用,記錄可視化應(yīng)用編碼(URL的最后一段)。
將編碼與當(dāng)前時(shí)間(毫秒)連起來,并用 |(豎線)分隔開。
使用Token通過HMAC-SHA256 base64,對上一步得到的Token驗(yàn)證碼進(jìn)行加密。
將時(shí)間和加密后的簽名分別命名為
_datav_time
、_datav_signature
。將它們依次放入
URL
的querystring中。重要如果您的可視化應(yīng)用URL中需要使用GET的方式傳遞參數(shù),為了安全性,建議您使用DataV提供的Token參數(shù)簽名校驗(yàn),詳情請參見DataV分享頁Token參數(shù)簽名校驗(yàn)。
示例代碼如下:
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原生的摘要實(shí)現(xiàn)SHA256加密。 * @param str加密后的報(bào)文。 * @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>(); // 自定義參數(shù)。 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,自定義參數(shù)字典。 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(); // 參數(shù)排序。 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; }); //不存在參數(shù)認(rèn)證 string signStr = screenId + "|" + timestamp; //存在參數(shù)認(rèn)證 //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白名單訪問
設(shè)置啟用IP白名單后,發(fā)布后的可視化應(yīng)用僅允許在設(shè)置范圍內(nèi)的白名單IP下訪問。
在發(fā)布對話框中,打開IP白名單。
在下方IP白名單輸入框中,輸入您的IP,并用“,“號分隔不同的白名單。
IP白名單設(shè)置成功后,當(dāng)您再次訪問可視化應(yīng)用的分享鏈接時(shí),如果您使用了非白名單IP訪問當(dāng)前可視化應(yīng)用,可視化應(yīng)用頁面訪問將被拒絕。
分享信息
DataV可視化應(yīng)用在釘釘客戶端內(nèi)分享發(fā)布鏈接時(shí)提供了可自定義修改分享信息內(nèi)容的功能,詳細(xì)參數(shù)配置介紹如下。
配置參數(shù) | 說明 |
標(biāo)題 | 您可以自定義修改即將發(fā)布的可視化應(yīng)用分享鏈接的標(biāo)題名稱,默認(rèn)顯示為創(chuàng)建該可視化應(yīng)用時(shí)的標(biāo)題名。 |
描述 | 您可以對即將發(fā)布的可視化應(yīng)用分享鏈接進(jìn)行簡單的內(nèi)容描述。 |
圖片 | 您可以對即將發(fā)布的可視化應(yīng)用,通過自定義輸入圖片URL鏈接或拖動(dòng)本地圖片到右側(cè)圖片欄內(nèi),為分享鏈接設(shè)置一張圖片。 說明 此處支持添加靜態(tài)或動(dòng)態(tài)圖片,但在分享鏈接展示中均為靜態(tài)展示。 |
釘釘客戶端分享鏈接樣例展示
如果您分享的卡片未生效,可能是由于釘釘客戶端的緩存機(jī)制,導(dǎo)致多次修改分享信息。建議您重啟釘釘客戶端,再進(jìn)行鏈接分享。
加載頁設(shè)置
DataV可視化應(yīng)用在分享發(fā)布鏈接時(shí)提供了可自定義設(shè)置加載頁內(nèi)容的功能,詳細(xì)參數(shù)配置介紹如下。
僅專業(yè)版及以上版本支持加載頁配置功能。
配置參數(shù) | 說明 |
背景 | 您可以自定義修改即將發(fā)布的可視化應(yīng)用加載頁的背景顏色,支持純色及漸變色。 |
Logo | 您可以對即將發(fā)布的可視化應(yīng)用加載頁的Logo圖片,通過自定義輸入圖片URL鏈接或拖動(dòng)本地圖片到右側(cè)圖片欄內(nèi),為Logo設(shè)置一張圖片。 說明 此處支持添加靜態(tài)或動(dòng)態(tài)圖片,如果設(shè)置的是動(dòng)態(tài)圖片,在加載頁面會(huì)動(dòng)態(tài)展示。 |