DataV 发布分享 Token 验证

简介: 有很多同学希望把 DataV 创建的数据可视化大屏整合到自己的网站中,我们很早就提供了这样的支持。 但是如果限定权限则成为了一个问题。 如你嵌入到自己网站中的大屏,可能不希望被别人提取出来,自己打开。

有很多同学希望把 DataV 创建的数据可视化大屏整合到自己的网站中,我们很早就提供了这样的支持。

但是如果限定权限则成为了一个问题。

如你嵌入到自己网站中的大屏,可能不希望被别人提取出来,自己打开。或者你提供给 A 用户的大屏,不希望被 B 用户打开。

现在 DataV 就有一个新特性来支持这个问题。

在新上线的 DataV 中的“发布”面板中就有这个叫“验证 Token”的方式来完成鉴权,这个方式是基于 HMAC-SHA256 base64 加密。

image

如图,在开启“验证 Token”时,DataV 会为您生成一个 Token,您需要记录下这个 Token,以备后用。

在这个时候,如果您尝试直接打开您所分享的页面,您会收到一个 Access Denied。表示您的访问被拒绝了。

如果想要打开您的页面,就需要完成下面几个步骤:

发布大屏,拿到大屏编码(url 的最后一段)
将编码与当前时间(毫秒)连起来,用 |(竖线)分隔开

使用 token 通过 HMAC-SHA256 base64 对上一步得到的字符串进行加密

将时间和加密后的签名分别命名为 _datav_time, _datav_signature 放入 url 的 querystring 中

下面是示例:

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://local.datav.aliyun.com:9999/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(stringToSign).digest().toString('base64');
var url="http://datav.aliyun.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;

/**
 * Created by kangyu on 2017/11/4.
 */
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.aliyun.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"));
    }
}

注意:为了防止重放攻击,请确保您的服务器时间为东8区标准时间,DataV 只会提供1分钟的误差,如果时间误差超过1分钟将会验证失败。

相关实践学习
基于Hologres轻松玩转一站式实时仓库
本场景介绍如何利用阿里云MaxCompute、实时计算Flink和交互式分析服务Hologres开发离线、实时数据融合分析的数据大屏应用。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
相关文章
|
数据可视化 数据安全/隐私保护
DataV 支持 token 验证啦!
有很多同学希望把 DataV 创建的数据可视化大屏整合到自己的网站中,我们很早就提供了这样的支持。
8786 0
|
3月前
|
数据可视化 JavaScript 开发工具
vue2+datav可视化数据大屏(3)
接上一节所说,当我们将接口封装完了后,我们需要给大屏进行内容填充啦
|
3月前
|
数据可视化 JavaScript API
vue2+datav可视化数据大屏(2)
接上一节所说 我们已经讲骨架搭好 这节我们讲述的如何在vue2中使用mock数据和封装axios
|
3月前
|
数据可视化 JavaScript 前端开发
vue2+datav可视化数据大屏(1)
最近打算出一个前端可视化数据大屏的系列专栏,这次将很全面的教大家设计可视化大屏,从开始到打包结束,其中,包括如何设计框架,如何封装axios,等等,本次使用的数据均为mock数据。与正常使用一致。本文会从开始的创建vu23项目到最后的项目打包,本篇共计3节。
256 1
|
3月前
|
数据可视化 前端开发 JavaScript
react+datav+echarts实现可视化数据大屏
最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考
145 2
react+datav+echarts实现可视化数据大屏
|
8月前
|
数据可视化 容器
DataV构建大屏(全屏)数据展示页面
DataV构建大屏(全屏)数据展示页面
517 0
|
11月前
|
资源调度 数据可视化 JavaScript
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
752 0
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
|
SQL 数据可视化 数据库
使用阿里云dataV实现大屏自动轮播
使用阿里云dataV实现大屏自动轮播进行动态展示
1481 0
使用阿里云dataV实现大屏自动轮播
|
JSON 编解码 监控
使用dataV还原销售实时监控大屏
使用dataV还原销售实时监控大屏
400 0
使用dataV还原销售实时监控大屏

相关产品

  • DataV数据可视化