Управление проверкой подлинности в Статических веб-приложениях

  • 2 мин

Веб-приложение списка покупок должно однозначно идентифицировать своих пользователей и предоставить им личное пространство для хранения продуктов.

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

Поставщики удостоверений

Статические веб-приложения Azure упрощают процесс проверки подлинности, управляя ею с помощью следующих поставщиков:

  • Microsoft Entra ID
  • GitHub
  • X

По умолчанию все поставщики проверки подлинности включены. Далее мы увидим, как можно ограничить поставщик проверки подлинности с помощью настраиваемого правила маршрута.

Системная папка

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

Имя входа

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

Поставщик удостоверений Маршрут для входа
Microsoft Entra ID /.auth/login/aad
GitHub /.auth/login/github
X /.auth/login/x

Например, чтобы выполнить вход с помощью GitHub, можно включить в веб-приложение ссылку для входа с помощью следующего фрагмента кода.

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

Если вы хотите, чтобы после входа пользователь возвращался на определенную страницу, укажите URL-адрес в параметре строки запроса post_login_redirect_uri. Например:

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

Выход

Маршрут /.auth/logout выполняет выход пользователя из веб-приложения. Вы можете добавить ссылку для навигации по сайту, чтобы разрешить пользователю выполнить выход, как показано в следующем примере.

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

Как и при входе, можно указать URL-адрес для перенаправления после выхода из системы с помощью post_logout_redirect_uri параметра строки запроса:

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

Доступ к сведениям о пользователе

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

При отправке запроса GET в маршрут /.auth/me вы получите объект JSON с данными для текущего пользователя, вошедшего в систему. Для запросов от пользователей, не прошедших проверку подлинности, возвращается значение null.

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

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

Функции API

Все функции API, доступные в Статических веб-приложениях Azure, имеют доступ к тем же данным пользователя, что и ваше клиентское приложение. Пользовательские данные передаются в функции в заголовке HTTP x-ms-client-principal. Данные сериализуются как объект 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)
    }
  };
};

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

Далее мы реализуем полный рабочий процесс проверки подлинности в нашем приложении.