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

  • Статья

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

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

Данные субъекта клиента

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

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

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

{
  "identityProvider": "github",
  "userId": "d75b260a64504067bfc5b2905e3b8182",
  "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, имеют доступ к той же информации пользователя, что и клиентское приложение, за исключением массиваclaims. API получает сведения, позволяющие определить пользователя, но самостоятельно не проверяет, прошел ли пользователь проверку подлинности и соответствует ли он требуемой роли. Правила управления доступом определяются в файле staticwebapp.config.json.

Данные субъекта клиента передаются в функции API в заголовке запроса x-ms-client-principal. Данные субъекта клиента отправляются в виде строки в кодировке 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.

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

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