优化 Google OAuth2 体验：跨标签页共享访问令牌

// 假设 CLIENT_ID 和 SCOPES 已经定义
const CLIENT_ID = 'YOUR_GOOGLE_CLIENT_ID.apps.googleusercontent.com';
const SCOPES = 'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email'; // 示例作用域

let tokenClient; // Google OAuth2 客户端实例

/**
 * 初始化 Google OAuth2 客户端并尝试获取令牌。
 * 优先使用本地存储的令牌，否则发起新的授权请求。
 */
function initializeGoogleAuth() {
    // 检查 localStorage 中是否存在有效的访问令牌
    const storedToken = localStorage.getItem('googleAccessToken');
    const tokenExpiry = localStorage.getItem('googleTokenExpiry');

    if (storedToken && tokenExpiry && Date.now() < parseInt(tokenExpiry)) {
        console.log("检测到有效的本地存储令牌，直接使用。");
        // 如果令牌有效，模拟回调，让应用使用此令牌
        // 实际应用中，您可能需要一个函数来处理已获取的令牌
        useAccessToken(storedToken);
    } else {
        console.log("无有效本地存储令牌，或令牌已过期，准备请求新令牌。");
        // 初始化 tokenClient
        tokenClient = google.accounts.oauth2.initTokenClient({
            client_id: CLIENT_ID,
            scope: SCOPES,
            prompt: '', // 尝试不显示弹窗，但如果需要Google认证，仍可能出现
            callback: authorizeCallback
        });
        tokenClient.requestAccessToken(); // 发起授权请求，可能触发弹窗
    }
}

/**
 * 授权回调函数，处理从 Google 获取的令牌。
 * @param {Object} tokenResponse - 包含 access_token 和 expires_in 等信息的响应对象。
 */
function authorizeCallback(tokenResponse) {
    if (tokenResponse && tokenResponse.access_token) {
        const accessToken = tokenResponse.access_token;
        const expiresIn = tokenResponse.expires_in; // 令牌有效期，单位秒

        // 计算令牌过期时间（毫秒）
        const expiryTime = Date.now() + (parseInt(expiresIn) * 1000);

        // 将令牌和过期时间存储到 localStorage
        localStorage.setItem('googleAccessToken', accessToken);
        localStorage.setItem('googleTokenExpiry', expiryTime.toString());

        console.log("成功获取并存储访问令牌:", accessToken);
        useAccessToken(accessToken); // 使用新获取的令牌
    } else {
        console.error("未能获取访问令牌:", tokenResponse);
        // 处理错误，例如向用户显示错误信息
    }
}

/**
 * 实际使用访问令牌的函数，例如发起 API 请求。
 * @param {string} token - Google 访问令牌。
 */
function useAccessToken(token) {
    console.log("当前使用的访问令牌:", token);
    // 示例：使用令牌发起 Google API 请求
    // fetch('https://www.googleapis.com/oauth2/v3/userinfo', {
    //     headers: {
    //         'Authorization': `Bearer ${token}`
    //     }
    // })
    // .then(response => response.json())
    // .then(data => console.log('用户信息:', data))
    // .catch(error => console.error('获取用户信息失败:', error));
}

// 在页面加载完成后调用初始化函数
// 确保 Google Identity Services 库已加载
// 例如：<script src="https://accounts.google.com/gsi/client" async defer></script>
// 然后在库加载完成后调用 initializeGoogleAuth
// window.onload = initializeGoogleAuth; // 简单示例，实际应用中可能需要更严谨的加载监听