【嵌入式集成-集成配置】活字格集成Wyn Enterprise

本教程介绍如何在活字格页面中集成Wyn Enterprise报表或仪表板。
附件为集成示例工程，可下载参考学习。


基本原理
在活字格页面中集成Wyn Enterprise的文档，不管是报表还是仪表板，核心都是一个URL网址。把这个URL网址作为活字格页面中某个链接的目标网址，或者作为页面中某个iframe的src属性值，即可实现用户在活字格页面中查看Wyn文档的需求。集成效果如下图：

图中红框部分就是被集成的Wyn Enterprise文档。
页面顶部的【查看报表】按钮，其命令为一个JavaScript命令，如下图：

JavaScript代码如下：
var iframe = $('[fgcname = "ReportContainer"]');
// 从本地存储中获取令牌
var token = window.localStorage["token"];
// 组织成可直接访问的URL
var urlStr = “http://localhost:51980/reports/view/5b8796af2e6c1b000e71adca?theme=default&lng=zh-CN”  + "&token=" + token;
// 将URL设置为iframe的src属性
iframe.empty();
iframe.append("<iframe style='height: 100%; width: 100%; border: 0px;' src='" + urlStr + "'/>");

代码中，可直接访问的URL，由文档URL加上令牌参数（"&token=" + token）构成。
文档URL可从Wyn门户点击【新窗口】获得，如下图：

新窗口地址栏的URL就是文档URL：

在登录Wyn门户之前，直接访问这个文档URL，将会跳转到Wyn登录页面。
为了能够直接打开文档，需要在文档URL后面加上令牌（token）参数，即 "&token=" + token，如：
&token= 5b87……………71adca

令牌的获取，可以使用一个网页工具，也可以使用JavaScript代码调用Wyn的登录API。

获取Token
使用工具获取Token
请使用下面的链接，下载getToken.html网页工具文件：
http://help.grapecity.com.cn/download/attachments/30265316/getToken.html?version=1&modificationDate=1553237084000&api=v2
双击该文件，浏览器将打开该网页工具，如下图：

将页面中的Wyn Login Server URL修改为您的Wyn Enterprise服务器的登录页面的URL，然后输入Wyn Enterprise用户名和密码，再单击按钮“Login to Get Token”。如果登录成功，按钮下面的文本框将会显示令牌字串，例如：806e58d428b276207bd36b07248143e2a975ad961bbc27bc32f61af404e916d7。

使用JavaScript代码获取Token
在活字格页面中，定义两个保存用户名和密码的单元格，如txtUserName和txtPassword。
为登录按钮设置一个【JavaScript命令】，如下图：


代码的核心逻辑是：
将页面上txtUserName文本框内的用户名和txtPassword文本框内的密码，以POST方式调用Wyn Enterprise的登录API。这个API的默认URL是 http://localhost:51980/connect/token 。
调用成功后，API将返回一个JSON对象，其中的access_token属性值就是一个可以用于访问Wyn文档的Token。可将这个Token保存在本地存储中备用，例如：
            window.localStorage["token"] = obj.access_token;

详细的JavaScript代码，请参考附件工程：活字格集成Wyn.fgcc

无论采用何种方式，获取到Token之后，即可在Wyn的文档URL之后加上 &token=xxxxxx 这种形式的QueryString，构成一个可以不经登录、直接访问的URL。这种可直接访问的URL，可以用于网页链接，也可以用于iframe的src属性，实现页面跳转或嵌入显示Wyn的报表或仪表板。

集成方式
从用户界面的角度看，将Wyn文档集成到活字格页面，有两种方式：
（1）页面跳转：即在活字格页面中，设置一个链接，用户点击该链接，浏览器跳转到Wyn文档显示页面。
（2）页面嵌入：即在活字格页面中，设置一个iframe，用户点击【显示报表】按钮时，Wyn文档直接显示在iframe中。

页面跳转
在获取Token并拼接完成可直接访问的Wyn的文档URL之后，可以在活字格页面中设置一个链接，设置【页面跳转】命令，如下图：

其中的URL，就是带有&token=xxx参数的可直接访问的Wyn文档URL，例如：
http://localhost:51980/reports/view/5b8796af2e6c1b000e71adca?theme=default&lng=zh-CN&token=806e58d428b276207bd36b07248143e2a975ad961bbc27bc32f61af404e916d7

页面嵌入
在活字格页面中使用iframe嵌入显示Wyn文档，步骤如下：
（1）设置合并单元格并命名
在准备用于显示报表内容的区域，设置单元格合并，然后在左上角的单元格名称框内输入一个名称，例如：ReportContainer，如下图：

（2）设置按钮JavaScript命令
页面顶部的【查看报表】按钮，其命令为一个JavaScript命令，如下图：

