Доступ к сведениям о пользователе в Статических веб-приложениях Azure

Служба "Статические веб-приложения Azure" предоставляет связанные с проверкой подлинности сведения о пользователе с помощью конечной точки прямого доступа и передает их функциям API.

Многие пользовательские интерфейсы в значительной степени опираются на данные проверки подлинности пользователя. Конечная точка прямого доступа — это служебный API-интерфейс, который предоставляет сведения о пользователе без необходимости реализовывать пользовательскую функцию. Конечная точка прямого доступа не только удобна, но и не испытывает задержек при холодном запуске, которые характерны для бессерверной архитектуры.

В этой статье показано, как считывать сведения о пользователях из развернутого приложения. Если вы хотите читать эмулированные сведения о пользователе во время локальной разработки, см. Эмуляция авторизации и аутентификации.

Данные клиента-принципала

Объект данных основного клиента предоставляет вашему приложению сведения, позволяющие идентифицировать пользователя. В объекте субъекта клиента представлены приведенные ниже свойства.

Свойство Описание
identityProvider Имя поставщика удостоверений.
userId Специальный уникальный идентификатор пользователя для Статических веб-приложений Azure.
  • Значение уникально для каждого приложения. Например, один и тот же пользователь получает другое значение userId для одного из ресурсов Статической Веб-Приложения.
  • Значение сохраняется в течение времени существования пользователя. При удалении и добавлении одного и того же пользователя обратно в приложение создается новое значение userId.
userDetails Имя или адрес электронной почты пользователя. Одни поставщики возвращают адрес электронной почты пользователя, а другие — идентификатор пользователя.
userRoles Массив назначенных пользователю ролей.
claims Массив утверждений, возвращаемых вашим пользовательским поставщиком проверки подлинности. Доступно только в конечной точке прямого доступа.

Ниже приведен пример объекта основного клиента.

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

Конечная точка прямого доступа

Вы можете отправить запрос GET по маршруту /.auth/me и получить прямой доступ к данным клиентского идентификатора. Если состояние представления зависит от данных авторизации, используйте этот подход, чтобы улучшить производительность.

Для пользователей, вошедших в систему, ответ содержит объект JSON субъекта клиента. Для запросов от пользователей, не прошедших проверку подлинности, возвращается значение null.

С помощью API fetch1 можно получить доступ к данным субъекта клиента, используя следующий синтаксис.

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

Функции API, доступные в статические веб-приложения через серверную часть Azure Functions, имеют доступ к той же информации пользователя, что и клиентское приложение, за исключением массива 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, можно использовать API браузера fetch1 для доступа к ответу 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 вошел в систему, заголовок добавляется в запросы информации о пользователе через краевые узлы статических веб-приложений.

Примечание.

Заголовок x-ms-client-principal, доступный в функции API, не содержит массив claims.

1 API-интерфейс fetch и оператор await не поддерживаются в Internet Explorer.

Следующие шаги

Настройка параметров приложения

  • Last updated on