将 MobileFirst Foundation SDK 添加到 Web 应用程序

improve this page | report issue

概述

您可以使用首选开发环境和工具开发移动或桌面 MobileFirst Web 应用程序。
在此教程中,了解如何将 MobileFirst Web SDK 添加到 Web 应用程序,以及如何向 MobileFirst Server 注册 Web 应用程序

MobileFirst Web SDK 作为一组 JavaScript 文件提供,并在 NPM 中可用
SDK 包含以下文件:

  • ibmmfpf.js - SDK 的核心。
  • ibmmfpfanalytics.js - 为 MobileFirst Analytics 提供支持。

跳转至

先决条件

添加 MobileFirst Web SDK

要将 SDK 添加到新的或现有的 Web 应用程序,请先将其下载到您的工作站,然后将其添加到您的 Web 应用程序。

下载 SDK

  1. 命令行窗口,浏览至您的 Web 应用程序的根文件夹。
  2. 运行命令:npm install ibm-mfp-web-sdk

此命令将创建以下目录结构:

![SDK 文件夹内容(sdk-folder.png)

添加 SDK

要添加 Mobile Foundation Web SDK,请在 Web 应用程序中以标准方式进行引用。
SDK 还支持 AMD,以便您可以使用模块装入器(如 RequireJS)装入 SDK。

标准

HEAD 元素中引用 ibmmfpf.js 文件。

<head>
    ...
    ...
    <script type="text/javascript" src="node_modules/ibm-mfp-web-sdk/ibmmfpf.js"></script>
</head>

使用 RequireJS

HTML

<script type="text/javascript" src="node_modules/requirejs/require.js" data-main="index"></script>

JavaScript

require.config({
	'paths': {
		'mfp': 'node_modules/ibm-mfp-web-sdk/ibmmfpf'
	}
});

require(['mfp'], function(WL) {
    // application logic.
});

要点:如果要添加分析支持,请将 ibmmfpfanalytics.js 文件引用放置在 ibmmfpf.js 文件引用之前

初始化 MobileFirst Web SDK

通过在您的 Web 应用程序的主要 JavaScript 文件中指定上下文根应用程序标识值来初始化 Mobile Foundation Web SDK:

var wlInitOptions = {
    mfpContextRoot : '/mfp', // "mfp" is the default context root in the Mobile Foundation
    applicationId : 'com.sample.mywebapp' // Replace with your own value.
};

WL.Client.init(wlInitOptions).then (
    function() {
        // Application logic.
});
  • mfpContextRoot:MobileFirst Server 所使用的上下文根。
  • applicationId:应用程序包名称,在注册应用程序时定义。

注册 Web 应用程序

您可以从 MobileFirst Operations Console 或者从 MobileFirst CLI 注册应用程序。

从 MobileFirst Operations Console

  1. 打开您偏爱的浏览器,通过输入 http://localhost:9080/mfpconsole/ URL 来装入 MobileFirst Operations Console。
  2. 单击应用程序旁边的新建按钮以创建新应用程序。
  3. 选择 Web 作为平台,并提供名称和标识。
  4. 单击注册应用程序

![添加 Web 平台(add-web-platform.png)

从 MobileFirst CLI

命令行窗口,浏览至 Web 应用程序的根文件夹,并运行命令:mfpdev app register

更新 MobileFirst Web SDK

可以在 SDK NPM 存储库中找到 SDK 发行版。
要使用最新发行版更新 MobileFirst Web SDK:

  1. 浏览至 Web 应用程序的根文件夹。
  2. 运行命令:npm update ibm-mfp-web-sdk

同源策略

如果将 Web 资源托管在未安装 MobileFirst Server 的服务器上,将触发同源策略违例。同源策略安全模型旨在防范来自未经验证的源的潜在安全威胁。根据此策略,浏览器允许 Web 资源(如脚本)仅与来自相同源(定义为 URI 方案、主机名和端口号的组合)的资源交互。有关同源策略的更多信息,请参阅 Web 源概念规范,特别是 3. 同源策略的原则

必须在支持拓扑中处理使用 MobileFirst Web SDK 的 Web 应用程序。例如,使用逆向代理在内部将请求重定向到相应的服务器,同时维护相同的单个源。

替换方法

您可以使用以下任何一种方法来满足策略需求:

  • 从 IBM MobileFirst Foundation Developer Kit 中所使用的同一个 WebSphere Application Server Liberty Profile 应用程序服务器提供 Web 应用程序资源。
  • 使用 Node.js 作为逆向代理将应用程序请求重定向到 MobileFirst Server。

设置 Web 开发环境教程中了解更多信息

安全源策略

当您在开发期间使用 Chrome 时,如果使用 HTTP 和 localhost 主机,那么浏览器可能不允许应用程序装入。这是因为,缺省情况下,在此浏览器中实施和使用安全源策略。

要解决此问题,可以使用以下标记启动 Chrome 浏览器:

--unsafely-treat-insecure-origin-as-secure="http://replace-with-ip-address-or-host:port-number" --user-data-dir=/test-to-new-user-profile/myprofile
  • 将“test-to-new-user-profile/myprofile”替换为充当新 Chrome 用户概要文件的文件夹的位置,以使标记起作用。

此 Chormium 开发人员文档中阅读有关安全源的更多信息。

接下来要学习的教程

集成 MobileFirst Web SDK 之后,您现在可以:

Last modified on July 03, 2017