在Backstage中集成Microsoft Azure进行身份验证并实现伪SSO
注意
本文档基于 Backstage 1.32.0 版本编写,并采用自 1.24.0 版本以来官方推荐使用的新后端系统(New BackEnd System)。Backstage 仍处于不断更新发展中,本文下述步骤可能将不适用于后续更新版本。
一、开发前准备
- 确认 Backstage 服务能够访问外部网络或与公司内部网络互通
- 开发参考文档:
二、在 Microsoft Azure 中创建 Backstage 对应的应用程序
(1)新建应用程序
(2)填写应用程序信息
这里的 URL,平台选择 Web,填写的 url 值为:
1 | https://backstage-api.xxxxxx.com.cn/api/auth/microsoft/handler/frame |
(3)点击注册
保存好应用的以下几项信息:
clientIdclientSecrettenantIddomainHint
三、在前端搭建登录接口
(1)在 packages/app/src 文件夹下的 App.tsx 文件中添加如下内容:
编辑 packages/app/src/App.tsx:
1 | import { useApi, microsoftAuthApiRef, identityApiRef } from '@backstage/core-plugin-api'; |
其中,id 需要填写为一个唯一值,title 和 message 的值将显示在前端登录接口面板上,apiRef 表示将会使用 Backstage 中封装好的这个 api 接口。
return 之前的部分则是登出逻辑,而不是一直保留。若不确保在使用 Azure 登录后、登出账号时,在 Backstage 中绑定的 Azure 账号信息也能一并注销,那么在登出后再使用访客账号登录,无论是操作还是访问都将使用到刚才留存的 Azure 账号信息,这将会显著威胁系统安全。
此时,重启系统,我们就会看到在登录界面出现了新的登录可选项:
但此时点击其 SIGN IN 按钮,则会出现 502 信息,是因为我们还需要进行后端的配置,以确保我们能够正确地对接 Azure 服务器以及正确地重定向。
四、编写后端配置
(1)安装依赖
从项目的根目录开始:
1 | yarn --cwd packages/app add @backstage/plugin-auth-backend-module-microsoft-provider |
(2)创建全局存储模块
在 packages 文件夹下新建 global 文件夹,并在其中新建 node-cache.ts 文件。接着向文件中编写如下内容:
packages/global/node-cache.ts:
1 | import NodeCache from 'node-cache'; |
此存储模块的作用在于,能够在每个用户使用 Azure 方式登录时,存储其登录账号对应的 refresh_token。我们需要利用 refresh_token 在后续各项集成模块的工作步骤中去获取到 id_token,借此实现伪 SSO(也就是免掉了向集成的各个工具提供账密认证的工作,只需从 Backstage 登录一次,就能实现免登录访问、操作、处理集成的其他工具)。
(3)编写自定义身份验证模块
需要在 backend/src/plugins 文件夹中新建文件 azureAuth.ts,并在其中编写如下内容:
packages/backend/src/plugins/azureAuth.ts:
1 | import { createBackendModule } from '@backstage/backend-plugin-api'; |
根据上面的例子,我们通过 Backstage 内置的 Microsoft AuthApi 执行相应的验证操作。在 signInResolver 函数中我们新增了一些额外的验证处理,比如 info 参数中存储了在前台点击 SIGN IN 按钮时唤起的 Microsoft 登录窗口中填写的邮箱,我们可以预先验证邮箱是否属于本公司或符合预期条件,如果不符合就会弹出错误提示。若验证通过,则会将用户名的 refresh_token 存储到 node-cache 中,为确保每位用户的 refresh_token 的独立性,此处存储的 key 命名由 邮箱用户名 + refreshToken 组成。
(4)向后端导入身份验证模块
在 backend 文件夹下的 index.ts 文件中添加如下内容:
packages/backend/src/index.ts:
1 | // ... other plugins |
(5)编写配置
在 app-config.yaml 文件中的 auth 部分编写如下配置:
1 | auth: |
其中的 clientId、clientSecret、tenantId、domainHint 填写的是之前步骤中保存的信息。callbackUrl 的值填写的是之前创建应用程序时填写的回调地址。
上述步骤全部完成后,重新启动系统,即可使用 Azure 进行登录。登录成功后界面显示如下:
至此,Azure 登录集成以及伪 SSO 实现就基本完成了。
- 标题: 在Backstage中集成Microsoft Azure进行身份验证并实现伪SSO
- 作者: Zave
- 创建于 : 2026-10-09 12:00:00
- 更新于 : 2026-10-09 12:00:00
- 链接: https://zavex.cn/post/55104.html
- 版权声明: 版权所有 © Zave,禁止转载。