Google OAuth2处理可选Scope时二次requestAccessToken调用未响应

问题场景 #

通过浏览器OAuth2连接Google Drive，涉及两个Scope：

• https://www.googleapis.com/auth/drive - 必填
• https://www.googleapis.com/auth/drive.install - 可选

若同时请求两个Scope，用户仅确认必填Scope后，后续页面刷新或Token过期时会重复弹出可选Scope的确认窗口。因此尝试分两次调用授权：

1. 首次仅请求必填Scope并设置prompt: "none"（不弹窗）
2. 若返回interaction_required错误，第二次同时请求两个Scope（触发弹窗）

但第二次调用requestAccessToken()始终无返回（已允许弹窗），代码如下：

let tokenResponse = await new Promise(resolve => {
    google.accounts.oauth2.initTokenClient({
        client_id: clientId,
        scope: scope1,
        prompt: "none", // never show a popup
        callback: resolve
    }).requestAccessToken();
});
if (tokenResponse.error && tokenResponse.error === "interaction_required") {
    tokenResponse = await new Promise(resolve => {
        google.accounts.oauth2.initTokenClient({
            client_id: clientId,
            scope: scope1 + " " + scope2,
            prompt: undefined, // show popup
            callback: resolve
       }).requestAccessToken();
    });
}

解决方案 #

1. 修复TokenClient实例冲突问题 #

短时间内重复创建initTokenClient实例可能导致上下文冲突，使回调无法触发。需明确错误处理逻辑，且第二次调用时显式设置prompt: "consent"确保弹窗触发：

async function getDriveToken(clientId, scope1, scope2) {
    let tokenResponse;
    // 首次无弹窗请求必填Scope
    try {
        tokenResponse = await new Promise((resolve, reject) => {
            const tokenClient = google.accounts.oauth2.initTokenClient({
                client_id: clientId,
                scope: scope1,
                prompt: "none",
                callback: (response) => {
                    response.error ? reject(response) : resolve(response);
                }
            });
            tokenClient.requestAccessToken();
        });
        return tokenResponse;
    } catch (err) {
        if (err.error !== "interaction_required") throw err;
        // 第二次请求完整Scope，显式触发授权弹窗
        tokenResponse = await new Promise(resolve => {
            const tokenClient = google.accounts.oauth2.initTokenClient({
                client_id: clientId,
                scope: `${scope1} ${scope2}`,
                prompt: "consent",
                callback: resolve
            });
            tokenClient.requestAccessToken();
        });
        return tokenResponse;
    }
}

2. 采用增量授权模式 #

优先完成必填Scope的授权，后续在实际需要用到可选Scope的功能场景时，再发起增量授权请求，避免初始化阶段的强制弹窗：

// 获取必填Scope的Token
async function getRequiredToken(clientId, scope1) {
    return new Promise((resolve, reject) => {
        const tokenClient = google.accounts.oauth2.initTokenClient({
            client_id: clientId,
            scope: scope1,
            prompt: "none",
            callback: (res) => res.error ? reject(res) : resolve(res)
        });
        tokenClient.requestAccessToken();
    });
}

// 增量请求可选Scope
async function addOptionalScope(clientId, currentScopes, scope2) {
    return new Promise(resolve => {
        const tokenClient = google.accounts.oauth2.initTokenClient({
            client_id: clientId,
            scope: `${currentScopes} ${scope2}`,
            prompt: "consent",
            callback: resolve
        });
        tokenClient.requestAccessToken();
    });
}

// 使用示例
async function initDriveAccess() {
    let tokenRes;
    try {
        tokenRes = await getRequiredToken(clientId, scope1);
    } catch (err) {
        if (err.error === "interaction_required") {
            // 首次授权直接请求全部Scope
            tokenRes = await addOptionalScope(clientId, scope1, scope2);
        } else {
            throw err;
        }
    }
    // 后续触发需要drive.install的功能时，再调用增量授权
    // tokenRes = await addOptionalScope(clientId, tokenRes.scope, scope2);
    return tokenRes;
}

3. 清理会话存储中的授权状态 #

Google OAuth2客户端会在Session Storage中存储授权状态，重复调用可能因状态冲突导致回调失效。第二次调用前可清理相关状态（注意：避免影响其他授权流程）：

// 清理Google OAuth相关会话状态
Object.keys(sessionStorage).forEach(key => {
    if (key.startsWith('google_oauth_')) {
        sessionStorage.removeItem(key);
    }
});

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