Google Sheets API中initCodeClient回调未触发问题求助

核心问题诊断 #

从你的代码和控制台输出来看，回调未触发的原因主要有以下几点：

1. 未触发授权流程 #

你只通过initCodeClient创建了OAuth客户端实例，但没有调用client.requestCode()启动授权弹窗。initCodeClient仅完成初始化，不会自动触发用户授权操作。

2. 脚本加载时机问题 #

虽然你注册了GIS脚本，但google.accounts.oauth2对象可能在DOMContentLoaded触发时还未完全加载，导致初始化逻辑执行时依赖对象不存在。

3. 后端核心函数缺失 #

PHP代码中定义了process_auth_code但没有实现fetch_data_from_google_sheets函数，即使授权成功也无法完成令牌交换和数据拉取。

4. Google Cloud配置遗漏 #

• 未在OAuth客户端ID设置中添加正确的授权重定向URI（ux_mode: 'popup'需要添加你的站点域名，比如https://你的站点.com）
• 可能未启用Google Sheets API

修复后的代码调整 #

JavaScript（GroupStageTable.js）修改 #

var client;
var skyNonce = myAjaxObject.nonce; 
console.log('Nonce', skyNonce);

// 确保GIS脚本加载完成后再初始化客户端
function initClient() {
    console.log("init client called");
    // 检查GIS对象是否存在，不存在则延迟重试
    if (!google?.accounts?.oauth2) {
        console.error("GIS脚本未加载，100ms后重试");
        setTimeout(initClient, 100);
        return;
    }
    client = google.accounts.oauth2.initCodeClient({
        client_id: '******-******************.apps.googleusercontent.com',
        scope: 'https://www.googleapis.com/auth/spreadsheets.readonly',
        ux_mode: 'popup',
        callback: (response) => {
            if (response.error) {
                console.error('Google授权错误', response.error);
            } else {
                console.log('Google授权响应', response);
                const code = response.code;
                sendAuthCodeToServer(code, skyNonce);
            }
        }
    });
}

// 添加触发授权弹窗的函数
function triggerAuth() {
    if (client) {
        client.requestCode();
    } else {
        console.error("客户端未初始化");
    }
}

function sendAuthCodeToServer(code, skyNonce) {
    console.log('发送授权码到服务器', code);
    const xhr = new XMLHttpRequest();
    const params = new URLSearchParams({
        action: 'process_auth_code',
        code: code,
        security: skyNonce 
    });
    console.log("授权码已发送");
    xhr.open('POST', myAjaxObject.ajax_url, true); 
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    
    xhr.onload = function() {
        try {
            var response = JSON.parse(xhr.responseText);
            if (xhr.status === 200 && response.success) {
                console.log("请求成功");
                console.log("Google Sheets数据:", response.data);
                // 将数据渲染到页面
                document.getElementById('google-sheets-output').textContent = JSON.stringify(response.data);
            } else {
                console.error('错误:', response?.data?.message || '未知错误');
            }
        } catch (e) {
            console.error('解析响应失败:', e);
        }
    };
    // 捕获网络错误
    xhr.onerror = function() {
        console.error('网络请求失败');
    };
    xhr.send(params.toString());
}

function updateContent() {
    console.log("updateContent调用");
    initClient();
    // 在页面添加授权按钮
    const authBtn = document.createElement('button');
    authBtn.textContent = '点击授权获取Google Sheets数据';
    authBtn.onclick = triggerAuth;
    document.getElementById('google-sheets-data').prepend(authBtn);
}

document.addEventListener('DOMContentLoaded', function() {
    updateContent(); 
});

PHP代码补充（核心函数实现） #

在你的PHP插件中添加以下函数：

function fetch_data_from_google_sheets($code) {
    $client_id = '你的Google客户端ID';
    $client_secret = '你的Google客户端密钥';
    $redirect_uri = get_site_url(); // 需与Google Cloud配置的重定向URI一致
    
    // 交换授权码获取访问令牌
    $token_url = 'https://oauth2.googleapis.com/token';
    $post_fields = array(
        'code' => $code,
        'client_id' => $client_id,
        'client_secret' => $client_secret,
        'redirect_uri' => $redirect_uri,
        'grant_type' => 'authorization_code'
    );
    
    $response = wp_remote_post($token_url, array(
        'body' => $post_fields,
        'sslverify' => true
    ));
    
    if (is_wp_error($response)) {
        error_log('令牌交换错误: ' . $response->get_error_message());
        return false;
    }
    
    $token_data = json_decode(wp_remote_retrieve_body($response), true);
    if (!isset($token_data['access_token'])) {
        error_log('无效令牌数据: ' . wp_remote_retrieve_body($response));
        return false;
    }
    
    // 拉取Google Sheets数据
    $spreadsheet_id = '你的表格ID';
    $range = '你的数据范围（例如Sheet1!A1:D10）';
    $sheets_url = "https://sheets.googleapis.com/v4/spreadsheets/{$spreadsheet_id}/values/{$range}";
    
    $sheets_response = wp_remote_get($sheets_url, array(
        'headers' => array(
            'Authorization' => 'Bearer ' . $token_data['access_token']
        ),
        'sslverify' => true
    ));
    
    if (is_wp_error($sheets_response)) {
        error_log('Sheets API请求错误: ' . $sheets_response->get_error_message());
        return false;
    }
    
    $sheets_data = json_decode(wp_remote_retrieve_body($sheets_response), true);
    return isset($sheets_data['values']) ? $sheets_data['values'] : false;
}

必做检查项 #

1. Google Cloud控制台配置：
   • 确保OAuth客户端ID的授权重定向URI包含你的站点域名
   • 确认Google Sheets API已启用
   • 核对客户端ID和密钥是否正确
2. WordPress环境：
   • 检查安全插件是否拦截了AJAX请求
   • 查看WordPress错误日志（wp-content/debug.log，需开启调试模式）
3. 浏览器调试：
   • 查看网络面板，确认授权请求和AJAX请求是否正常发送

内容的提问来源于stack exchange，提问作者Sky Man