将 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

要添加 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.
    sessionMode : true //This is an optional paramter. Setting this to true ensures that MFP related data is stored in the session rather than in the local storage. If this option is set to false or not set at all, default is local storage.
};

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 平台

从 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 之后，您现在可以：

▲
Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.
Last modified on June 01, 2020