如何从Chrome扩展调用Gmail API？解决401无效凭证报错

错误信息 #

error:
code:401
errors: Array(1)
0:
domain:"global"
location:"Authorization"
locationType:"header"
message:"Invalid Credentials"
reason:"authError"
message:"Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential."
status:"UNAUTHENTICATED"

原代码问题点 #

你提供的background.js存在两个关键问题：

1. 调用chrome.identity.getAuthToken时未指定Gmail API所需的权限范围，导致获取的令牌没有操作标签的权限
2. Authorization请求头的模板字符串写法错误，单引号无法解析${token}变量，导致请求头携带的是无效的令牌文本

修复步骤及代码示例 #

1. 修正代码中的语法错误

将Authorization头的写法改为反引号包裹的模板字符串，同时添加权限范围参数：

chrome.identity.getAuthToken({
  interactive: true,
  scopes: ['https://www.googleapis.com/auth/gmail.labels'] // 新增权限范围
}).then(token => { 
  console.log(token);

  fetch('https://www.googleapis.com/gmail/v1/users/me/labels', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${token}`, // 修正模板字符串写法
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      labelListVisibility: 'labelShow',
      messageListVisibility: 'show',
      name: 'labelName'
    })
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
});

2. 配置Chrome扩展Manifest文件

在manifest.json中添加identity权限、OAuth客户端ID及对应的Gmail API权限范围：

{
  "manifest_version": 3, // 匹配你的扩展使用的版本
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": [
    "identity"
  ],
  "oauth2": {
    "client_id": "你的Google Cloud OAuth客户端ID",
    "scopes": [
      "https://www.googleapis.com/auth/gmail.labels"
    ]
  }
}

3. 清理无效令牌（可选）

如果之前获取的令牌已过期或权限不足，可清除缓存的令牌后重新获取：

chrome.identity.removeCachedAuthToken({ token: '旧令牌值' }, () => {
  chrome.identity.getAuthToken({ 
    interactive: true, 
    scopes: ['https://www.googleapis.com/auth/gmail.labels'] 
  }, (newToken) => {
    // 使用新令牌调用API
  });
});

4. 确认Google Cloud控制台配置

• 确保Gmail API已在控制台中启用
• 确认OAuth客户端ID已关联正确的权限范围，且OAuth同意屏幕配置完成

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