如何在GitHub Pages仓库的JavaScript文件中安全使用API Key

核心逻辑 #

GitHub Pages是纯静态环境，客户端JavaScript根本碰不到仓库的Secrets。必须把需要API Key的操作（推送数据到仓库）交给GitHub Actions来做，客户端只负责把数据传给Action，由Action用Secrets里的Key完成操作。

步骤1：编写处理数据推送的Workflow #

在仓库的.github/workflows文件夹下新建chemical-data-upload.yml文件，内容如下：

name: 上传化学数据
on:
  # 允许通过API触发这个工作流
  repository_dispatch:
    types: [upload_chemical]

jobs:
  upload:
    runs-on: ubuntu-latest
    steps:
      - name: 拉取仓库代码
        uses: actions/checkout@v4

      - name: 处理并推送数据
        env:
          # 引用你存在Secrets里的API Key（需提前在仓库Settings中配置）
          ACCESS_TOKEN: ${{ secrets.REPO_ACCESS_TOKEN }}
          # 读取客户端传递过来的数据
          DATA_PAYLOAD: ${{ github.event.client_payload.data }}
        run: |
          # 将数据追加到工具对应的存储文件中
          echo "$DATA_PAYLOAD" >> functions/addchemicals/data.json
          
          # 配置Git身份并推送更改
          git config user.name "数据提交机器人"
          git config user.email "bot@ylklab.com"
          git add functions/addchemicals/data.json
          git commit -m "新增化学数据条目"
          # 通过Secrets中的Token完成推送，避免硬编码
          git push https://${ACCESS_TOKEN}@github.com/ylklab/ylklab.github.io.git main

步骤2：修改客户端JS代码触发Workflow #

让addchemicals工具不再直接调用GitHub API推数据，改成触发上面的Workflow。如果是实验室内部使用，可以让用户自行生成带repo权限的GitHub个人令牌（PAT）并填写到工具中：

async function submitChemicalData(chemicalData) {
  // 从页面输入框获取用户的GitHub个人令牌
  const userToken = document.getElementById('user-token').value;
  const requestPayload = {
    event_type: 'upload_chemical',
    client_payload: {
      data: JSON.stringify(chemicalData)
    }
  };

  const response = await fetch('https://api.github.com/repos/ylklab/ylklab.github.io/dispatches', {
    method: 'POST',
    headers: {
      'Authorization': `token ${userToken}`,
      'Accept': 'application/vnd.github.v3+json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(requestPayload)
  });

  if (response.ok) {
    alert('数据提交成功，等待后台处理完成');
  } else {
    alert('提交失败，请检查令牌权限或数据格式');
  }
}

步骤3：配置仓库Secrets #

1. 生成一个带有repo权限的GitHub个人令牌（PAT）
2. 打开仓库的Settings > Secrets and variables > Actions页面
3. 点击「New repository secret」，命名为REPO_ACCESS_TOKEN，将生成的PAT粘贴后保存

更友好的替代方案（可选） #

如果不想让用户自行填写令牌，可以搭建一个GitHub OAuth应用，让用户授权后自动获取临时令牌。这个配置稍复杂，但用户体验更好，适合需要公开使用的场景。

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