如何通过GitHub Workflow向GitHub Pages静态文件传递Spotify密钥？

首先必须明确：SPOTIFY_CLIENT_SECRET绝对不能暴露在前端代码中，静态页面的JS会被所有访问者查看，泄露密钥会导致他人滥用你的Spotify API配额，引发安全风险。如果业务需要调用Spotify API，建议通过后端代理处理令牌请求，而非直接在前端使用密钥。

若仅需注入可公开的Client ID，或你明确知晓风险仍要继续，以下是具体操作步骤：

1. 在GitHub仓库添加密钥 #

前往仓库「Settings」→「Secrets and variables」→「Actions」，点击「New repository secret」，分别添加：

• 名称：SPOTIFY_CLIENT_ID，值为你的Spotify客户端ID
• 名称：SPOTIFY_CLIENT_SECRET，值为你的Spotify客户端密钥

2. 修改GitHub Workflow，注入密钥到静态文件 #

在现有Workflow的Checkout步骤之后，新增步骤将密钥注入到你的JS文件中：

方式一：替换JS文件中的占位符 #

假设你的JS代码里有如下占位符：

// your-script.js
const spotifyClientId = "{{SPOTIFY_CLIENT_ID}}";
// 注意：不推荐在前端使用clientSecret，此处仅演示注入逻辑
const spotifyClientSecret = "{{SPOTIFY_CLIENT_SECRET}}";

修改后的完整Workflow代码：

name: GitHub Pages

on:
  push:
    branches: ["main"]

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Inject Spotify credentials into JS file
        run: |
          # 替换占位符为仓库密钥
          sed -i "s/{{SPOTIFY_CLIENT_ID}}/${{ secrets.SPOTIFY_CLIENT_ID }}/g" your-script.js
          # 仅在明确知晓风险的情况下添加此行
          sed -i "s/{{SPOTIFY_CLIENT_SECRET}}/${{ secrets.SPOTIFY_CLIENT_SECRET }}/g" your-script.js
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: '.'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

方式二：生成独立配置文件 #

若不想修改现有JS文件，可在构建阶段生成spotify-config.js，再在HTML中引入：
添加到Workflow的步骤：

- name: Generate Spotify config file
  run: |
    echo "window.SPOTIFY_CONFIG = {
      clientId: '${{ secrets.SPOTIFY_CLIENT_ID }}',
      // 注意：不推荐在前端暴露clientSecret
      clientSecret: '${{ secrets.SPOTIFY_CLIENT_SECRET }}'
    };" > spotify-config.js

在HTML中引入该配置文件：

<script src="spotify-config.js"></script>
<script src="your-script.js"></script>

之后在JS中即可通过window.SPOTIFY_CONFIG.clientId访问注入的值。

重要安全提醒 #

• 若需获取Spotify令牌，建议使用Authorization Code Flow（引导用户登录Spotify），或搭建简单后端服务处理Client Credentials Flow，前端通过调用后端接口获取令牌。
• 仅在用户授权场景下使用SPOTIFY_CLIENT_ID，绝对不要在前端代码中暴露SPOTIFY_CLIENT_SECRET。

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