DataWorks Embed API - 手把手教您在自建的 Web 嵌入 DataWorks 数据血缘图

本文涉及的产品
实时数仓Hologres,5000CU*H 100GB 3个月
实时计算 Flink 版,5000CU*H 3个月
检索分析服务 Elasticsearch 版,2核4GB开发者规格 1个月
简介: DataWorks 提供丰富的数据可视化界面,让用户能轻松地透过界面操作大数据业务,但仍有集成至自建 Web 界面的需求,减少切换页面的频率。下文就以透过阿里云令牌服务结合自建 Web 界面代理登录阿里云,做到嵌入DataWorks数据地图的血缘图。

前言

DataWorks 提供丰富的数据可视化界面,让用户能轻松地透过界面操作大数据业务,但仍有集成至自建 Web 界面的需求,减少切换页面的频率。DataWorks 新推出的 Embed API 透过阿里云令牌服务结合自建 Web 界面代理登录阿里云,做到嵌入DataWorks数据地图的血缘图。


Embed API https://dataworks.data.aliyun.com/cn-shanghai/open/playground/case?id=dataLineageGraph


先看效果图

image.png



登录态处理


登录态的处理有五个方面要处理

  • RAM 帐号
  • 代理 Role
  • 获取临时 AK
  • 获取登录 Token
  • 嵌入页面


其顺序图如下:



RAM 帐号

打开 RAM 访问控制,建立一个 RAM 帐号,并赋予 AliyunSTSAssumeRoleAccess 权限 (使此 RAM 帐号有代理 Role 的权限),以及取得 RAM 帐号的 AK,我们将在自建 Web 里使用这个 RAM 帐号登录获取临时 AK。


若使用 Open API 来新建可参考以下页面:


安全提示: 建议在自建 Web 里,其自运维的用户帐号一对一对应到一个阿里云的 RAM 帐号或 Role,例如自建的 LDAP 系统,每新建一个帐号就自动绑定一个阿里云 RAM 帐号或 Role,并且是一对一的关系不使用共享一个帐号或 Role 的方式


代理 Role

取得 RAM 帐号的 AK 后,使用这个 RAM 来代理一个 Role 并取得临时 AK,打开角色页面,建立一个角色,并取得这个角色的 ARN 码。


若使用 Open API 来新建可参考以下页面:


获取临时 AK

取得角色 ARN 码后,我们已俱备以下信息:

  • RAM 帐号 AK (AccessKeyId, AccessKeySecret)
  • Role ARN
  • 要登录的 DataWorks 的地域 (如上海为 cn-shanghai)


使用 STS 获取临时 AK 的 Open API 接口,接口描述查看


透过此接口我们可取到以下信息:

  • 临时 AK (AccessKeyId, AccessKeySecret)
  • securityToken (安全令牌)


获取登录 Token


取得临时 AK 与安全令牌后,再透过阿里云登录服务 ( signin.aliyun.com/federation ),取得 SigninToken (登录令牌),如以下代码示例。

// get aliyun signing token
const signingUrl = 'https://signin.aliyun.com/federation';
const params = new URLSearchParams();
params.append('Action', 'GetSigninToken');
params.append('AccessKeyId', accessKeyId); // 临时 accessKeyId
params.append('AccessKeySecret', accessKeySecret); // 临时 accessKeySecret
params.append('SecurityToken', securityToken); // 安全令牌
params.append('TicketType', 'mini');
const signingResult = await fetch(signingUrl, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: params,
});
const result = await signingResult?.json?.();
console.log(result?.SigninToken);


嵌入页面

取得登录令牌后,组织以下路径,透过 iframe 嵌入即可使用 DataWorks 血缘图。


https://signin.aliyun.com/federation?Action=Login&LoginUrl=${encodedLoginUrl}&Destination=${encodedUrl}&SigninToken=${encodedSinginToken} 


参数说明:

  • encodedLoginUrl: 为登录态失效后的转登页面,通常为 https://signin.aliyun.com
  • encodedUrl: 为最终使用 DataWorks 的界面链接,此处需要 DataWorks 提供可嵌入使用的功能链接。
  • encodedSinginToken: 登录令牌


参考代码

代码范例 (以Node.js为例)


  • index.js
const express = require('express');
const path = require('path');
const LoginAliyun = require('./loginAliyun');
const fetch = require('node-fetch');
const fs = require('fs');
const http = require('http');
const https = require('https');
const privateKey = fs.readFileSync('./sslcert/example.com.key', 'utf8');
const certificate = fs.readFileSync('./sslcert/example.com.crt', 'utf8');

const credentials = { key: privateKey, cert: certificate };

const app = express();

// Have Node serve the files for our built React app
app.use(express.static(path.resolve(__dirname, './client/dist')));

