跳转至

身份验证 (Authentication)

概览

该应用程序使用 Microsoft Entra ID (原 Azure AD B2C) 进行身份验证，并通过适用于 React 的 MSAL (Microsoft Authentication Library) 实现。

流程

sequenceDiagram
    participant U as 用户浏览器
    participant F as React 前端
    participant M as Microsoft Entra ID
    participant A as Azure Functions API

    U->>F: 访问应用程序
    F->>M: 重定向至登录页面
    M->>U: 显示登录表单
    U->>M: 输入凭据
    M->>F: 返回 ID 令牌 (ID Token) + 访问令牌 (Access Token)
    F->>F: 通过 MSAL 存储令牌
    F->>A: 发送 API 请求 + X-User-Token 请求头
    A->>A: 验证 JWT, 提取声明 (Claims)
    A->>A: 在 app_users 表中查找用户
    A->>F: 返回对应角色的数据

用户表 (app_users)

列名 描述
email Microsoft 帐户电子邮件 (唯一)
display_name 用户显示名称
role 角色: Vendor, Manager, 或 Admin
vendor_code 针对 Vendor 角色: 关联的账单公司名
is_active 帐户启用/禁用状态

基于角色的数据访问控制

  • 供应商 (Vendor): 仅能查看 billing_company 与其 vendor_code 匹配的采购订单。
  • 经理 (Manager): 可以查看所有采购订单。
  • 管理员 (Admin): 可以查看所有采购订单并管理用户。

前端配置

认证设置位于 frontend/src/authConfig.ts:

  • clientId — Azure AD 应用程序注册 ID
  • authority — Azure AD B2C 租户权限 URL
  • redirectUri — 应用程序重定向 URI