使用 Meteor 快速开发 Web 应用程序（3）提高 Sales Portal 的访问安全
|
- UID
- 1066743
|
使用 Meteor 快速开发 Web 应用程序（3）提高 Sales Portal 的访问安全
提高 Sales Portal 的访问安全目前为止，任何拥有 Sales Portal URL 的人都可看到甚至更改销量数据。尽管这对实际用例而言权限太宽松了，但 Meteor 所支持的默认原型模式是您应用程序最初快速发展的理想选择。在此阶段，您可在快速迭代过程中修改交互、UI 甚至是应用程序逻辑，这通常不会涉及任何敏感数据。在拥有原型设计阶段的开放访问模型下，您能够与协作开发人员和审核用户共享该 URL，从而收集反馈。
下一个自然步骤是打开 Meteor 的安全特性，锁定应用程序。Sales Portal 的一个安全得多（因此更符合实际）的版本的代码可在 部分的 sales 子目录中找到。它添加的安全特性包括：
Meteor Smart PackagesSmart Package 是一种功能模块，您可通过命令行在 Meteor 中轻松地添加或删除它们。一个 Smart Package 可包括服务器端和客户端代码、UI、API 等。在本文中可看到 accounts 、autopublish 和 insecure 的示例。也可通过添加 Smart Package 来添加 CoffeeScript 支持、URI 路由和许多其他特性。要查看针对您使用的 Meteor 版本的最新的 Smart Package 列表，可运行 meteor list 命令。
- 一个用于身份验证系统，仅允许授权的用户访问门户
- 确保仅一个地区的销量数据的官方所有者可修改该数据的代码
- 更好的源代码组织，用于确保没有向部署的客户端公开服务器端代码
从现在开始，我所指的 Sales Portal 应用程序都是 sales 目录中的安全版本。
删除客户端修改服务器数据的能力锁定应用程序的一个不错起点是阻止任何人修改该数据。在这种情况下，您需要做的是使用以下命令删除 insecure Smart Package：
基本上，insecure Smart Package 会告诉服务器在读取或更改数据之前不要检查访问规则。这个 Smart Package 默认情况下已经安装，它允许进行所有访问。删除它之后，任何客户端都不可以修改任何服务器数据。如果回到某个浏览器实例并尝试修改任何销量数据，您会注意到，虽然应用程序会尝试更改该数据，但它很快会撤销此操作，这反映了来自服务器的拒绝访问。（这是 的一个实际应用示例。该数据会在客户端中更新片刻，但一旦经过授权的服务器副本到达，就会覆盖客户端的数据。）
删除 insecure 包之后，您必须添加访问规则来显式允许（特定用户）访问特定的数据片段。但目前还没有用户。接下来必须添加一个用户数据库和登录授权系统。
确保只有授权的用户才能查看销量数据添加用户授权系统之前，确保没有人可以看到销量数据。（授权的用户被允许在以后看到它。）现在，即使他们无法修改该数据，仍然可通过访问 Sales Portal URL 来查看它。
删除默认的 autopublish Smart Package，预防任何 Meteor 集合数据从服务器发布到客户端（除了服务器显式发布的数据和客户端显式订阅的数据）：
1
| meteor remove autopublish
|
如果现在访问 Sales Portal URL，地区销量数据和饼图是不可见的。
通过 accounts Smart Package 添加用户登录名 Meteor 提供了 Smart Package 来简化用户登录和授权系统的添加。accounts Smart Package 涵盖端到端工作流；它包含所需的前端 UI、后端数据库和客户端到服务器 API。您可以使用一个命令将所有这些特性添加到 Sales Portal：
1
| meteor add accounts-password accounts-ui
|
account-password Smart Package 支持通过熟悉的电子邮件地址加密码的登录方式来创建用户和登录名。该实现使用了 Secure Remote Password 协议（参阅 ），明文密码绝不会在客户端与服务器之间发送。
除了基于密码的登录，也可让用户通过 Facebook、Twitter、微博、GitHub、Google 和 Meetup 登录，只需向应用程序添加一个或多个 Smart Package 即可。社交网络 OAuth 的登录支持目前在企业内部网环境中可能不是很有用，但这些特性对面向消费者的 Web 或移动应用程序很有价值。
自定义用户登录 UI如果希望进一步控制 UI 小部件中使用的对话框的样式，可添加 accounts-ui-nostyle 包来代替 accounts-ui 包。如果希望完全接管 UI，请参阅 Meteor 文档中对用于该流程的 API 和数据流的描述（参见 ）。
用于登录的插入式 UIaccounts-ui 包提供了一组预先构建的 CSS 样式的 UI 小部件（和支持性 JavaScript 代码），以处理用户登录、新用户创建和密码丢失恢复。要添加它们，可添加 {{loginButton}} Handlebars 帮助器。清单 5 显示了添加到 Sales Portal 应用程序的 sales/sales.html 文件中的登录系统：
清单 5. 添加一个用户登录和授权系统1
2
3
4
5
6
7
8
9
10
11
| <body>
<div id="title">
<div class="header">
<div class="span5">
<h1 style="margin-bottom: 0px">Sales Portal</h1>
</div>
<div class="span5"> <div style="float: right">
{{loginButtons align="right"}} </div>
</div>
</div>
</div>
|
代码 中的 sales 目录包含具有用户访问控制权的已完成的 Sales Portal 应用程序。可运行此版本来尝试登录。启动一个浏览器实例，请注意，现在右上角有一个 Sign in链接。单击它就会看到如图 5 所示的对话框：
图 5. 来自 accounts-ui Smart Package 的登录对话框（在 Firefox 中显示） accounts Smart Package 使用 Meteor 集合和发布 - 订阅（您也可以在子集的代码中手动使用相同的工具）来实现用户数据库。在当前的 Sales Portal 版本中，我在该数据库中创建了两组用户凭据，如表 1 所示：
表 1. 现有的 Sales Portal 用户凭据电子邮件密码joe@dwtestonly.comabc123sing@dwtestonly.comabc123
打开两个浏览器实例并分别使用一个凭据登录。
可单击 Sign in对话框中的 Create account链接创建更多用户。图 6 显示了 accounts-ui Smart Package 中包含的创建新用户的对话框：
图 6. accounts-ui Smart Package 中创建新用户帐户的对话框（在 Chrome 中显示） 向地区销量数据添加 owner 字段在当前的 Sales Portal 版本中，最初的数据库内容已被修改。我使用了清单 6 中的服务器端代码来提供该数据：
清单 6. 服务器端数据提供代码1
2
3
4
5
| Sales2013.remove({});
Sales2013.insert({region:"US East", total: 2032333});
Sales2013.insert({region:"US Central", total: 150332, owner: joe._id});
Sales2013.insert({region:"US West", total: 1202412});
Sales2013.insert({region:"Asia Pacific", total: 701223});
|
将一个新 owner 字段添加到 中。在本例中，owner 字段包含拥有 US Central 地区数据的用户的 userId (joe@dwtestonly.com)。这个字段用于将地区销量数据更新仅限制在 joe@dwtestonly.com。可查询 Meteor.users 集合来获取 userId 的值。 |
|
|
|
|
|