app.get("/getSigninToken", async (req, res) => {

  const regionId = 'cn-shanghai';
  const ramAccessKeyId = 'your ram access key id';
  const ramAccessKeySecret = 'your ram access key secret';
  const roleArn = 'role arn';

  const loginResult = await LoginAliyun.main(ramAccessKeyId, ramAccessKeySecret, regionId, roleArn);
  const credentials = loginResult?.body?.credentials;

  if (!credentials) {
    res.json({ message: 'error' });
    return;
  }

  // const { arn, assumedRoleUser } = loginResult?.body?.assumedRoleUser || {};
  const { accessKeyId, accessKeySecret, securityToken, expiration } = credentials || {};

  // get aliyun signing token
  const signingUrl = 'https://signin.aliyun.com/federation';

  const params = new URLSearchParams();
  params.append('Action', 'GetSigninToken');
  params.append('AccessKeyId', accessKeyId);
  params.append('AccessKeySecret', accessKeySecret);
  params.append('SecurityToken', securityToken);
  params.append('TicketType', 'mini');

  const signingResult = await fetch(signingUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: params,
  });

  const result = await signingResult?.json?.();

  res.json({ data: result?.SigninToken || '' });
});

// All other GET requests not handled before will return our React app
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, './client/dist', 'index.html'));
});

const httpServer = http.createServer(app);
const httpsServer = https.createServer(credentials, app);

httpServer.listen(8080);
httpsServer.listen(8443);

console.log('express running at http://localhost:%d', 8080);
  • loginAliyun.js
'use strict';
// This file is auto-generated, don't edit it
// 依赖的模块可通过下载工程中的模块依赖文件或右上角的获取 SDK 依赖信息查看
const Sts20150401 = require('@alicloud/sts20150401');
const OpenApi = require('@alicloud/openapi-client');
const Util = require('@alicloud/tea-util');
const Tea = require('@alicloud/tea-typescript');

// https://api.aliyun.com/api/Sts/2015-04-01/AssumeRole?lang=NODEJS
class Client {

  /**
   * 使用AK&SK初始化账号Client
   * @return Client
   * @throws Exception
   */
  static createClient(accessKeyId, accessKeySecret, regionId) {
    // 工程代码泄露可能会导致 AccessKey 泄露,并威胁账号下所有资源的安全性。以下代码示例仅供参考。
    // 建议使用更安全的 STS 方式,更多鉴权访问方式请参见:https://help.aliyun.com/document_detail/378664.html。
    let config = new OpenApi.Config({
      // 必填,请确保代码运行环境设置了环境变量 ALIBABA_CLOUD_ACCESS_KEY_ID。
      accessKeyId: process.env['ALIBABA_CLOUD_ACCESS_KEY_ID'] || accessKeyId,
      // 必填,请确保代码运行环境设置了环境变量 ALIBABA_CLOUD_ACCESS_KEY_SECRET。
      accessKeySecret: process.env['ALIBABA_CLOUD_ACCESS_KEY_SECRET'] || accessKeySecret,
    });
    // Endpoint 请参考 https://api.aliyun.com/product/Sts
    config.endpoint = `sts.${regionId}.aliyuncs.com`;
    return new Sts20150401.default(config);
  }

  static async main(accessKeyId, accessKeySecret, regionId, roleArn, roleSessionName, durationSeconds) {
    let result;
    let client = Client.createClient(accessKeyId, accessKeySecret, regionId);
    let assumeRoleRequest = new Sts20150401.AssumeRoleRequest({
      roleArn: roleArn,
      roleSessionName: roleSessionName || 'ram',
      durationSeconds: durationSeconds || 3600, // 有效期,单位为秒
    });
    let runtime = new Util.RuntimeOptions({});
    try {
      // 复制代码运行请自行打印 API 的返回值
      result = await client.assumeRoleWithOptions(assumeRoleRequest, runtime);
    } catch (error) {
      // 此处仅做打印展示,请谨慎对待异常处理,在工程项目中切勿直接忽略异常。
      // 错误 message
      console.log(error.message);
      // 诊断地址
      console.log(error.data["Recommend"]);
      Util.default.assertAsString(error.message);
    }
    return result;
  }

}

module.exports = Client;


  • package.json
{
  "name": "aliyun-iframe-dataworks-server",
  "version": "1.0.0",
  "description": "Aliyun Iframe DataWorks",
  "private": true,
  "main": "/pages/index.html",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "@alicloud/openapi-client": "0.4.7",
    "@alicloud/sts20150401": "1.1.3",
    "@alicloud/tea-typescript": "1.8.0",
    "@alicloud/tea-util": "1.4.7",
    "express": "4.17.1",
    "node-fetch": "2.7.0",
    "path": "^0.12.7"
  },
  "engines": {
    "node": ">=16.16.0"
  }
}


  • client/dist/index.html
<!DOCTYPE html>

