章节
Music Tag Web 单点登录配置教程
本文说明如何为 Music Tag Web 配置 Casdoor 等通用 OIDC 身份提供方,以及 Google、GitHub、QQ、微博登录。
先区分 OIDC 和 OAuth
OIDC 建立在 OAuth 2.0 之上,身份提供方会返回经过校验的身份声明。本项目的通用 OIDC 入口适用于 Casdoor 等兼容 OIDC Discovery 的服务;Google 也使用 OIDC。
GitHub、QQ、微博在本项目中走 OAuth 2.0:登录授权后,服务端再调用平台用户接口取得稳定用户 ID。它们不是本项目通用 OIDC 配置的 issuer,不能把它们的 Client ID 填进 OIDC_CLIENT_ID。
所有平台登录成功后,Music Tag Web 都会按“平台 + 平台用户 ID”映射本地用户,再签发 Music Tag Web 自己的 JWT。不会仅根据邮箱自动关联已有账号。新建账号默认为普通用户。
准备公网地址
下文用 https://music.example.com 表示用户浏览器访问 Music Tag Web 的完整公网 origin。替换成实际域名;如果部署在路径前缀下,也要把路径前缀保留在回调 URL 中。
回调地址必须同时满足:
- 与平台开发者后台登记的地址逐字符一致,包括
http/https、域名、端口、路径和结尾斜杠。 - 从用户浏览器及身份提供方都能访问。
- 使用 HTTPS 部署公网服务。仅本机开发时才使用 localhost HTTP 回调。
通用 OIDC / Casdoor
在 Casdoor 创建应用
- 登录 Casdoor 管理后台,进入 Applications,新建一个应用。
- 在应用中启用授权码登录,并将 Redirect URL 登记为:
https://music.example.com/auth/oidc/callback
- 保存应用后复制应用详情中的 Client ID 和 Client Secret。这两项必须来自同一个应用。
OIDC_ISSUER填 Casdoor 的外部访问地址,例如https://casdoor.example.com。本项目会从该地址请求/.well-known/openid-configuration。
不要使用容器内只对 Casdoor 自己可见的地址作为 issuer。身份提供方 discovery 文档返回的 issuer、授权地址、Token 地址必须能被 Music Tag Web 服务访问。
配置变量
| 变量 | 含义 | 示例 |
|---|---|---|
OIDC_ISSUER |
OIDC issuer 根地址,不要附加 discovery 路径 | https://casdoor.example.com |
OIDC_CLIENT_ID |
Casdoor 应用 Client ID | 应用详情中的 Client ID |
OIDC_CLIENT_SECRET |
Casdoor 应用 Client Secret | 应用详情中的 Client Secret |
OIDC_REDIRECT_URI |
完整回调 URL,需与 Casdoor 登记项一致 | https://music.example.com/auth/oidc/callback |
四项都非空后,登录页会显示 OIDC 按钮。
Google 使用 OIDC,但本项目为它提供了独立配置,避免和 Casdoor 的通用 OIDC 设置冲突。
- 打开 Google Cloud Console - Credentials,创建或选择一个项目。
- 配置 OAuth consent screen。应用处于 Testing 状态时,将用于测试登录的 Google 账号加入 Test users。
- 进入 Credentials → Create Credentials → OAuth client ID,应用类型选择 Web application。
- 在 Authorized redirect URIs 中登记:
https://music.example.com/auth/social/google/callback
- 保存并复制 Client ID、Client Secret。
| 变量 | 含义 | 示例 |
|---|---|---|
GOOGLE_CLIENT_ID |
Google OAuth Web client ID | ...apps.googleusercontent.com |
GOOGLE_CLIENT_SECRET |
Google OAuth client secret | Google 控制台生成的 Secret |
GOOGLE_REDIRECT_URI |
完整回调 URL | https://music.example.com/auth/social/google/callback |
GOOGLE_OIDC_ISSUER |
Google OIDC issuer,可选 | 默认 https://accounts.google.com |
GitHub
GitHub 在本项目中使用 OAuth App,不是 GitHub Actions 的 OIDC token 功能。
- 打开 GitHub Developer settings → OAuth Apps → New OAuth App。
- 填写应用名称和 Homepage URL。
- Authorization callback URL 填:
https://music.example.com/auth/social/github/callback
- 创建后复制 Client ID,并生成 Client Secret。
| 变量 | 含义 | 示例 |
|---|---|---|
GITHUB_CLIENT_ID |
OAuth App Client ID | GitHub 页面上的 Client ID |
GITHUB_CLIENT_SECRET |
OAuth App Client Secret | GitHub 生成的 Client Secret |
GITHUB_REDIRECT_URI |
完整回调 URL | https://music.example.com/auth/social/github/callback |
当前申请 read:user 和 user:email 权限;邮箱只作为本地资料字段,不作为账号关联依据。
QQ 登录使用 QQ 互联的 OAuth 2.0 接口。
- 打开 QQ 互联 并注册开发者账号。
- 创建网站应用,按平台要求完成网站信息和域名验证,申请 QQ 登录能力。
- 将回调地址登记为:
https://music.example.com/auth/social/qq/callback
- 从应用信息页取得 App ID 和 App Key。
| 变量 | 含义 | 示例 |
|---|---|---|
QQ_CLIENT_ID |
QQ 互联 App ID | 应用的 App ID |
QQ_CLIENT_SECRET |
QQ 互联 App Key | 应用的 App Key |
QQ_REDIRECT_URI |
完整回调 URL | https://music.example.com/auth/social/qq/callback |
用户资料权限使用 get_user_info。QQ 返回的 OpenID 用于身份映射;QQ 的应用审核、网站验证和能力开通由 QQ 互联平台决定。
微博
微博登录使用微博开放平台 OAuth 2.0 接口。
- 打开微博开放平台,注册开发者账号并创建网站应用。
- 在应用设置中完善网站信息、授权回调信息,并按平台要求申请或开通登录权限。
- 将回调地址登记为:
https://music.example.com/auth/social/weibo/callback
- 从应用信息页复制 App Key 和 App Secret。
| 变量 | 含义 | 示例 |
|---|---|---|
WEIBO_CLIENT_ID |
微博应用 App Key | 应用的 App Key |
WEIBO_CLIENT_SECRET |
微博应用 App Secret | 应用的 App Secret |
WEIBO_REDIRECT_URI |
完整回调 URL | https://music.example.com/auth/social/weibo/callback |
平台授权成功后,本项目使用微博返回的用户 ID 标识身份。微博应用的审核状态和权限可能影响登录及用户资料接口。
Docker 环境变量示例
把需要启用的平台变量放进运行 Django/Nginx 的 Music Tag Web 容器环境中。下面仅展示结构,替换域名和凭据;未使用的平台可以不配置。
services:
music-tag-web:
environment:
OIDC_ISSUER: "https://casdoor.example.com"
OIDC_CLIENT_ID: "casdoor-client-id"
OIDC_CLIENT_SECRET: "replace-me"
OIDC_REDIRECT_URI: "https://music.example.com/auth/oidc/callback"
GOOGLE_CLIENT_ID: "replace-me.apps.googleusercontent.com"
GOOGLE_CLIENT_SECRET: "replace-me"
GOOGLE_REDIRECT_URI: "https://music.example.com/auth/social/google/callback"
GITHUB_CLIENT_ID: "replace-me"
GITHUB_CLIENT_SECRET: "replace-me"
GITHUB_REDIRECT_URI: "https://music.example.com/auth/social/github/callback"
QQ 和微博分别使用 QQ_CLIENT_ID / QQ_CLIENT_SECRET / QQ_REDIRECT_URI、WEIBO_CLIENT_ID / WEIBO_CLIENT_SECRET / WEIBO_REDIRECT_URI。
Client Secret 只放在服务端环境变量或 Secret 管理系统,不要放进前端代码、镜像源码或提交到 Git。修改 Compose 环境变量后要重新创建容器,单纯重启旧容器不会更新它的环境变量。
部署后检查
- 访问 Music Tag Web 登录页。只有 Client ID、Client Secret、Redirect URI 都配置完整的平台才会显示按钮;通用 OIDC 还要求
OIDC_ISSUER。 - 点击按钮并完成平台授权。成功后应回到 Music Tag Web 并进入登录后的页面。
- 若按钮不出现,检查容器环境变量及容器是否已重建。
- 若平台提示
invalid client id,核对 Client ID 是否来自对应应用、Client Secret 是否配套,以及请求是否跳到了预期的平台实例。 - 若提示 redirect URI 不匹配,比较容器变量和平台后台登记值,确认协议、域名、端口、路径完全一致。
- 若回调提示 state 错误,确认浏览器访问登录页和回调时使用同一个域名,且浏览器允许该域名的 session cookie。
- 通用 OIDC 无法发现 Provider 时,检查
OIDC_ISSUER对应的/.well-known/openid-configuration是否可从 Music Tag Web 容器访问。
平台后台可能要求完成审核或指定测试用户。单测能验证本项目的回调和响应解析,但最终仍需用各平台的真实应用凭据做一次登录验证。