Shopify Remix应用离线访问令牌权限更新及重定向问题求助

问题1：授权新增权限后令牌权限未更新、卸载后令牌仍存在的原因 #

• 离线访问令牌的权限是首次授权时固化的，Shopify不会自动为已生成的令牌追加新权限。即使你更新了Partners后台或TOML文件的权限列表，旧令牌的权限不会改变，必须让用户重新授权完整的权限列表才能生成带新权限的令牌。
• 卸载应用时，Shopify会标记该令牌为无效（无法再调用API），但不会主动删除你存储在自己应用数据库/session中的旧令牌记录；如果你的应用用了自定义存储，需要手动清理这些旧数据。

问题2：重定向授权失败的解决方法 #

你的代码直接在iframe内重定向到授权页面会触发Shopify的安全限制（管理后台iframe有X-Frame-Options保护），而且Shopify OAuth不支持追加权限，必须传递完整权限列表。以下是可行的方案：

正确的权限检测与授权流程 #

1. 传递完整权限列表：授权时必须传入所有需要的权限，而不是仅缺失的，因为Shopify OAuth是覆盖式授权，不是追加式。
2. 在顶级窗口打开授权页面：不能在应用的iframe内跳转，需要通过按钮让用户主动打开新窗口或顶级页面跳转。
3. 添加必要参数：必须包含grant_options[]=offline以请求离线令牌，同时添加state参数防止CSRF攻击。

Remix中实现的示例代码 #

// app/routes/app._index.tsx
import { json, redirect, LoaderArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

export async function loader({ request, context }: LoaderArgs) {
  const session = await context.shopify.session.getCurrent({ request });
  if (!session) {
    return redirect(`/auth?shop=${context.shopify.config.shop}`);
  }

  // 定义完整的所需权限列表
  const requiredScopes = [
    "read_products",
    "write_products",
    "read_orders",
    "write_orders",
    "read_customers",
    "write_customers",
  ];
  const currentScopes = session.scope.split(",").map(scope => scope.trim());
  const missingScopes = requiredScopes.filter(scope => !currentScopes.includes(scope));

  if (missingScopes.length > 0) {
    // 构建合规的授权URL
    const authUrl = new URL(`https://${session.shop}/admin/oauth/authorize`);
    authUrl.searchParams.set("client_id", process.env.SHOPIFY_API_KEY!);
    authUrl.searchParams.set("scope", requiredScopes.join(",")); // 传递完整权限
    authUrl.searchParams.set("redirect_uri", `${process.env.SHOPIFY_APP_URL}/auth/callback`);
    authUrl.searchParams.set("grant_options[]", "offline"); // 请求离线令牌
    authUrl.searchParams.set("state", crypto.randomUUID()); // CSRF防护

    return json({
      needsReauth: true,
      authUrl: authUrl.toString(),
    });
  }

  return json({ needsReauth: false });
}

export default function AppIndex() {
  const { needsReauth, authUrl } = useLoaderData<typeof loader>();

  if (needsReauth) {
    return (
      <div style={{ padding: "2rem", textAlign: "center" }}>
        <p>应用权限不足，请重新授权以继续使用。</p>
        <button
          onClick={() => window.open(authUrl, "_top")} // 在顶级窗口打开授权页面
          style={{ padding: "0.8rem 1.5rem", fontSize: "1rem", cursor: "pointer" }}
        >
          重新授权
        </button>
      </div>
    );
  }

  // 正常应用页面内容
  return <div>应用主界面</div>;
}

问题3：旧离线令牌永久存在的处理 #

• Shopify端：当用户重新授权生成新的离线令牌后，旧令牌会被Shopify自动撤销有效性，无法再调用API，无需额外操作。
• 应用存储端：你需要在用户完成新授权后，用新的session/令牌覆盖旧的记录；如果用的是Shopify Remix模板的内置session存储，新授权会自动替换旧session；如果是自定义存储，需要手动清理旧数据。

额外注意事项 #

• 确保Partners后台配置的redirect_uri和代码中使用的完全一致（包括协议、域名、路径）。
• 测试时可以先彻底卸载应用，清理浏览器缓存，再重新安装授权，避免旧session干扰。

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