通过

你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

访问 Azure 静态 Web 应用的用户信息

  • 项目

Azure 静态 Web 应用通过直接访问终结点向 API 函数提供验证相关的用户信息。

许多用户界面在很大程度上依赖于用户身份验证数据。 直接访问终结点是一个无需实现自定义函数即可公开用户信息的实用工具 API。 除了便利性之外，直接访问终结点不受无服务器架构所带来的冷启动延迟的影响。

客户端主体数据

客户端主体数据对象向应用公开用户可识别的信息。 以下是客户端主体对象的特有属性：

properties 说明
identityProvider 标识提供程序的名称。
userId 用户的特定于 Azure 静态 Web 应用的唯一标识符。
  • 该值在每个应用中都是唯一的。 例如，同一用户在不同的静态 Web 应用资源上返回不同的 userId 值。
  • 该值在用户的生存期内保持不变。 如果删除同一用户并将其重新添加到应用，则会生成一个新的 userId。
userDetails 用户的用户名或电子邮件地址。 一些提供程序返回用户的电子邮件地址，而其他提供程序则发送用户句柄。
userRoles 用户的已分配角色的数组。
claims 自定义身份验证提供程序返回的声明数组。 只能在直接访问终结点中访问。

以下示例是示例客户端主体对象：

{
  "identityProvider": "github",
  "userId": "abcd12345abcd012345abcdef0123450",
  "userDetails": "username",
  "userRoles": ["anonymous", "authenticated"],
  "claims": [{
    "typ": "name",
    "val": "Azure Static Web Apps"
  }]
}

直接访问终结点

可以向 /.auth/me 路由发送 GET 请求，并接收对客户端主体数据的直接访问。 当视图状态依赖于授权数据时，使用这种方法可获得最佳性能。

对于已登录的用户，响应中包含一个客户端主体 JSON 对象。 未经身份验证的用户发送的请求会返回 null。

使用 fetch1 API，可以使用以下语法访问客户端主体数据。

async function getUserInfo() {
  const response = await fetch('/.auth/me');
  const payload = await response.json();
  const { clientPrincipal } = payload;
  return clientPrincipal;
}

(async () => {
console.log(await getUserInfo());
})();

API 函数

静态 Web 应用中通过 Azure Functions 后端提供的 API 函数有权访问与客户端应用程序相同的用户信息，但 claims 数组除外。 尽管 API 接收到用户身份信息，但如果用户经过身份验证或符合所需角色，则不会执行其检查。 在 staticwebapp.config.json 文件中定义访问控制规则。

客户端主体数据会被传递到 x-ms-client-principal 请求标头中的 API 函数。 客户端主体数据以 Base64 编码字符串的形式发送，其中包含一个序列化的 JSON 对象。

下面的示例函数显示了如何读取和返回用户信息。

module.exports = async function (context, req) {
  const header = req.headers.get('x-ms-client-principal');
  const encoded = Buffer.from(header, 'base64');
  const decoded = encoded.toString('ascii');

  context.res = {
    body: {
      clientPrincipal: JSON.parse(decoded),
    },
  };
};

假设上面的函数命名为 user，可以使用 fetch1 浏览器 API 通过下面的语法访问 API 的响应。

async function getUser() {
  const response = await fetch('/api/user');
  const payload = await response.json();
  const { clientPrincipal } = payload;
  return clientPrincipal;
}

console.log(await getUser());

当用户登录时，x-ms-client-principal 标头将通过 Static Web Apps 边缘节点添加到用户信息请求中。

注意

API 函数中可访问的 x-ms-client-principal 标头不包含 claims 数组。

1fetch API 和 await 运算符在 Internet Explorer 中不支持。

后续步骤

配置应用设置