JavaScript代码如下：
var iframe = $('[fgcname = "ReportContainer"]'); // 此处的ReportContainer就是合并单元格的名称
// 从本地存储中获取令牌
var token = window.localStorage["token"];
// 组织成可直接访问的URL
var urlStr = http://localhost:51980/reports/view/5b8796af2e6c1b000e71adca?theme=default&lng=zh-CN  + "&token=" + token;
// 将URL设置为iframe的src属性
iframe.empty();
iframe.append("<iframe style='height: 100%; width: 100%; border: 0px;' src='" + urlStr + "'/>");

代码中，可直接访问的URL，由文档URL加上令牌参数（"&token=" + token）构成。

集成示例说明
在活字格中集成Wyn Enterprise，有三种方法：
（1）使用固定令牌集成
即使用预先准备好的令牌作为Token参数，组织成可直接跳转或嵌入iframe的URL网址。
（2）调用登录接口后集成
首先调用Wyn Enterprise的登录API，然后用返回的Token作为URL网址的一部分。
（3）调用单点登录集成插件
调用Wyn Enterprise的单点登录集成插件，一次性完成登录与集成显示。

一、使用固定令牌集成
先在Wyn Enterprise中打开一个报表或者仪表板，点击右上角【新窗口】：

将地址栏的URL拷贝下来：

比如：
http://localhost:51980/reports/view/5b8796af2e6c1b000e71adcc?display=pageless&#182;mpanel=top&theme=default&lng=zh-CN

再用浏览器打开getToken-wyn3.2.html文件，输入Wyn Enterprise门户网址、用户名、密码，点击Login按钮：

得到一个Token，拷贝下来。
将上面那个报表的URL，加上 &token= ，再串接这个Token，比如：
http://localhost:51980/reports/view/5b8796af2e6c1b000e71adcc?display=pageless&#182;mpanel=top&theme=default&lng=zh-CN&token=55086...e0c3b

在活字格中，为按钮设置一个【页面跳转】命令，指定外部URL就是上面这个网址：

运行时，点击按钮，就将跳转到新页面，直接显示报表或者仪表板内容。

二、调用登录接口后集成
首先设置一个登录按钮的Javascript命令，调用Wyn的登录API：
localhost:51980 /connect/token
得到返回的token之后，保存到单元格或全局变量中：
Forguncy.Page.getCell("txtToken").setValue(obj.access_token);
window.localStorage["token"] = obj.access_token;

在其他页面（如页面2）中，在按钮的Javascript命令中，取出全局变量中的token：
var token = window.localStorage["token"];
设置一个大的合并单元格，作为iframe的容器：
var iframe = $('[fgcname = "ReportContainer"]');
在容器中添加一个iframe元素，将其src设为带token的URL即可：
var urlStr = "http://localhost:51980/reports/view/5b8796af2e6c1b000e71adca?theme=default&lng=zh-CN&token=" + token;

iframe.empty();
iframe.append("<iframe style='height: 100%; width: 100%; border: 0px;' src='" + urlStr + "'/>");

三、调用单点登录集成插件
准备工作：部署Wyn的单点登录插件：
（1）拷贝SSO插件
SsoPlugin.zip文件解包至 C:\Program Files\Wyn Enterprise\Plugins，使得Sso位于Plugins之下。
sso.config.zip文件解包至C:\Program Files\Wyn Enterprise\。
（2）修改C:\Program Files\Wyn Enterprise\Monitor\Wyn.conf文件
plugins:
            - 'Plugins/sso/sso-plugin.dll'

注意：上面这行设置，需要12个前导空格。

活字格页面按钮的Javascript命令：
要点：将username和password以POST方式提交到Wyn的SSO插件：
var serverUrl = "http://localhost:51980/api/integration/sso?type=dashboards&docid=5b809a606d502b0031deb3cd&action=view";
var userName = Forguncy.Page.getCell("txtUserName").getValue();
var userPassword = Forguncy.Page.getCell("txtPassword").getValue();
token = loginWyn(serverUrl, userName, userPassword);  // 无需使用返回的token

SSO插件接口URL的构成：
固定部分：/api/integration/sso
QueryString参数：
type: 文档类型，dashboards或reports，注意末尾的s不能少。
docid：文档ID
action：view，edit，或者create，分别表示查看、设计、新建，如果是create，docid可省略。

运行时，点击按钮，如果用户名和密码登录Wyn成功，直接打开报表或仪表板的查看、设计、或者新建页面。

四、传递报表参数
参考Wyn Url集成URL参数说明：
https://help.grapecity.com.cn/pages/viewpage.action?pageId=42075479在Url后面跟 &dp=｛"参数名"：["参数值"]｝。

这个教程的图片不显示了呢？