WordPress中YouTube订阅状态检查按钮GAPI加载错误求助

核心问题分析 #

你遇到的error loading GAPI client for API错误，主要来自三个原因：

• 重复加载YouTube API客户端，导致初始化冲突
• 使用mine: true需要OAuth 2.0授权（而非仅API Key），API Key无法获取当前用户的身份信息
• 未确保GAPI客户端完全初始化就执行订阅检查逻辑

修复方案 #

1. 替换API Key为OAuth授权流程 #

要获取当前用户的YouTube频道ID（mine: true），必须通过OAuth 2.0让用户授权你的应用访问其YouTube账号。修改头部的GAPI初始化代码：

<script src="https://apis.google.com/js/api.js"></script>
<script>
let gapiInitialized = false;
function initClient() {
  gapi.client.init({
    clientId: 'YOUR_OAUTH_CLIENT_ID', // 替换为你的OAuth客户端ID
    discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest'],
    scope: 'https://www.googleapis.com/auth/youtube.readonly' // 只读权限足够
  }).then(() => {
    gapiInitialized = true;
    console.log('GAPI客户端初始化完成');
  }).catch(err => {
    console.error('GAPI初始化失败:', err);
  });
}
gapi.load('client:auth2', initClient); // 加载auth2模块用于OAuth
</script>

2. 重构订阅检查函数 #

移除重复的API加载逻辑，确保先完成授权和初始化，再执行查询：

function checkSubscriptionStatus() {
  const channelID = 'YOUR_CHANNEL_ID'; // 替换为目标频道ID
  const APIKey = 'YOUR_API_KEY'; // 仍需API Key用于订阅查询（无需用户授权）

  if (!gapiInitialized) {
    alert('GAPI客户端尚未初始化，请稍后重试');
    return;
  }

  // 先检查用户是否已授权
  const authInstance = gapi.auth2.getAuthInstance();
  if (!authInstance.isSignedIn.get()) {
    // 引导用户登录授权
    authInstance.signIn().then(() => {
      fetchUserSubscriptionStatus(channelID, APIKey);
    }).catch(err => {
      console.error('授权失败:', err);
    });
    return;
  }

  fetchUserSubscriptionStatus(channelID, APIKey);
}

function fetchUserSubscriptionStatus(targetChannelId, apiKey) {
  // 获取当前授权用户的频道ID
  gapi.client.youtube.channels.list({
    mine: true,
    part: 'id'
  }).then(response => {
    const userChannelId = response.result.items[0].id;

    // 查询订阅状态
    const url = `https://www.googleapis.com/youtube/v3/subscriptions?part=status&channelId=${targetChannelId}&subscriberId=${userChannelId}&key=${apiKey}`;
    fetch(url)
      .then(res => res.json())
      .then(data => {
        if (data.items.length === 0) {
          console.log('用户未订阅该频道');
          // 这里可以替换为前端提示逻辑
          return;
        }
        const isSubscribed = data.items[0].status.subscribed;
        if (isSubscribed) {
          console.log('用户已订阅该频道');
        } else {
          console.log('用户未订阅该频道');
        }
      })
      .catch(err => {
        console.error('查询订阅状态失败:', err);
      });
  }).catch(err => {
    console.error('获取用户频道ID失败:', err);
  });
}

3. WordPress环境注意事项 #

• 不要直接修改主题头部文件，建议使用WordPress的wp_enqueue_scripts钩子添加脚本，避免主题更新丢失代码
• 确保你的OAuth客户端ID已配置正确的授权来源（你的WordPress域名），否则会出现跨域授权错误

关键说明 #

• OAuth客户端ID需要在Google Cloud控制台创建，选择"Web应用"类型，添加你的WordPress域名到授权列表
• API Key需要启用YouTube Data API v3权限，同样在Google Cloud控制台配置
• 订阅查询接口使用API Key即可，因为它仅查询公开的订阅关系（只要知道用户频道ID）

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