如何在Shopify商店页面调用Create Customer Admin API及POST请求异常排查

嘿，这个问题我之前帮人处理过——你遇到的核心问题是Shopify Admin API绝对不能直接在前端浏览器中调用，这是Shopify的安全机制决定的：

Admin API需要使用带有高权限的API密钥和密码，直接把这些凭证写在前端代码里会导致严重的安全泄露；同时Shopify的服务器会拦截前端发起的Admin API POST请求，返回“Please login to shopify”的提示就是这个原因（GET请求能临时运行只是特例，同样不推荐）。

下面给你两个可行的解决方案：

方案1：用自己的后端做API代理 #

这是最稳妥的方式，把前端请求转发到你的后端服务器，由后端使用Admin API凭证去调用Shopify接口，避免凭证暴露。

后端示例（Node.js/Express） #

const express = require('express');
const axios = require('axios');
const app = express();

// 解析JSON请求体
app.use(express.json());

// 接收前端的创建顾客请求，转发到Shopify Admin API
app.post('/proxy-create-customer', async (req, res) => {
  try {
    const shopifyResponse = await axios.post(
      // 替换成你的商店域名和API版本
      'https://your-shop-name.myshopify.com/admin/api/2024-07/customers.json',
      req.body,
      {
        // 替换成你的Admin API密钥和密码
        auth: {
          username: 'YOUR_ADMIN_API_KEY',
          password: 'YOUR_ADMIN_API_PASSWORD'
        }
      }
    );
    res.json(shopifyResponse.data);
  } catch (error) {
    // 转发Shopify的错误响应
    res.status(error.response?.status || 500).json(error.response?.data || { message: 'Server error' });
  }
});

app.listen(3000, () => console.log('代理服务器运行在端口3000'));

前端修改 #

把原来直接调用Shopify Admin API的代码，改成请求你的后端代理接口：

<script>
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    var customerData = {
      'customer': {
        'first_name': 'Sw',
        'last_name': 'Lastnameson',
        'email': 'steve.lastnameson@example.com',
        'phone': '+15142546011',
        'verified_email': true
        // 其他字段...
      }
    };
    jQuery.post({
      url: '/proxy-create-customer', // 你的后端接口地址
      data: customerData,
      success: function(response) {
        console.log('顾客创建成功:', response);
      },
      error: function(error) {
        console.error('创建失败:', error);
      }
    });
  });
});
</script>

方案2：使用Shopify Storefront API（更适合前端场景） #

如果你只是需要在前端创建普通顾客账户，Storefront API是专门为前端设计的，不需要Admin级别的权限，安全性更高。

前端示例（GraphQL请求） #

首先在Shopify后台生成Storefront API访问令牌（路径：Online Store → Preferences → Storefront API），然后使用以下代码：

<script>
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    // GraphQL查询语句
    const createCustomerQuery = `
      mutation customerCreate($input: CustomerCreateInput!) {
        customerCreate(input: $input) {
          customer {
            id
            firstName
            lastName
            email
          }
          userErrors {
            field
            message
          }
        }
      }
    `;

    // 请求变量
    const variables = {
      input: {
        firstName: 'Sw',
        lastName: 'Lastnameson',
        email: 'steve.lastnameson@example.com',
        phone: '+15142546011',
        acceptsMarketing: true // 注意字段和Admin API略有差异
      }
    };

    jQuery.post({
      url: '/api/2024-07/graphql.json', // 固定的Storefront API路径
      headers: {
        'Content-Type': 'application/json',
        // 替换成你的Storefront API令牌
        'X-Shopify-Storefront-Access-Token': 'YOUR_STOREFRONT_TOKEN'
      },
      data: JSON.stringify({ query: createCustomerQuery, variables }),
      success: function(response) {
        if (response.data.customerCreate.userErrors.length === 0) {
          console.log('顾客创建成功:', response.data.customerCreate.customer);
        } else {
          console.error('错误:', response.data.customerCreate.userErrors);
        }
      },
      error: function(error) {
        console.error('请求失败:', error);
      }
    });
  });
});
</script>

额外注意事项 #

• 如果用方案1，确保你的Admin API凭证拥有write_customers权限（在Shopify后台的App设置中查看）。
• 始终使用Shopify最新的API版本（比如2024-07），避免旧版本的兼容性问题。

内容的提问来源于stack exchange，提问作者Abhijit