如何在 React-Native 或 JavaScript 中实现 Shopify - 客户登录？

Question

我正在使用 Shopify 开发 React-Native 应用程序。 在此应用程序中，客户（将购买产品的人）是唯一的目标用户。

我想为客户实现登录机制，但找不到同样的 Shopify API。

我已经完成了Storefront API和Customer API

你能在这里指导我吗？

谢谢。

Answer 1

Shopify 提供了客户登录路径，因此您只需将其连接起来即可。 无需重新发明轮子。 检查任何现有的 Shopify 主题以获得灵感。 不需要任何 API 调用。

Answer 2

我得到了解决方案。

先决条件：

• 在集成 Shopify 客户登录信息时，该客户必须在 Shopify 中拥有一家商店/商店。
• 此外，由于没有任何特定支持为移动应用程序创建 Shopify 应用程序，后端应集成 Shopify 应用程序并将重定向 URL 提供给前端。

脚步：

1. 我创建了一个 Shopify Connect 按钮，如果用户点击它，我们应该要求用户输入 Shopify 商店/商店名称（此商店/商店名称是必需的）。
2. 一旦用户填写商店/商店名称并点击提交按钮，我就会调用我的后端 API，它在响应中给我一个回调 URL （这是一个Shopify URL 。这个 Shopify URL 以https://${shop_name}.myshopify.com并且此 URL 还包含一些具有 redirect_uri 的查询参数）。
3. 然后我在 Webview ( RN Webview )上调用了整个回调 URL 。
4. 如果 Shopify 中列出了相应用户的商店/商店名称，则用户将看到 Shopify 登录页面。 然后用户可以登录并允许我的应用程序访问该特定用户的 Shopify 详细信息。
5. 用户身份验证完成后，Shopify 会调用重定向 URL （我们必须在创建 Shopify 应用程序时将此 URL 列入白名单）。 我们已将后端的 HTML 页面 URL 指定为重定向 URL，以显示成功或失败消息。 此外，此重定向 URL 与我在步骤 2 中回调 URL 的查询参数中获得的 redirect_uri 相同（前提是查询参数被忽略）。
6. 现在在RN Webview 中，每当 Webview 的状态发生更改时，都会调用一个道具 onNavigationStateChange 。 使用这个道具，我发现 Shopify Authentication 已经完成，Webview 的 URL 现在更改为 Redirection URL （即 redirect_uri）。
7. 一旦我发现 Webview 的 URL 与重定向 URL 相同（前提是查询参数被忽略），我将 Webview 显示了 3-5 秒（Webview 上的成功或失败屏幕），然后我弹出了 Webview 屏幕来自 React 导航堆栈。
8. 弹出 Webview 屏幕后，我调用了我的后端 API 来检查用户的 Shopify 集成状态，因此我显示了警报消息。

这是我和我的团队使用 React Native 和 Python 成功集成的 Shopify 集成的一个正常工作示例。

Answer 3

使用 customerAccessTokenCreate 突变，当您将登录凭据作为输入传递时，它将为您提供访问令牌。 这实际上就像登录 api 一样工作。 这是链接https://shopify.dev/docs/storefront-api/reference/mutation/customeraccesstokencreate?api[version]=2020-04