WAMP本地服务器下Blogger API OAuth2.0请求及博客获取问题

一、先搞定 403: PERMISSION_DENIED 错误 #

这个错误大概率出在这几个细节上，你可以逐一排查：

• 权限格式错误：设置请求头时，Authorization 字段必须是 Bearer {token} 的格式——你直接传token肯定会触发权限拒绝！正确写法应该是：

  xhttp.setRequestHeader("Authorization", `Bearer ${token}`);
  

• 权限范围验证：虽然你指定了 https://www.googleapis.com/auth/blogger 权限，但要确保授权流程中用户确实同意了这个权限。可以检查授权跳转URL里的scope参数，确认包含该权限字符串。
• 本地域名配置：Google OAuth对本地重定向URI有严格要求，你得在Google Cloud控制台的OAuth 2.0客户端ID设置里，把 http://127.0.0.1/API/Auth2.0/ 准确添加到「已授权的重定向URI」列表中，不能有拼写错误。

二、获取用户博客列表的 JavaScript 实现 #

你不需要手动指定用户ID，用 self 就能指代当前授权的用户，直接调用 Blogger API 的 users/self/blogs 端点即可。修改你的 viewblogs 函数如下：

function viewblogs(token) {
  const xhttp = new XMLHttpRequest();
  // 用self代替用户ID，自动获取当前授权用户的博客
  const apiUrl = "https://www.googleapis.com/blogger/v3/users/self/blogs";
  
  xhttp.onload = function() {
    if (this.status === 200) {
      const blogData = JSON.parse(this.responseText);
      console.log("用户博客列表:", blogData);
      // 遍历处理博客数据，比如打印到控制台
      blogData.items.forEach(blog => {
        console.log(`博客名称: ${blog.name}, 博客ID: ${blog.id}`);
      });
    } else {
      console.error("请求失败:", this.status, this.responseText);
    }
  };
  
  xhttp.open("GET", apiUrl, true);
  // 务必注意Authorization的格式
  xhttp.setRequestHeader("Authorization", `Bearer ${token}`);
  xhttp.send();
}

补充优化方案 #

如果你习惯用更简洁的语法，也可以用 Fetch API 替代 XMLHttpRequest：

async function viewblogs(token) {
  try {
    const response = await fetch("https://www.googleapis.com/blogger/v3/users/self/blogs", {
      headers: {
        "Authorization": `Bearer ${token}`
      }
    });
    if (!response.ok) throw new Error(`请求失败，状态码：${response.status}`);
    const blogData = await response.json();
    console.log("用户博客列表:", blogData);
  } catch (error) {
    console.error("获取博客列表出错:", error);
  }
}

如果确实需要获取用户ID，可以先调用 users/self 端点拿到用户信息：

async function getUserId(token) {
  try {
    const response = await fetch("https://www.googleapis.com/blogger/v3/users/self", {
      headers: { "Authorization": `Bearer ${token}` }
    });
    const userInfo = await response.json();
    console.log("当前用户ID:", userInfo.id);
    return userInfo.id;
  } catch (error) {
    console.error("获取用户ID失败:", error);
  }
}

最后再核对一遍 #

1. Google Cloud控制台的重定向URI和代码里的完全匹配
2. 授权时用户确实同意了Blogger相关权限
3. 请求头的Authorization格式严格遵循Bearer + 空格 + token

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