Instagram Basic Display API已废弃，React第三方登录替代方案咨询

两种登录方式的核心运作机制 #

• API setup with Instagram Login：直接走Instagram OAuth授权流程，用户授权后应用获取Instagram访问令牌，凭借令牌调用Instagram Graph API获取企业/创作者账户的粉丝、关注列表等数据。仅支持Instagram企业或创作者账户，个人账户无法使用。
• API setup with Facebook Login：通过Facebook OAuth授权，用户需将Instagram账户绑定到Facebook账号，应用先获取Facebook访问令牌，再通过令牌交换得到Instagram Graph API的访问权限，进而获取目标数据。本质是借助Facebook作为中间层关联Instagram账户。

React中实现获取用户数据的核心步骤（以Instagram Login为例） #

1. 前置准备 #

• 在Meta开发者平台创建应用，选择「Instagram Business」产品，配置Instagram Login的回调URL（本地开发可设为http://localhost:3000/auth/callback，需与应用域名一致）。
• 申请所需权限：instagram_basic（基础账户信息）、instagram_manage_insights（粉丝数据）等，权限需经Meta审核后才能生效。

2. 前端授权跳转 #

构建授权URL，引导用户进入Instagram授权页面：

const handleInstagramLogin = () => {
  const clientId = '你的Meta应用ID';
  const redirectUri = encodeURIComponent('http://localhost:3000/auth/callback');
  const scope = encodeURIComponent('instagram_basic instagram_manage_insights');
  const authUrl = `https://www.facebook.com/v18.0/dialog/oauth?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=code`;
  window.location.href = authUrl;
};

// 登录按钮组件
const LoginButton = () => (
  <button onClick={handleInstagramLogin}>用Instagram登录</button>
);

3. 处理回调并获取访问令牌 #

在回调页面解析授权码，交换为访问令牌：

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const AuthCallback = () => {
  const navigate = useNavigate();
  
  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const code = urlParams.get('code');
    
    if (code) {
      fetch('https://graph.facebook.com/v18.0/oauth/access_token', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({
          client_id: '你的Meta应用ID',
          client_secret: '你的Meta应用密钥',
          redirect_uri: 'http://localhost:3000/auth/callback',
          code: code,
        }),
      })
        .then(res => res.json())
        .then(data => {
          localStorage.setItem('ig_access_token', data.access_token);
          navigate('/user-data');
        })
        .catch(err => console.error('令牌获取失败:', err));
    }
  }, [navigate]);

  return <div>登录处理中...</div>;
};

4. 调用API获取用户数据 #

使用令牌调用Instagram Graph API获取粉丝、关注列表等信息：

import { useEffect, useState } from 'react';

const UserData = () => {
  const [userInfo, setUserInfo] = useState(null);
  const [followerList, setFollowerList] = useState(null);

  useEffect(() => {
    const accessToken = localStorage.getItem('ig_access_token');
    if (!accessToken) return;

    // 获取关联的Instagram账户ID
    fetch(`https://graph.facebook.com/v18.0/me/accounts?access_token=${accessToken}`)
      .then(res => res.json())
      .then(accounts => {
        const igAccountId = accounts.data[0].id;
        
        // 获取账户基础数据
        fetch(`https://graph.facebook.com/v18.0/${igAccountId}?access_token=${accessToken}&fields=username,followers_count,follows_count`)
          .then(res => res.json())
          .then(data => setUserInfo(data));
        
        // 获取粉丝列表
        fetch(`https://graph.facebook.com/v18.0/${igAccountId}/followers?access_token=${accessToken}&fields=username,id`)
          .then(res => res.json())
          .then(data => setFollowerList(data.data));
      })
      .catch(err => console.error('数据获取失败:', err));
  }, []);

  if (!userInfo) return <div>加载中...</div>;

  return (
    <div>
      <h2>账户信息</h2>
      <p>用户名: {userInfo.username}</p>
      <p>粉丝数: {userInfo.followers_count}</p>
      <p>关注数: {userInfo.follows_count}</p>
      
      <h3>粉丝列表</h3>
      <ul>
        {followerList?.map(follower => (
          <li key={follower.id}>{follower.username}</li>
        ))}
      </ul>
    </div>
  );
};

关键注意事项 #

• 始终使用Meta Graph API的最新版本（当前为v18.0），避免版本过时引发错误。
• 权限申请需明确说明使用场景，Meta会审核权限合理性，未通过审核无法获取敏感数据。
• 生产环境中，令牌交换逻辑建议放在后端处理，防止前端暴露应用密钥。
• 仅支持Instagram企业或创作者账户，个人账户无法使用该方案。

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