通过 Steam Web API 获取玩家游戏列表并展示在个人网站

7/10/2026 0 字 0 分钟 教程 Steam

通过 Steam 官方接口获取游戏库列表并展示在个人网站，需要通过云函数解决 CORS 跨域和 API Key 暴露等问题。

详情请阅读 Steam Web API 文档

整体思路

前端组件 → 云函数代理 → Steam API

• 前端：组件负责展示，只请求自己的云函数
• 云函数：持有 API Key，转发请求到 Steam，再返回结果
• Steam API：官方数据源，只接受带 Key 的服务端请求

这样做的两个好处：

1. 解决 CORS：浏览器直接请求 api.steampowered.com 会被拦截，通过配置了 CORS 的云函数中转即可
2. 隐藏 API Key：Key 只存在于云函数中，前端代码和仓库中完全不出现

获取 Steam Web API 用户密钥

1. 同意 Steam Web API 使用条款
2. 在 Steam 社区注册页面创建用户 Web API 密钥

重要

妥善保管密钥，不要出现在前端代码、公共仓库或浏览器网络请求中。

获取 Steam ID

两种方式任选：

• 访问 主页 > 帐户，页面显示有 Steam ID
• 访问个人资料页面，URL 中 https://steamcommunity.com/profiles/xxxxx/ 的 xxxxx 即为 Steam ID

搭建云函数代理

如阿里云函数计算 (FC)、腾讯云云函数 (SCF)、Cloudflare Workers、Vercel Functions、Netlify Functions 等

核心逻辑

接收前端请求 → 拼接 Steam API 参数 → 转发 → 返回结果

前端 GET ${PROXY}/IPlayerService/GetOwnedGames/v1/?include_appinfo=true&include_played_free_games=true
       ↓
云函数拼接完整 URL：
https://api.steampowered.com/IPlayerService/GetOwnedGames/v1/?key={KEY}&steamid={ID}&include_appinfo=true&include_played_free_games=true
       ↓
请求 Steam API，返回 JSON 给前端

关键设计

• 隐藏 API Key

  提前携带 Key 参数，完成认证且避免暴露

• CORS 响应头

  云函数需要返回正确的 CORS 头，否则浏览器会拦截响应：

  Access-Control-Allow-Origin: https://your_domain
  Access-Control-Allow-Methods: GET, OPTIONS

  对于预检请求（OPTIONS 方法），直接返回 204 空响应即可

前端组件

组件只请求自己的云函数地址，不直接接触 Steam API：

GET ${PROXY}/IPlayerService/GetOwnedGames/v1/?include_appinfo=true&include_played_free_games=true

参数

参数	类型	必需	默认值	说明
include_appinfo	boolean	否	false	如果需要各游戏的更多信息（如名称、图标等），为 true
include_played_free_games	boolean	否	false	默认不包含免费游戏。若设置，将返回用户玩过的免费游戏
appids_filter	uint32	否	—	若设置，将结果集限制在传入的应用。格式为 appids_filter[0]=xxx，一次传一个

示例响应

{
  "response": {
    "game_count": 5,
    "games": [
      {
        "appid": 105600,
        "name": "Terraria",
        "playtime_forever": 213,
        "img_icon_url": "858961e95fbf869f136e1770d586e0caefd4cfac",
        "has_community_visible_stats": true,
        "playtime_windows_forever": 213,
        "playtime_mac_forever": 0,
        "playtime_linux_forever": 0,
        "playtime_deck_forever": 0,
        "rtime_last_played": 1772289546,
        "playtime_disconnected": 2
      },
      {
        "appid": 255710,
        "name": "Cities: Skylines",
        "playtime_forever": 62,
        "img_icon_url": "6cf7b10dd29db28448ef79698ed2118a03617d63",
        "has_community_visible_stats": true,
        "playtime_windows_forever": 62,
        "playtime_mac_forever": 0,
        "playtime_linux_forever": 0,
        "playtime_deck_forever": 0,
        "rtime_last_played": 1754831594,
        "playtime_disconnected": 0
      },
      {
        "appid": 322330,
        "name": "Don't Starve Together",
        "playtime_forever": 113,
        "img_icon_url": "a80aa6cff8eebc1cbc18c367d9ab063e1553b0ee",
        "playtime_windows_forever": 113,
        "playtime_mac_forever": 0,
        "playtime_linux_forever": 0,
        "playtime_deck_forever": 0,
        "rtime_last_played": 1772286418,
        "playtime_disconnected": 1
      },
      {
        "appid": 413150,
        "name": "Stardew Valley",
        "playtime_forever": 198,
        "img_icon_url": "35d1377200084a4034238c05b0c8930451e2fb40",
        "has_community_visible_stats": true,
        "playtime_windows_forever": 198,
        "playtime_mac_forever": 0,
        "playtime_linux_forever": 0,
        "playtime_deck_forever": 0,
        "rtime_last_played": 1759891823,
        "playtime_disconnected": 5
      },
      {
        "appid": 431960,
        "name": "Wallpaper Engine",
        "playtime_2weeks": 58,
        "playtime_forever": 100,
        "img_icon_url": "72edaed9d748c6cf7397ffb1c83f0b837b9ebd9d",
        "has_community_visible_stats": true,
        "playtime_windows_forever": 100,
        "playtime_mac_forever": 0,
        "playtime_linux_forever": 0,
        "playtime_deck_forever": 0,
        "rtime_last_played": 1779675749,
        "playtime_disconnected": 3
      }
    ]
  }
}

数据说明

字段	类型	说明
response.games.appid	integer	游戏唯一标识 ID
response.games.name	string	游戏名称
response.games.playtime_2weeks	integer	过去 2 周游玩时间（分钟）
response.games.playtime_forever	integer	总游玩时间（分钟）
response.games.img_icon_url	string	游戏图标的文件名
response.games.has_community_visible_stats	boolean	是否公开社区统计数据
response.games.playtime_windows_forever	integer	Windows 平台总游玩时间（分钟）
response.games.playtime_mac_forever	integer	Mac 平台总游玩时间（分钟）
response.games.playtime_linux_forever	integer	Linux 平台总游玩时间（分钟）
response.games.playtime_deck_forever	integer	Steam Deck 平台总游玩时间（分钟）
response.games.rtime_last_played	integer	上次游玩的 Unix 时间戳
response.games.playtime_disconnected	integer	离线状态下游玩的分钟数

贡献者

Jursin

页面历史

最后编辑于 9 天前

查看完整历史

4e75d1d-first migration