如何将无影云应用集成到Web页面中?

本文涉及的产品
无影云电脑个人版,1个月黄金款+200核时
无影云电脑企业版,4核8GB 120小时 1个月
简介: 本文基于无影云应用现有能力,为场景化集成需求客户提供清晰便捷的API接入指导。面向希望将无影云应用集成到Web&小程序中、向用户提供快速应用云化服务的开发者。在真实案例中,已实现1小时demo上线官网。

本文基于无影云应用现有能力,为场景化集成需求客户提供清晰便捷的API接入指导。面向希望将无影云应用集成到Web&小程序中、向用户提供快速应用云化服务的开发者。在真实案例中,已实现1小时demo上线官网。

本文作者为无影产研团队

一、相关介绍

无影云应用是一种基于公有云托管的应用程序虚拟化流式传输服务,实现了多生态应用免部署、快速构建、即点即用,能够为您提供安全、易用、高效且低成本的云上应用管理与使用体验。

image.png

无影云应用提供一站式的PaaS平台云化移植的应用虚拟环境,仅需轻量二次开发,即可实现传统应用上云和全端快速交付,该文档为梳理无影云应用API接入指引流程。

image.png

最终实现效果:

案例一:云钉一体

通过无影接入传统大型软件生态,实现钉钉中快速打开大型设计应用及钉盘文件读写,创新协同办公场景

云钉一体演示.gif

案例二:无影云应用在线实训方案demo

通过Web集成方式,实现基于云应用的在线互动实训方案,有效提升学员线上学习效果

二、云应用创建与镜像制作流程

1)云应用创建--->2)镜像制作

2.1 创建云应用

通过无影云应用控制台上传应用信息,创建云应用,发起验证流程,无影相关同学将在后台验证应用适配情况,并及时返回验证结果。详情见如下链接:https://help.aliyun.com/document_detail/426044.html

2.2 制作镜像

通过无影云应用控制台为已创建的云应用发起镜像制作流程,无影相关同学在后台为用户制作镜像并完成相关配置,及时返回制作结果。详情见如下链接:https://help.aliyun.com/document_detail/426045.html

PS:后续也将提供API的形式来实现上述创建过程。

三、接入方API调起云应用流程

1)创建交付组 ---> 2)创建用户 ---> 3)资源授权 ---> 4)获取访问令牌 ---> 5)打开应用

三、流程说明

3.1 创建交付组

交付组是无影向终端用户交付云应用的逻辑分组,包括底层依赖的云应用资源、包含云应用的镜像、资源管理策略等。

通过无影API创建交付组,具体API参考:https://help.aliyun.com/document_detail/428505.html

此步骤也可以通过控制台进行创建。

3.2 创建便捷用户

便捷用户是无影专用的账号体系,作为简单场景下使用无影云桌面或无影云应用的主体身份。

通过无影API创建便捷用户,具体API参考:https://help.aliyun.com/document_detail/283607.html

建议企业维护自己的账号体系与无影便捷用户之间的映射关系。

此步骤也可以通过控制台进行创建。

3.3 便捷用户授权或取消授权

客户通过无影API管理便捷用户与应用的授权关系,便捷用户只能打开被授权交付组中所包含的应用,具体API参考:https://help.aliyun.com/document_detail/428508.html

此步骤也可以通过控制台进行操作。

3.4 获取便捷用户身份令牌

后续打开云应用时,SDK需要使用包含便捷用户身份信息的令牌与无影云应用服务进行交互。

无影云应用服务会提供API,该API仅需要AK,SK,便捷用户ID即可生成一个受限的令牌,该令牌专门用于第三方集成的场景。

SDK

<dependency> <groupId>com.aliyun.inner</groupId> <artifactId>appstream_center20210218</artifactId> <version>1.0.1</version> </dependency>

API

接口名称:GetStsToken

接口类型:OpenAPI,ak sk调用

请求参数

名称

类型

是否必填

备注

Action

String

API名称

ExternalId

String

外部用户ID,在一个阿里云账号下唯一

返回值

名称

类型

备注

RequestId

String

请求ID

SessionId

String

会话ID

StsToken

String

受限令牌

3.5 打开云应用

使用SDK打开云应用时,需要传递一些参数给SDK。

必传参数

  • 便捷用户身份凭证:LoginToken,SessionId(上述第3.4步中获取,StsToken可作为LoginToken传递)

  • 要打开的应用信息:AppId,AppVersion

