Next.js+Wix Studio电商站服务端OAuth令牌获取失败求助

错误原因 #

报错核心是Failed to fetch tokens from OAuth API: Bad Request，说明你在服务端使用OAuthStrategy处理匿名访客请求是错误的。OAuthStrategy用于用户授权登录场景，无需登录的匿名访问应该使用Wix SDK提供的AnonymousStrategy，否则会因令牌获取逻辑不匹配导致请求失败。同时你的客户端未处理匿名令牌的自动持久化，服务端也未正确初始化匿名客户端，进一步导致令牌无效。

修复步骤 #

1. 替换认证策略为AnonymousStrategy #

修改客户端和服务端的Wix Client配置，将OAuthStrategy替换为AnonymousStrategy，并添加令牌持久化逻辑。

客户端Wix Client配置修改：

"use client"
 
import { createClient, AnonymousStrategy } from "@wix/sdk";
import { products, collections} from "@wix/stores";
import Cookies from "js-cookie"
import { createContext, ReactNode, useEffect } from "react";

const WixClient = createClient({
  modules: { 
    products,
    collections,
  },
  auth: AnonymousStrategy({
    siteId: process.env.NEXT_PUBLIC_WIX_SITE_ID!, // 添加你的Wix站点ID到环境变量
    authDomain: process.env.NEXT_PUBLIC_WIX_AUTH_DOMAIN!, // 例如: "your-site.wixsite.com"
    tokens: {
      refreshToken: Cookies.get("anonymousRefreshToken") || undefined,
    },
  }),
});

// 监听令牌变化，自动保存到Cookie
useEffect(() => {
  const unsubscribe = WixClient.auth.onTokenChanged((tokens) => {
    if (tokens.refreshToken) {
      Cookies.set("anonymousRefreshToken", tokens.refreshToken, {
        expires: 30, // 有效期30天
        path: "/",
      });
    }
  });

  return unsubscribe;
}, []);

export type WixClient = typeof WixClient;
export const WixClientContext = createContext<WixClient>(WixClient);

interface WixClientProviderProps {
  children: ReactNode;
}

export const WixClientContextProvider: React.FC<WixClientProviderProps> = ({ children }) => {
  return (
    <WixClientContext.Provider value={WixClient}>
      {children}
    </WixClientContext.Provider>
  );
};

服务端Wix Client配置修改：

import { AnonymousStrategy, createClient } from "@wix/sdk";
import { collections, products } from "@wix/stores";
import { cookies } from "next/headers";

export const wixClientServer = async () => {
  const cookieStore = await cookies();
  const refreshToken = cookieStore.get("anonymousRefreshToken")?.value;

  const wixClient = createClient({
    modules: {
      products,
      collections,
    },
    auth: AnonymousStrategy({
      siteId: process.env.NEXT_PUBLIC_WIX_SITE_ID!,
      authDomain: process.env.NEXT_PUBLIC_WIX_AUTH_DOMAIN!,
      tokens: {
        refreshToken: refreshToken || undefined,
      },
    }),
  });

  return wixClient;
};

2. 添加环境变量 #

在.env.local文件中补充Wix站点配置：

NEXT_PUBLIC_WIX_SITE_ID="你的Wix站点ID"
NEXT_PUBLIC_WIX_AUTH_DOMAIN="你的Wix站点域名（例如: your-site.wixsite.com）"

3. 验证商品列表组件 #

你的ProductList组件逻辑无需修改，确保categoryId参数正确传递即可。

关键说明 #

• AnonymousStrategy专门用于匿名访客访问，会自动生成并维护匿名令牌，无需用户登录。
• 客户端通过onTokenChanged监听令牌更新，自动将refreshToken保存到Cookie，实现状态持久化。
• 服务端从Cookie读取refreshToken，初始化客户端时传入，确保请求携带有效身份信息。

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