DEV Community
·
使用 Entra ID 和 MSAL 为 Docusaurus 添加身份验证
💡
原文英文，约900词，阅读约需4分钟。
📝
内容提要
Docusaurus 是一个用于构建文档网站的开源工具。本文介绍了如何为 Docusaurus 网站添加 Entra ID 身份验证。步骤包括在 Entra ID 中注册应用，使用 MSAL.js 进行身份验证，并通过组件替换技术在 Docusaurus 中添加登录功能，从而增强网站安全性。
🎯
关键要点
- Docusaurus 是一个用于构建文档网站的开源工具，支持静态网站生成。
- 添加身份验证对于保护文档访问至关重要，Docusaurus 默认不提供身份验证功能。
- 为 Docusaurus 网站添加 Entra ID 身份验证的步骤包括注册单页应用、使用 MSAL.js 进行身份验证。
- 在 Entra ID 中注册应用时，建议使用 MSAL.js 2.0 和授权代码流，并添加重定向 URL。
- 安装 MSAL 库以支持 React 应用的身份验证功能。
- 在应用根目录下添加 authConfig.js 文件以配置 Entra ID 注册详情。
- 通过组件替换技术（swizzling）在 Docusaurus 中添加登录功能，覆盖默认组件。
- 使用 <Root> 组件包裹网站，以便在 React 树的顶部添加用户身份验证逻辑。
- MSAL 实例应在组件树外部实例化，以避免在重新渲染时重新实例化。
- 通过 MsalProvider 组件和 AuthenticatedTemplate 根据用户身份验证状态显示或隐藏内容。
- 成功添加 Entra ID 身份验证后，增强了网站的安全性并提供了无缝的用户体验。
🏷️
标签
➡️
