如何在Shopify管理中验证您的嵌入式应用程序

乍一看，开发一款服务Shopify商家的应用程序可能会让人望而生畏——首先，你需要这么做识别问题商人们需要解决这个问题。接下来，你需要理解你的应用将如何解决这个问题。然后你需要选择你的技术栈，设计界面，从头开始构建整个东西。这可能需要大量的工作，因此使用正确的资源和库对您的成功至关重要。

在Shopify，我们希望帮助我们的合作伙伴更快地构建和发布应用程序。我们一直在努力创建一个端到端的教程，用Node和React构建嵌入式应用程序，React是当今发展最快的技术堆栈之一。你可以点击进入整个教程，或深入了解构建Shopify应用程序的一个方面:在Shopify管理中嵌入您的应用程序。

在本文中，我们将使用Shopify的koa-auth包来设置用于身份验证的服务器文件。Koa中间件为您处理了大部分繁重的工作，并使您更快、更少麻烦地嵌入。让我们来看看如何使用节点，洋槐和ngrok为了地方发展。

请记住，本文只介绍在开发过程中设置节点服务器和为本地主机创建隧道的情况。本文中的代码不会为应用程序的前端和后端提供脚手架，也不会提供完整的服务器。幸运的是，我们已经解决了这个问题!如果你想一步一步地了解构建嵌入式应用程序的过程，请前往完整的教程。

使用ngrok进行本地开发

在Shopify生态系统中，嵌入式应用程序在生产环境中的iframe中运行。为了在开发过程中测试应用的功能，你需要将本地运行的内容传输到一个可访问的URL。这就是ngrok的用武之地。

Ngrok是一种云服务，它接受公共地址上的流量，然后将该流量转发到在您的机器上运行的ngrok进程，再转发到您指定的本地地址。这使您能够在继续开发的同时将用户发送到此URL。

假设你正在开发一个全栈应用程序，运行在localhost:3000上，继续在命令行上安装ngrok:

NPM安装ngrok -g

安装完成后，让ngrok在端口3000上创建一个隧道:

Ngrok HTTP 3000

一旦运行，它应该看起来像这样:

现在，如果你去https由ngrok提供的URL，它应该会显示在端口3000上本地运行的任何内容。

你可能还喜欢:Shopify GraphQL学习工具包。

创建一个新的应用程序

要为Shopify生态系统开发应用程序，你需要两样东西:

1. 一个Shopify伙伴账户
2. 一个开发存储

Shopify合作伙伴可以通过他们的合作伙伴仪表板创建开发商店，用于测试目的。开发商店是免费的，没有时间限制，并提供与Advanced Shopify计划相同的大部分功能，因此您可以在工作时测试您的应用程序。

要调用身份验证中间件，您需要您的Shopify API密钥和Shopify API秘密。

1. 在您的合作伙伴仪表板中，单击应用程序。
2. 点击创建应用程序。
3. 从您的ngrok终端选项卡中复制转发URL的HTTPS版本。
4. 给你的应用起一个名字，比如示例嵌入式应用程序。
5. 将您的ngrok转发URL的HTTPS版本粘贴到应用程序的URL字段。
6. 将相同的HTTPS转发URL粘贴到重定向白名单URL字段并添加/认证/回调走到小路的尽头。
7. 点击创建应用程序。

如果你还没有开发商店，现在是建立一个的好时机。

1. 在您的合作伙伴仪表板中，单击开发商店在左边。
2. 单击创建存储按钮。

为您的商店指定一个名称，并填写其余字段。

在我们讨论url的时候，了解一下什么是规范的URL是什么以及为什么它们如此重要。

创建您的服务器

现在你已经设置了你的应用程序，你可以设置你的服务器。如前所述，我们将使用koa-middleware在此节点服务器中。Koa是我们在Shopify内部使用的一个中间件框架，因为它既轻量级又模块化。的koa-shopify-auth包通过为安装和回调创建路由并处理HMAC验证来处理大多数开箱即用的身份验证过程。

需要注意的一点是，这个包使用获取来针对Shopify的api发出请求，因为一些旧版本的节点不支持这些api。为了避免任何问题，您将安装一个名为isomorphic-fetch，即polyfills。获取给你。

要开始安装OB欧宝娱乐APP洋槐，@shopify / koa-shopify-auth，koa-session,isomorphic-fetch在命令行中:

NPM install——save koa @shopify/koa-shopify-auth koa-session isomorphic-fetch

在你的服务器文件中(在我们的例子中，server.js)，设置你的导入:

对于本例，我们将通过硬编码API密钥和API密钥来设置中间件。顾名思义，这些密钥是秘密的，不应该硬编码在服务器中或保存在基于云的服务中。在本教程中，我们将详细介绍设置.env文件来安全地存储您的密钥。

设置好密钥后，你可以设置应用的实例，并使用密钥调用shopify-koa-auth库:

的koa-shopify-auth图书馆提供shopifyAuth函数。这个函数需要你的API密钥和秘密，以及你的应用程序将需要发出请求的作用域。它使用应用程序的会话从响应中获取商店名称和访问令牌。

注意，为了便于说明，这个例子console.logs您的访问令牌。这对于学习目的来说是很好的，但不是任何人都想为生产应用程序做的事情。

Shopify-koa-auth还提供了verifyRequest中间件也是我们在指南中使用的一个例子。它使您能够重定向未经过身份验证的用户。

至此，您有了一个非常简单的服务器，它可以为您进行身份验证。Koa包使用auth/回调路由进行身份验证，这就是为什么你会在应用程序中将其设置为Partner Dashboard中的回调路由的原因。

如果您的应用程序在本地主机上运行，那么您可以前往https://YOURNGROKURL/auth?shop=YOURTESTSTORE.myshopify.com来验证你的应用程序。如果成功，你会看到一个屏幕，要求安装应用程序的权限，并列出你在shopifyAuth中间件。

这就是为什么只要求你真正需要的许可是如此重要。把自己放在一个被要求获得这些权限的商人的位置上——只要求你的应用需要什么，并清楚地说明你为什么需要这些权限。

你可能还喜欢:如何在一周内建立一个Shopify应用程序。

更快地构建应用程序

此中间件为您处理大量逻辑，保持服务器文件整洁，并提供经过实战测试的内部使用工具，帮助您更快地解决商业问题。既然你已经在Shopify管理中嵌入了你的应用，你就可以开始测试你的UI并构建你的应用，因为你知道你看到的正是你的商家会看到的。OB欧宝娱乐APP

如果您对内部开发的其他Javascript包感到好奇，请查看在GitHub上的被子。如果你想使用其中一些包在JavaScript中编写和构建应用程序，请查看我们的完整教程。