使用Instagram API登录重定向失效，遇1357004及Invalid platform app错误

问题现象 #

点击认证按钮调用initiateOAuth方法后，用户跳转至Instagram登录页，但登录后无法重定向回原页面，控制台会出现以下两种错误之一：

DTSG response is not valid: {"__ar":1,"error":1357004,"errorSummary":"Sorry, something went wrong","errorDescription":"Please try closing and re-opening your browser window.","isNotCritical":1,"rid":"Abzoh9kM1lZ197XHXJWOVJd","payload":null,"lid":"7533722085775331078"}

或：

Invalid request: Request parameters are invalid: Invalid platform app

已确认重定向URI配置正确，使用Instagram App ID而非Facebook App ID，尝试过清除Cookie、使用无痕标签页等操作，问题仍未解决。

相关代码片段 #

Instagram API封装类 #

class InstagramAPI {
  private accessToken: string | null = null;
  private baseUrl = "https://graph.instagram.com";

  constructor() {
    // Check if we have a stored access token
    if (typeof window !== "undefined") {
      this.accessToken = localStorage.getItem("instagram_access_token");
    }
  }

  // OAuth flow - redirect to Instagram authorization
  initiateOAuth() {
    // Remove any existing access token
    if (typeof window !== "undefined") {
      localStorage.removeItem("instagram_access_token");
    }

    const clientId = process.env.NEXT_PUBLIC_INSTAGRAM_CLIENT_ID;
    const redirectUri = encodeURIComponent(
      window.location.origin + "/auth/instagram/callback",
    );
    const scope = "user_profile,user_media";

    console.log("OAuth Params:", { clientId, redirectUri, scope });

    if (!clientId) {
      throw new Error("Instagram Client ID not configured");
    }

    const authUrl = `https://api.instagram.com/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=code`;
    console.log("Redirecting to Instagram OAuth URL:", authUrl);
    window.location.href = authUrl;
  }

  // Exchange authorization code for access token
  async exchangeCodeForToken(code: string): Promise<string> {
    try {
      const response = await fetch("/api/instagram/token", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ code }),
      });

      if (!response.ok) {
        throw new Error("Failed to exchange code for token");
      }

      const data = await response.json();
      this.accessToken = data.access_token;

      if (typeof window !== "undefined") {
        localStorage.setItem("instagram_access_token", this.accessToken!);
      }

      return this.accessToken!;
    } catch (error) {
      console.error("Error exchanging code for token:", error);
      throw error;
    }
  }
}

前端授权回调处理逻辑 #

useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const code = urlParams.get("code");
    if (code && !instagramAPI.isAuthenticated()) {
      setLoading(true);
      instagramAPI
        .exchangeCodeForToken(code)
        .then(() => {
          setIsAuthenticated(true);
          router.replace("/"); // Redirect to main page after authentication
        })
        .finally(() => setLoading(false));
    }
  }, [router]);

  const handleConnectInstagram = () => {
    instagramAPI.initiateOAuth();
  };

解决方案建议 #

1. 检查Meta开发者后台应用配置 #

• 确认应用平台类型正确：Web应用需在Settings > Basic中添加Web平台并完成域名验证；单页应用需开启OAuth Settings中的Client OAuth Login和Web OAuth Login，并将重定向URI完整加入Valid OAuth Redirect URIs列表。
• 确保应用状态为Live，开发状态下仅添加的测试用户能正常授权。

2. 修正授权URL参数 #

• Scope格式错误：Instagram Graph API的授权范围需用空格分隔，将scope = "user_profile,user_media"改为scope = "user_profile user_media"，重新编码后拼接URL。
• 重定向URI一致性：确保前端生成的redirect_uri与后台配置完全一致，包括协议（http/https）、域名、路径，无多余编码或字符差异。

3. 解决DTSG安全验证错误 #

• 在授权URL中添加disable_navigation=1参数，强制使用弹出式授权流程，避免页面跳转导致的会话冲突。
• 检查服务器端/api/instagram/token接口：交换token时需携带client_id、client_secret、code、redirect_uri、grant_type=authorization_code所有参数，且client_secret需与Meta后台配置一致。

4. 环境变量与缓存排查 #

• 验证process.env.NEXT_PUBLIC_INSTAGRAM_CLIENT_ID已正确注入，可在控制台打印clientId确认无空值或拼写错误。
• Next.js开发环境需重启服务器使环境变量生效；生产环境需重新构建部署。

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