<head>
  <style>
    #url-input {
      width: 600px;
    }

    iframe {
      margin: 16px;
      width: calc(100% - 32px);
      height: 680px;
    }
  </style>
  <script>
    window.fetchSigninToken = async () => {
      let result = '';
      try {
        const response = await fetch('/getSigninToken');
        const json = await response?.json?.();
        result = json?.data;
      } catch (e) {
        console.error(e);
      }
      return result;
    };
    window.onUrlChange = async () => {
      try {
        const url = document.getElementById('url-input').value;
        if (!url) return;
        const signinToken = await fetchSigninToken();
        if (!signinToken) return;
        const encodedLoginUrl = encodeURIComponent('https://signin.aliyun.com');
        const encodedUrl = encodeURIComponent(url);
        const encodedSinginToken = encodeURIComponent(signinToken);
        const iframe = document.getElementById('iframe-web');
        iframe.src = `https://signin.aliyun.com/federation?Action=Login&LoginUrl=${encodedLoginUrl}&Destination=${encodedUrl}&SigninToken=${encodedSinginToken}`;
      } catch (e) {
        console.error(e);
      }
    };
  </script>
</head>

<body>
  <div id="message"></div>
  嵌入的页面:
  <span>URL: </span><input id="url-input" type="text" />
  <button onclick="onUrlChange();">刷新</button>
  <div>
    <iframe id="iframe-web" frameBorder="0"></iframe>
  </div>
</body>


  • sslcert 文件夹下新建 example.com.crt 与 example.com.key


修改 index.js 以下部份:


const regionId = 'cn-shanghai'; // 要登录 DataWorks 的地域
const ramAccessKeyId = 'your ram access key id'; // RAM 帐户的 Access Key Id
const ramAccessKeySecret = 'your ram access key secret'; // RAM 帐户的 Access Key Secret
const roleArn = 'role arn'; // 角色 ARN



执行以下指令:

yarn install # 安装依赖
yarn start


打开路径 https://localhost:8443/,并填入要嵌入的页面链接

image.png



小结与后续

STS 令牌服务登录业务是阿里云提供的嵌入方式,其它业务如 OpenTelemetry、嵌入管控台也都是使用此方法,但使用此方法后,仍有一些问题需要解决:


  • 被嵌入的业务方,需提供可嵌入的功能模块、链接格式、可提供的参数透出给接入方
  • 被嵌入的业务模块,需要隐藏如公共头、侧边栏以及不必要的跳转,也需要被嵌入的业务方来调整
  • 当使用 RAM 帐号透过 STS 令牌服务登录 DataWorks 后,若单独打开 DataWorks 链接也会是登录状态,其原因是因为 STS 令牌服务的登录失效时间与 DataWorks 登录失效时间不一致导致,后续若统一调整为阿里云登录失效时间后,此问题可解
  • 虽然我们只给 RAM 帐号 AliyunSTSAssumeRoleAccess 的权限,但是仍需要接入方在自建的 Web 系统上,将自营的帐号一对一对应到 RAM 帐号或 Role,让每个登录到自建的 Web 的用户,都是独立使用一个 RAM 帐号或 Role (不使用共享一个帐号或 Role 的方式),提高安全性
  • 确保每次都能完整初始化 DataWorks 页面,可在背景 (隐藏 iframe) 先嵌入完整页面如 https://dataworks4service.data.aliyun.com/cn-shanghai/dmc,再将 iframe 链接调整至功能模块 (血缘图)




