如何将 SmartyStreets 的 jQuery.LiveAddress 插件转换为其 JavaScript SDK？

Question

我有一个网站，其中实施了 jQuery.LiveAddress 插件，但它已被弃用，然后在 2014 年被 SmartyStreets 完全删除。

https://www.smartystreets.com/archive/jquery-plugin/website/configure

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//d79i1fxsrar4t.cloudfront.net/jquery.liveaddress/5.2/jquery.liveaddress.min.js"></script>
<script>var liveaddress = $.LiveAddress({
    key: "YOUR_WEBSITE_KEY_HERE",
    debug: true,
    target: "US|INTERNATIONAL",
    addresses: [{
        address1: '#street-address',
        locality: '#city',
        administrative_area: '#state',
        postal_code: '#zip',
        country: '#country'
    }]
});
</script>

现在有一个 JavaScript SDK：https://www.smartystreets.com/docs/sdk/javascript

const SmartyStreetsSDK = require("smartystreets-javascript-sdk");
const SmartyStreetsCore = SmartyStreetsSDK.core;
const Lookup = SmartyStreetsSDK.usStreet.Lookup;

// for Server-to-server requests, use this code:
// let authId = process.env.SMARTY_AUTH_ID;
// let authToken = process.env.SMARTY_AUTH_TOKEN;
// const credentials = new SmartyStreetsCore.StaticCredentials(authId, authToken);

// for client-side requests (browser/mobile), use this code:
let key = process.env.SMARTY_WEBSITE_KEY;
const credentials = new SmartyStreetsCore.SharedCredentials(key);

它说“对于客户端请求 (browser/mobile)，请使用此代码”，但我假设无法使此代码作为浏览器 JavaScript 工作是否正确？我不需要成为运行节点即服务器上的服务才能使用此代码吗？

Answer 1

客户端代码示例可以在浏览器中使用，而不仅仅是在节点中。您需要以不同的方式存储您的网站密钥，因为浏览器无法访问 process.env。您可以在此处以明文形式存储网站密钥，因为它将与您的主机名相关联。

您将需要使用某种库或 JS 捆绑器来处理您在第 1 行看到的 require 语句。例如，如果这更适合您的设置，您也可以导入 SDK，例如

import SmartyStreetsSDK from "smartystreets-javascript-sdk"

使用 SDK 与 jQuery 插件时需要记住的一点是，SDK 不在页面上提供 UI 元素。与 jQuery 插件相比，它的解决方案更少。您将需要设计和创建自己的 UI 元素供用户交互。

免责声明：我为 Smarty（以前称为 SmartyStreets）工作

Answer 2

我遇到了同样的问题，不幸的是 smarty streets 决定让用户更难实施他们的产品。

在我的搜索中，我发现了这个 fiddle，它没有 jquery 插件的所有功能，但它是一个很好的起点，不需要构建您的自己的建议UI.

<script async src="//jsfiddle.net/smartystreets/uptgh7c8/embed/"></script>

jsfiddle source

Answer 3

我丢失的关键文件是 SmartyStreets JavaScript SDK 中的 browserify.js 文件。

运行 npm install smartystreets-javascript-sdk --save-dev 在你项目的根目录
将目录更改为 node_modules/smartystreets-javascript-sdk
运行 npm install 在此目录中
运行 rm -rf dist && node browserify.js （如果 dist 文件夹存在，脚本将失败）
将 dist/smartystreets-sdk-1...min.js 复制到主项目的依赖项文件夹中。

我尝试编写一个 grunt 任务来获取 SmartyStreets SDK 并自动更新它，浏览器化它，并将它与我们网站的其余部分一起部署，但结果是时间太麻烦了给定的约束。如果其他人为此编写了 grunt 任务，请分享！

如何将 SmartyStreets 的 jQuery.LiveAddress 插件转换为其 JavaScript SDK？

How do I convert SmartyStreets' jQuery.LiveAddress plugin to its JavaScript SDK?

javascript

jquery

npm

smartystreets