在 Static Web Apps 中管理身份验证

购物列表 Web 应用需要一种方法来唯一标识其用户，并为用户提供存储产品的个人空间。

身份验证是对尝试访问信息系统的用户身份进行验证的一种方式。 现在，我们将深入了解身份验证以及如何在 Azure Static Web Apps 中实现该功能。

标识提供者

Azure 静态 Web 应用通过使用以下提供程序管理身份验证来简化身份验证体验：

• Microsoft Entra ID
• GitHub
• X

默认情况下，将启用所有身份验证提供程序。 稍后我们将了解如何使用自定义路由规则对身份验证提供程序进行限制。

系统文件夹

/.auth 系统文件夹提供对所有与身份验证相关的 API 的访问权限。 你可以使用这些终结点在应用中实现完整的身份验证工作流，包括登录和注销以及访问用户信息。

登录

下表列出了可在应用中使用的特定于提供程序的登录路由。

例如，若要使用 GitHub 登录，可以使用以下代码片段在 Web 应用中包含登录链接：

<a href="/.auth/login/github">Login</a>

如果希望用户在登录后返回到特定页面，可以在 post_login_redirect_uri 查询字符串参数中提供 URL。 例如：

<a href="/.auth/login/github?post_login_redirect_uri=/products">Login</a>

Logout

/.auth/logout 路由将用户从 Web 应用中注销。 可以添加指向站点导航的链接，以允许用户注销，如以下示例所示。

<a href="/.auth/logout">Log out</a>

与登录一样，可以使用 post_logout_redirect_uri 查询字符串参数提供在注销后要重定向到的 URL：

<a href="/.auth/logout?post_logout_redirect_uri=/home">Log out</a>

访问用户信息

可以通过直接访问终结点或通过 API 函数中的特殊标头访问与身份验证相关的用户信息。

如果向 /.auth/me 路由发送 GET 请求，则将收到一个 JSON 对象，该对象包含当前登录用户的数据。 未经身份验证的用户发送的请求会返回 null。

以下是一个响应对象示例。

{
  "identityProvider": "github",
  "userId": "d75b260a64504067bfc5b2905e3b8182",
  "userDetails": "github-user-example",
  "userRoles": [ "anonymous", "authenticated" ]
}

API 函数

Azure Static Web Apps 中的所有 API 函数都有权访问与客户端应用程序相同的用户信息。 用户数据将传递到 x-ms-client-principal HTTP 标头中的函数。 数据序列化为 JSON 对象，并用 Base64 进行编码。

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

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

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

后续步骤

接下来，我们将在应用中实现完整的身份验证工作流。