要打开的应用信息有两种获取方式:

  • 通过API:ListPublishedAppInfo

  • 在控制台创建完应用后,保存相应的应用信息

可选参数

  • 交付组ID:AppInstanceGroupId

  • 文件信息:待定

传递交付组ID参数时,会使用该交付组的资源打开应用;传递文件信息时,会使用目标应用打开文件。

将上述信息拼接成如下的URL:

https://wuying.aliyun.com/appStream?

LoginToken=${loginToken}&SessionId=${SessionId}&AppId=${AppId}&AppVersion=${AppVersion}

&AppInstanceGroupId=${AppInstanceGroupId}&xxx=${xxx}

访问该URL即可打开云应用。

后续也将提供原生JavaScript的SDK,可以在前端资源中直接引入使用。

3.6 打开云应用(另一种方式)

无影云应用提供了另外一种打开云应用的方式,这种方式在上述3.5中增加了一个步骤,即在拼接URL之前首先调用如下API:

接口名称:GetConnectionTicket

接口类型:OpenAPI

请求参数

名称

类型

是否必填

备注

Action

String

API名称

ProductType

String

固定值:CloudApp

LoginToken

String

身份令牌

SessionId

String

会话ID

AppId

String

应用ID

AppVersion

String

应用版本

AppInstanceGroupId

String

交付组ID

返回值(成功)

名称

类型

备注

RequestId

String

请求ID

TaskId

String

连接任务ID

TaskStatus

String

连接任务状态

Ticket

String

连接令牌

RegionId

String

地域

返回值(失败)

名称

类型

备注

RequestId

String

请求ID

Code

String

错误码

Message

String

错误信息

通过上述API获取TaskId和RegionId,然后将这两个参数拼接在3.5给出的URL后(其他参数不变),访问URL打开云应用。

这种方式的优点在于通过该API可以获取连接中的一些异常错误信息,便于第三方能够对打开失败的场景进行一些额外处理。如交付组资源不足时(APP_INSTANCE_GROUP_IS_FULL),可以提示用户等待。

四、重点API梳理

API接入无影云应用,接入方需从四个模块来更好使用和管理云应用资源

4.1 资源初始化

接口名称

接口功能

备注

CreateAppInstanceGroup

创建交付组

接口创建交付组需要付费,可以设置自动付费避免手动支付订单

ListAppInstanceGroup

查询交付组详细信息

查看交付组状态是否发布成功

AuthorizeInstanceGroup

为交付组添加分配用户

可以批量授权用户,授权后,交付组发布成功后,等待2分钟,可以再端上看到云应用

4.2 资源管理

接口名称

接口功能

备注

ModifyAppInstanceGroupAttribute

修改交付组策略

修改交付组策略

UpdateAppInstanceGroupImage

更新交付组镜像

更新镜像

4.3 资源使用

接口名称

接口功能

备注

AuthorizeInstanceGroup

为交付组移除分配用户

可以批量取消授权用户,取消授权后,等待2分钟,同步到端上显示

4.4 资源销毁

本期版本是包年包月模式,不支持API方式销毁资源,需要提工单退费删除。

接口名称

接口功能

备注

AuthorizeInstanceGroup

为交付组移除分配用户

可以批量取消授权用户,取消授权后,等待2分钟,同步到端上显示

五、API接口列表

5.1 地域相关接口

接口名称

接口功能

ListRegions

查询支持的地域

5.2 资源相关接口

接口名称

接口功能

ListNodeInstanceType

查询资源规格

GetResourcePrice

查询购买资源订单的详细信息

5.3 交付组相关接口

接口名称

接口功能

CreateAppInstanceGroup

创建交付组

ListAppInstanceGroup

查询交付组详细信息

ModifyAppInstanceGroupAttribute

修改交付组策略

AuthorizeInstanceGroup

为交付组添加或移除分配用户

PageListAppInstanceGroupUser

分页查询交付组的分配用户

RenewAppInstanceGroup

为交付组续费

UpdateAppInstanceGroupImage

更新交付组镜像

5.4 端侧相关接口

接口名称

接口功能

GetConnectionTicket

端上获取链接

ListPublishedAppInfo

查询应用列表

ListRunningApps

查询运行中应用列表

StopApp

停止应用

