如何让Shopify嵌入应用API页面免登录获取code与Shop会话？

核心问题分析 #

当前代码中authenticate.admin(request)会强制校验Shopify Admin会话，若请求未携带有效会话，会直接重定向到店铺登录页，导致无法先获取第三方传入的code参数。解决的核心是先捕获code，再处理会话验证，避免会话校验的自动跳转拦截参数获取。

方案1：使用optional选项跳过强制跳转，先存code再引导登录 #

修改loader逻辑，通过authenticate.admin的optional参数，让无会话时不自动跳转，而是先保存code，再引导用户完成Shopify登录，登录后再取出code处理业务：

export async function loader({ request }) {
    // 使用optional=true，无会话时返回session=null，不自动跳转
    const { session } = await authenticate.admin(request, { optional: true });
    const url = new URL(request.url);
    const code = url.searchParams.get("code");

    if (code) {
        if (session) {
            // 已有有效会话，直接处理code逻辑
            const { shop } = session;
            // 你的业务逻辑...
            return new Response(JSON.stringify({ status: "success", shop, code }), { status: 200 });
        } else {
            // 无会话，将code存入Cookie（或Redis等临时存储），再重定向到Shopify登录页
            const loginRedirect = redirect("/api/auth/admin");
            loginRedirect.headers.set(
                "Set-Cookie",
                `third_party_code=${code}; Path=/; HttpOnly; Secure; SameSite=Lax`
            );
            return loginRedirect;
        }
    } else {
        // 登录完成后回到该路由，检查是否有存储的code和有效会话
        if (session) {
            const cookies = request.headers.get("Cookie");
            const storedCode = cookies?.split("; ").find(row => row.startsWith("third_party_code="))?.split("=")[1];
            if (storedCode) {
                const { shop } = session;
                // 处理code逻辑...
                // 处理完清除临时Cookie
                const response = new Response(JSON.stringify({ status: "success", shop, code: storedCode }), { status: 200 });
                response.headers.set("Set-Cookie", "third_party_code=; Path=/; Max-Age=0");
                return response;
            }
        }
        return new Response(JSON.stringify({ error: "No code provided" }), { status: 400 });
    }
}

方案2：手动处理会话逻辑，绕过自动跳转 #

不直接使用authenticate.admin的自动校验，手动获取会话，先捕获code再引导登录：

import { getSession, commitSession } from "../shopify.server"; // 替换为你的shopify配置路径

export async function loader({ request }) {
    const url = new URL(request.url);
    const code = url.searchParams.get("code");
    const shopParam = url.searchParams.get("shop"); // 让第三方重定向时携带shop参数

    if (!code) {
        return new Response(JSON.stringify({ error: "No code provided" }), { status: 400 });
    }

    // 手动获取会话，不触发自动跳转
    const session = await getSession(request.headers.get("Cookie"));
    if (session?.shop) {
        // 有有效会话，处理业务逻辑
        // 你的业务代码...
        return new Response(JSON.stringify({ status: "success" }), { status: 200 });
    } else {
        // 无会话，将code存入会话，重定向到Shopify登录页
        session.set("third_party_code", code);
        const sessionCookie = await commitSession(session);
        return redirect(`/api/auth/admin?shop=${shopParam || "your-default-shop.myshopify.com"}`, {
            headers: { "Set-Cookie": sessionCookie }
        });
    }
}

之后在Shopify登录回调路由（如/api/auth/admin/callback）中，取出会话里的third_party_code继续完成业务逻辑。

方案3：让第三方重定向时携带Shop域名参数 #

要求第三方在重定向时，除了code外同时携带shop参数（格式：your-shop.myshopify.com），这样在无会话时，登录重定向可以直接使用该参数，避免用户手动输入店铺域名，提升流程流畅度。

第三方重定向示例：

https://xxxxx.com/api/access?code=MY-CODE&shop=your-shop.myshopify.com

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