跨浏览器扩展OAuth2对接Google Calendar API：无client_secret、解决重定向不匹配并支持token刷新

问题描述 #

开发一款支持Chrome、Brave、Edge、Firefox的跨浏览器扩展，需对接Google Calendar API，目标实现带refresh token的持久化认证，但遇到OAuth客户端配置冲突问题。

当前错误 #

使用Web Application OAuth客户端时 #

• 令牌交换阶段触发Error 400："client_secret is missing"
• 采用带PKCE的授权码流

使用Chrome Extension OAuth客户端时 #

• 触发Error 400：redirect_uri_mismatch
• 扩展ID：pembhpamnbbklhjdimchmgoogfddabbi

需求 #

• 跨浏览器兼容（Chrome、Brave、Edge、Firefox）
• 支持refresh token实现持久化认证
• 不使用client_secret（无法在扩展中安全存储）
• 兼容chrome.identity.launchWebAuthFlow

已尝试方案 #

• Chrome Extension客户端：调用chrome.identity.getRedirectURL()仍出现重定向不匹配
• Web Application客户端：需要client_secret，无法安全存储
• 隐式流：可运行但无法获取refresh token

疑问 #

1. 跨浏览器扩展需支持refresh token时应使用哪种OAuth客户端类型？
2. 哪种重定向URI格式同时兼容Chrome Extension客户端和launchWebAuthFlow？
3. 是否可在不暴露client_secret的情况下使用授权码流？

环境 #

• Manifest V3
• Chrome Identity API
• Google Calendar API v3
• 扩展ID：pembhpamnbbklhjdimchmgoogfddabbi

当前实现代码 #

// 使用chrome.identity.launchWebAuthFlow实现授权码流
const redirectUri = chrome.identity.getRedirectURL(); 
// 返回：https://pembhpamnbbklhjdimchmgoogfddabbi.chromiumapp.org/

const authParams = new URLSearchParams({
    client_id: CLIENT_ID,
    response_type: 'code',
    scope: 'https://www.googleapis.com/auth/calendar',
    redirect_uri: redirectUri,
    code_challenge: codeChallenge,
    code_challenge_method: 'S256',
    access_type: 'offline',
    prompt: 'consent'
});

解决方案与疑问解答 #

1. 跨浏览器适配的OAuth客户端类型 #

采用分浏览器配置不同客户端的方案：

• Chromium系（Chrome、Brave、Edge）：使用Chrome Extension类型客户端，无需client_secret，支持PKCE授权码流获取refresh token。
• Firefox：使用Web Application类型客户端，配合PKCE授权码流，同样无需client_secret（Firefox的browser.identity.launchWebAuthFlow支持PKCE，且Google允许Web Application客户端在启用PKCE时跳过client_secret验证）。

2. 兼容的重定向URI格式 #

Chromium系浏览器

必须使用chrome.identity.getRedirectURL()返回的标准格式：https://<扩展ID>.chromiumapp.org/，需在Google Cloud控制台的Chrome Extension客户端中精确添加此URI（注意不要添加多余路径或参数，确保扩展ID与pembhpamnbbklhjdimchmgoogfddabbi完全一致）。

Firefox

使用browser.identity.getRedirectURL()返回的格式：moz-extension://<扩展ID>/，需在Web Application客户端中添加此URI（Firefox扩展ID可通过about:debugging查看临时ID，发布后替换为正式ID）。

可通过代码动态适配：

let redirectUri;
if (navigator.userAgent.includes('Firefox')) {
    redirectUri = browser.identity.getRedirectURL();
} else {
    redirectUri = chrome.identity.getRedirectURL();
}

3. 无client_secret的授权码流实现 #

完全可行，通过PKCE授权码流实现：

• Chromium系Chrome Extension客户端：Google默认允许此类客户端在使用PKCE时跳过client_secret验证，直接用授权码交换包含refresh token的令牌。
• Firefox Web Application客户端：启用PKCE后，Google会自动忽略client_secret的要求，完成令牌交换。

关键配置与代码调整 #

1. Google Cloud控制台配置：
   • Chrome Extension客户端：添加重定向URIhttps://pembhpamnbbklhjdimchmgoogfddabbi.chromiumapp.org/。
   • Web Application客户端：添加Firefox对应的moz-extension://<扩展ID>/格式URI。
2. 令牌交换代码示例：

async function exchangeCodeForTokens(code, codeVerifier, redirectUri, clientId) {
    const response = await fetch('https://oauth2.googleapis.com/token', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({
            client_id: clientId,
            code: code,
            redirect_uri: redirectUri,
            grant_type: 'authorization_code',
            code_verifier: codeVerifier
            // 无需传入client_secret
        })
    });
    return response.json();
}

• 确保保留access_type: 'offline'和prompt: 'consent'参数，强制返回refresh token。

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