相关实践学习
基于MaxCompute的热门话题分析
本实验围绕社交用户发布的文章做了详尽的分析,通过分析能得到用户群体年龄分布,性别分布,地理位置分布,以及热门话题的热度。
一站式大数据开发治理平台DataWorks初级课程
DataWorks 从 2009 年开始,十ー年里一直支持阿里巴巴集团内部数据中台的建设,2019 年双 11 稳定支撑每日千万级的任务调度。每天阿里巴巴内部有数万名数据和算法工程师正在使用DataWorks,承了阿里巴巴 99%的据业务构建。本课程主要介绍了阿里巴巴大数据技术发展历程与 DataWorks 几大模块的基本能力。 课程目标 &nbsp;通过讲师的详细讲解与实际演示,学员可以一边学习一边进行实际操作,可以深入了解DataWorks各大模块的使用方式和具体功能,让学员对DataWorks数据集成、开发、分析、运维、安全、治理等方面有深刻的了解,加深对阿里云大数据产品体系的理解与认识。 适合人群 &nbsp;企业数据仓库开发人员 &nbsp;大数据平台开发人员 &nbsp;数据分析师 &nbsp;大数据运维人员 &nbsp;对于大数据平台、数据中台产品感兴趣的开发者
目录
相关文章
|
17天前
|
存储 数据挖掘 BI
API数据源:轻松接入各类业务系统数据
在数字化转型中,企业面临多样化的数据需求。Quick BI推出API数据源功能,支持广泛的数据接入,包括实时天气、电商交易及内部业务数据,极大丰富了可分析数据范围。该功能提供灵活的连接方式(抽取和直连模式)、多元授权机制(基础认证、前置请求)和自动化数据解析,降低了操作门槛,提升了配置效率。通过动态Token获取等最佳实践,确保数据安全与实时性,满足企业具体业务需求。了解更多,请访问Quick BI官方文档或瓴羊官网。
144 77
|
24天前
|
人工智能 前端开发 API
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
Gemini Coder 是一款基于 Google Gemini API 的 AI 应用生成工具,支持通过文本描述快速生成代码,并提供实时代码编辑和预览功能,简化开发流程。
113 38
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
|
19天前
|
JSON 前端开发 搜索推荐
关于商品详情 API 接口 JSON 格式返回数据解析的示例
本文介绍商品详情API接口返回的JSON数据解析。最外层为`product`对象,包含商品基本信息(如id、name、price)、分类信息(category)、图片(images)、属性(attributes)、用户评价(reviews)、库存(stock)和卖家信息(seller)。每个字段详细描述了商品的不同方面,帮助开发者准确提取和展示数据。具体结构和字段含义需结合实际业务需求和API文档理解。
|
6天前
|
搜索推荐 数据挖掘 API
怎么利用商品详情 API 接口实现数据获取与应用?
在电商蓬勃发展的时代,数据成为驱动业务增长的关键。商品详情API接口为电商从业者、开发者和数据分析爱好者提供了获取海量商品数据的途径,助力精准营销、优化用户体验和提升运营效率。本文深入探讨如何利用商品详情API接口进行数据获取与应用,涵盖接口概念、工作原理、不同平台特点、准备工作、数据获取及处理、错误处理,并通过代码示例展示其在电商平台展示、数据分析、竞品分析和个性化推荐等场景中的应用。
26 12
|
12天前
|
JSON 缓存 API
解析电商商品详情API接口系列,json数据示例参考
电商商品详情API接口是电商平台的重要组成部分,提供了商品的详细信息,支持用户进行商品浏览和购买决策。通过合理的API设计和优化,可以提升系统性能和用户体验。希望本文的解析和示例能够为开发者提供参考,帮助构建高效、可靠的电商系统。
32 12
|
5天前
|
搜索推荐 API 开发者
深度解析:利用商品详情 API 接口实现数据获取与应用
在电商蓬勃发展的今天,数据成为驱动业务增长的核心。商品详情API接口作为连接海量商品数据的桥梁,帮助运营者、商家和开发者获取精准的商品信息(如价格、描述、图片、评价等),优化策略、提升用户体验。通过理解API概念、工作原理及不同平台特点,掌握获取权限、构建请求、处理响应和错误的方法,可以将数据应用于商品展示、数据分析、竞品分析和个性化推荐等场景,助力电商创新与发展。未来,随着技术进步,API接口将与人工智能、大数据深度融合,带来更多变革。
28 3
|
17天前
|
供应链 API 开发者
解锁电商数据的无限可能:探秘京东商品SKU信息API接口
京东商品SKU信息API接口是电商开发与运营中的重要工具,帮助开发者获取商品的详细属性,如库存、价格、规格等。通过该接口,电商平台可以丰富商品展示页面,提升用户体验;商家能实时掌握库存动态,优化销售策略;数据分析人员可深入洞察市场趋势,实现精准营销。使用前需注册京东开放平台账号、创建应用并获取API权限,同时仔细阅读API文档以确保正确调用。代码示例展示了如何用Python调用该接口,并处理返回数据。未来,该接口将在个性化推荐、智能库存管理和数据分析等领域发挥更大作用,助力电商业务创新与发展。
70 14
|
8天前
|
缓存 监控 API
如何查看商品销量 API 接口的性能指标数据
在电商蓬勃发展的时代,数据驱动业务决策至关重要。商品销量作为核心指标,依赖高效稳定的API接口获取。本文探讨如何查看和优化商品销量API的性能指标,包括响应时间、吞吐量、错误率和并发用户数,通过专业工具、日志分析及自定义代码实现监控与优化,确保业务稳定运行和用户体验提升。
26 2
|
2月前
|
Kubernetes 安全 Devops
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
82 10
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
|
25天前
|
监控 API 数据处理
速卖通商品数据尽在掌握:揭秘高效利用API接口获取详情策略
速卖通(AliExpress)API助力电商数据处理与分析,提供商品搜索、价格监控等功能。开发者需注册账号、创建应用并获取API Key。常用接口包括商品搜索和详情API。调用时注意频率限制、数据延迟及错误处理。本文介绍全过程并附Python示例代码,帮助提升电商运营效率。

相关产品

  • 大数据开发治理平台 DataWorks