Shopify与Angular自定义应用通信及用户标识传递实现疑问

方法一：直接在主题模板中添加动态按钮（最灵活） #

找到你想放置按钮的主题模板文件（比如snippets/header.liquid、templates/page.liquid或产品详情页模板），插入以下Liquid代码：

{% if customer %}
  <a href="https://generate-app/customer_id={{ customer.id }}&email={{ customer.email | url_encode }}" class="btn">跳转至自定义应用</a>
{% else %}
  <a href="/account/login" class="btn">请先登录</a>
{% endif %}

• {% if customer %} 用于判断用户是否已登录，Shopify会自动为登录用户填充customer对象
• customer.id 和 customer.email 直接调用Shopify内置的用户数据
• url_encode 过滤器对邮箱等含特殊字符的内容编码，避免URL参数解析错误
• 替换https://generate-app为你的Angular应用实际域名

方法二：用自定义HTML区块可视化添加（无需修改主题代码） #

如果不想直接编辑主题文件，可以通过Shopify后台可视化添加：

1. 进入Shopify后台 → 在线商店 → 主题 → 点击「自定义」
2. 定位到要添加按钮的页面/区域，点击「添加区块」→ 选择「自定义HTML」
3. 在编辑器中粘贴以下代码：

{% if customer %}
  <a href="https://generate-app/customer_id={{ customer.id }}&email={{ customer.email | url_encode }}" style="padding: 10px 20px; background: #008060; color: #fff; text-decoration: none; border-radius: 4px;">跳转至自定义应用</a>
{% else %}
  <a href="/account/login" style="padding: 10px 20px; background: #008060; color: #fff; text-decoration: none; border-radius: 4px;">请先登录</a>
{% endif %}

4. 保存设置后，登录状态下访问对应页面即可看到带参数的跳转按钮

注意事项 #

• 安全验证：URL传递的用户信息属于敏感数据，建议在Angular应用中调用Shopify API核对customer_id与email的匹配性，防止恶意参数注入
• 内嵌应用场景：如果你的Angular应用是嵌入在Shopify后台或店铺前端的，可使用Shopify App Bridge直接获取用户信息，无需通过URL传递，安全性更高

内容的提问来源于stack exchange，提问作者Joanthan Ahrenkiel-Frellsen