5.5 端侧登录接口

接口名称

接口功能

GetLoginToken

获取登录凭证

RefreshLoginToken

刷新登录凭证

5.6 用户管理接口(无影用户服务SDK提供)

接口名称

接口功能

CreateUsers

创建一个或者多个便捷用户

DescribeUsers

查询便捷用户信息

FilterUsers

按用户属性筛选查询便捷用户信息

RemoveUsers

删除一个或者多个便捷用户

ResetUserPassword

重置便捷用户的密码,包括生成重置密码Token,并发送重置密码邮件到便捷用户的邮箱

LockUsers

锁定一个或者多个便捷用户

UnlockUsers

解锁一个或者多个便捷用户

六、参考材料

6.1 无影云应用介绍文档

https://help.aliyun.com/document_detail/426033.html

6.2 无影云应用控制台操作指南

https://help.aliyun.com/document_detail/426043.html

6.3 无影云应用基本概念

https://help.aliyun.com/document_detail/426037.html

相关文章
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
3月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
66 2
|
4月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
119 2
|
4月前
|
存储 缓存 安全
如何使用 PHP 将天气跟踪集成到 Web 应用程序中
如何使用 PHP 将天气跟踪集成到 Web 应用程序中
51 0
html,web页面朗读文字,朗读中文,朗读英文
html,web页面朗读文字,朗读中文,朗读英文
|
5月前
|
数据处理 Python
Django视图:构建动态Web页面的核心技术
Django视图:构建动态Web页面的核心技术
|
5月前
|
存储
在 Web 中判断页面是不是刷新
【9月更文挑战第10天】在Web开发中,判断页面是否刷新有多种方法:1) 监听`popstate`事件,检测用户是否通过历史记录访问页面;2) 记录并比较页面加载时间戳,若相差极小,则可能为刷新;3) 利用本地存储设置特定值,若该值不存在或不符合预期,则页面可能被刷新。然而,这些方法并非绝对准确。
295 3
|
6月前
|
API C# 开发框架
WPF与Web服务集成大揭秘:手把手教你调用RESTful API,客户端与服务器端优劣对比全解析!
【8月更文挑战第31天】在现代软件开发中,WPF 和 Web 服务各具特色。WPF 以其出色的界面展示能力受到欢迎,而 Web 服务则凭借跨平台和易维护性在互联网应用中占有一席之地。本文探讨了 WPF 如何通过 HttpClient 类调用 RESTful API,并展示了基于 ASP.NET Core 的 Web 服务如何实现同样的功能。通过对比分析,揭示了两者各自的优缺点:WPF 客户端直接处理数据,减轻服务器负担,但需处理网络异常;Web 服务则能利用服务器端功能如缓存和权限验证,但可能增加服务器负载。希望本文能帮助开发者根据具体需求选择合适的技术方案。
313 0
|
6月前
|
Java 数据库连接 数据库
强强联手!JSF 与 Hibernate 打造高效数据访问层,让你的应用如虎添翼,性能飙升!
【8月更文挑战第31天】本文通过具体示例详细介绍了如何在 JavaServer Faces (JSF) 应用程序中集成 Hibernate,实现数据访问层的最佳实践。首先,创建一个 JSF 项目并在 Eclipse 中配置支持 JSF 的服务器版本。接着,添加 JSF 和 Hibernate 依赖,并配置数据库连接池和 Hibernate 配置文件。然后,定义实体类 `User` 和 DAO 类 `UserDAO` 处理数据库操作。
76 0
|
6月前
|
开发者 前端开发 开发框架
JSF与移动应用,开启全新交互体验!让你的Web应用轻松征服移动设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,移动设备的普及使得构建移动友好的应用变得至关重要。尽管JSF(JavaServer Faces)主要用于Web应用开发,但结合Bootstrap等前端框架,也能实现优秀的移动交互体验。本文探讨如何在JSF应用中实现移动友好性,并通过示例代码展示具体实现方法。使用Bootstrap的响应式布局和组件可以确保JSF页面在移动设备上自适应,并提供友好的表单输入和提交体验。尽管JSF存在组件库较小和学习成本较高等局限性,但合理利用其特性仍能显著提升用户体验。通过不断学习和实践,开发者可以更好地掌握JSF应用的移动友好性,为Web应用开发贡献力量。
64 0

热门文章

最新文章