我正在构建一个聊天仪表板和小部件，客户应该能够将小部件放入他们的页面中。一些类似的例子是 Intercom或 Drift .

目前，“主”应用程序是用 Meteor.js 编写的(它的前端是 React)。我写了一个<Widget />组件并将其放入 /widget 中目录。在这个目录中，我还有一个 index.jsx文件，其中仅包含以下内容:

import React from 'react';

import ......

ReactDOM.render(
  <Widget/>,
  document.getElementById('widget-target')
);

然后我设置一个 webpack 配置，入口点在 index.jsx当 webpack 运行时吐出一个 bundle.js在公共(public)目录中。

然后可以通过简单地包含 script 将其包含在另一个页面上和 div :

<script src="http://localhost:3000/bundle.js" type="text/javascript"></script>
<div id="widget-target"></div>

几个问题:

1. 这个实现有什么问题？他们有什么安全问题需要注意吗？前面链接的两个示例似乎都以一种或另一种形式使用了 iframe。
2. 与我的主要 meteor 应用程序通信的最佳方式是什么？一个 REST API？使用 Socket.io 发出事件？该小部件是一个聊天小部件，因此我需要来回发送消息。
3. 如何为用户和小部件实现某种唯一标识符/用户身份验证？目前，小部件是预编译的。

最佳答案

1 这个实现有什么问题？他们有什么安全问题需要注意吗？前面链接的两个示例似乎都以一种或另一种形式使用了 iframe。

正如@JeremyK 提到的，您在 iFrame 中更安全。话虽如此，许多第三方(Facebook、GA 等)都在使用中间路线，包括 Intercom:

• 要求用户将您的捆绑代码集成到他们的网页中。然后由您来确保您不会在他们的网站上引入安全漏洞。这段代码会做两件事:
• 注意设置一个 iframe，您的服务的主要部分将在其中进行。您可以对其进行定位、设置样式等。这可确保 iframe 中发生的所有逻辑都是安全的，您不会暴露。
• 使用窗口消息传递在您的客户网页和 iframe 之间公开一些 API。
• 主要代码(iframe 代码)然后由第一个脚本异步加载，而不是包含在其中。

例如 Intercom 要求客户在他们的页面上包含一些脚本:https://developers.intercom.com/docs/single-page-app#section-step-1-include-intercom-js-library那很小( https://js.intercomcdn.com/shim.d97a38b5.js )。这会加载额外的代码来设置 iFrame 并公开 their API这将使与 iFrame 的交互变得容易，例如关闭它、设置用户属性等。

2 与我的主要 meteor 应用程序通信的最佳方式是什么？一个 REST API？使用 Socket.io 发出事件？该小部件是一个聊天小部件，因此我需要来回发送消息。

您有三个选择:

• 将您的小部件构建为一个完整的 Meteor 应用程序。这将增加需要加载的代码的大小。作为额外代码的交换，您可以通过 Meteor API 与后端通信，例如 Meteor.call ，获取所有数据的 react 性(例如，如果您通过主 Meteor 应用程序向用户发送响应，只要它们在同一个数据库上，响应就会在客户端弹出，无需执行任何操作(不需要在同一台服务器上))和乐观的用户界面。简而言之，您在这里拥有 Meteor 提供的所有功能，并且它可能会更容易与我认为是 Meteor 的现有后端集成。
• 不包括 Meteor。由于您正在构建聊天应用程序，因此您可能需要 socket.io 而不是传统的 REST API。当然，您可以将两者结合起来
• 使用Meteor DDP . (它有点像 socket.io，但对于 Meteor。Meteor 应用程序将它用于对服务器的所有请求)这将包含比完整的 Meteor 更少的东西，并且可能比 REST API/更容易集成到你的 Meteor 后端>socket.io，并且将对完整的 Meteor 进行一些额外的工作。

3 如何为用户和小部件实现某种唯一标识符/用户身份验证？

这部分可能应该在客户网站(相对于您的 iframe)上做一些工作，以便您可以在他的页面上设置 cookie，并将该数据发送到您的 iframe，该 iframe 将与您的服务器对话并识别用户。您是否使用 artwells:accounts-guest(基于 meteor:accounts-base)将取决于您是否决定在您的 iframe 中包含 Meteor。

如果您的 iframe 中没有 Meteor，您可以执行以下操作:

• 自己处理用户创建，只需在您的服务器上执行即可

.

const token = createToken();
Users.insert({ tokens: [token] });
// send the token back to your iframe
// and set is as a cookie on your customer website

• 然后对于每次调用您的服务器，在您的 iframe 上:

.

let token;
const makeRequest = async (request) => {
    token = token || getCookieFromCustomerWebsite();
    // pass the token to your HTTP / socket.io / ... request.
    // in the header of whatever
    return await callServer(token, request);
};

• 在服务器中有一个设置用户的中间件。我的看起来像:

.

const loginAs = (userId, cb) => {
  DDP._CurrentInvocation.withValue(new DDPCommon.MethodInvocation({
    isSimulation: false,
    userId,
  }), cb);
};

// my middleware that run on all API requests for a non Meteor client
export const identifyUserIfPossible = (req, res, next) => {
  const token = req.headers.authorization;
  if (!token) {
    return next();
  }
  const user = Users.findOne({ tokens: token });
  if (!user) {
    return next();
  }

  loginAs(user._id, () => {
    next();
    // Now Meteor.userId() === user._id from all calls made on that request
    // So you can do Meteor.call('someMethod') as you'd do on a full Meteor stack
  });
};

关于javascript - 与 Web 小部件通信 - Meteor、React、Node，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40967758/