Забудьте о головной боли с аутентификацией в JS. Знакомьтесь, MSAL.js

Знакомая ситуация? Нужно сделать логин в приложении. И не просто логин, а «через рабочую учётку Microsoft». А ещё хорошо бы добавить личные аккаунты. И, может быть, даже вход через соцсети. Каждый раз это превращается в квест с изучением спецификаций OAuth 2.0, ручной обработкой токенов и бессонными ночами. Так вот, есть способ сделать всё это проще, быстрее и безопаснее.

Сегодня мы заглянем под капот репозитория Microsoft Authentication Library for JavaScript (MSAL.js) — официального инструмента от Microsoft, который берёт на себя всю грязную работу по аутентификации в мире Azure AD.

Что это такое и зачем оно вам?

Если коротко, MSAL.js — это швейцарский нож для работы с платформой идентификации Microsoft. Он позволяет вашим JavaScript-приложениям (как на клиенте, так и на сервере) аутентифицировать пользователей и получать токены для доступа к защищённым ресурсам, таким как Microsoft Graph API, Dynamics 365 или ваши собственные API.

Кому это пригодится?

Корпоративным разработчикам: Если вы создаёте внутренние порталы, дашборды или любые другие приложения для сотрудников, MSAL.js — ваш стандартный выбор для интеграции с рабочими учётными записями (Azure Active Directory).
Разработчикам SaaS-продуктов: Хотите предоставить своим клиентам возможность входа через их Microsoft-аккаунты? MSAL.js сделает это возможным.
Всем, кто работает с Microsoft Graph: Чтобы читать почту, файлы из OneDrive, события календаря или данные о пользователях, нужен access-токен. MSAL.js — самый прямой путь его получить.

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

Ключевые возможности: не просто библиотека, а целая экосистема

Давайте разберёмся, что же делает MSAL.js таким удобным.

1. Один репозиторий для всех платформ

Самое крутое в MSAL.js — его структура. Это не монолит, а набор специализированных пакетов. Вам не нужно тащить в свой фронтенд-проект код для Node.js и наоборот.

Структура пакетов MSAL.js

Вот основные "жители" этого репозитория:

msal-browser: Ядро для всех браузерных приложений. Работает с любым фреймворком (или без него).
msal-node: Мощная библиотека для бэкенда на Node.js. Поддерживает кучу сценариев, от веб-приложений до демонов и CLI-инструментов.
msal-react и msal-angular: Специальные обёртки для React и Angular. Они предоставляют хуки, компоненты и сервисы, которые делают интеграцию с вашим любимым фреймворком максимально бесшовной.
msal-node-extensions: Полезное дополнение для msal-node, которое помогает безопасно кэшировать токены на разных платформах.

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

2. Современные и безопасные сценарии аутентификации

MSAL.js идёт в ногу со временем и реализует самые современные и безопасные протоколы. Для одностраничных приложений (SPA) он использует Authorization Code Flow с PKCE. Если говорить по-человечески, это означает, что даже если кто-то перехватит код авторизации, он не сможет им воспользоваться без специального секретного ключа, который генерируется на лету. Это отраслевой стандарт безопасности для клиентских приложений.

А для Node.js выбор ещё богаче:

Authorization Code Grant: Классический сценарий для веб-приложений.
Device Code Grant: Для устройств без браузера или с ограниченным вводом (например, CLI-утилиты).
Client Credential Grant: Когда вашему сервису нужно получить доступ к API от своего имени, без участия пользователя.
On-behalf-of Flow: Сложный, но мощный сценарий, когда один сервис обращается к другому от имени пользователя.

Вам не нужно вручную реализовывать эти сложные потоки — библиотека всё делает за вас.

3. Полностью настраиваемый UI входа (Native Authentication)

Одна из самых интересных фич, особенно для клиентских приложений, — это Native Authentication. Что это значит? Вместо того чтобы перенаправлять пользователя на стандартную страницу входа Microsoft, вы можете создать свой собственный, полностью кастомизированный интерфейс регистрации и входа прямо внутри вашего SPA.

Это идеально подходит для продуктов, ориентированных на конечных потребителей, где важен брендинг и бесшовный пользовательский опыт. Пользователь даже не покинет ваше приложение, чтобы войти в систему. Кстати, в коде эта фича часто упоминается как "Custom Auth", так что не пугайтесь, если встретите такое название в документации.

Как это работает на практике?

Представим, что мы делаем React-приложение, которому нужно показать календарь пользователя из Microsoft 365.

Настройка: Мы устанавливаем msal-browser и msal-react. В корне нашего приложения мы оборачиваем всё в MsalProvider и передаём ему конфигурацию (ID нашего приложения из Azure, и т.д.).
Логин: Мы создаём кнопку "Войти". По клику на неё вызываем хук useMsal, из которого достаём функцию loginPopup() или loginRedirect(). MSAL перенаправит пользователя на страницу входа Microsoft.
Получение токена: После успешного входа пользователь возвращается в наше приложение. Теперь, когда нам нужно сделать запрос к Microsoft Graph API, мы снова используем хук useMsal и вызываем acquireTokenSilent(). Эта функция тихо, в фоновом режиме, получит для нас свежий access-токен.
Вызов API: Мы добавляем полученный токен в заголовок Authorization нашего HTTP-запроса к Graph API и получаем данные календаря.

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

Выводы: кому и когда стоит использовать MSAL.js?

MSAL.js — это не просто "ещё одна библиотека для аутентификации". Это зрелое, мощное и гибкое решение, которое является золотым стандартом для интеграции JavaScript-приложений с экосистемой Microsoft.

Вам точно стоит его попробовать, если:

Вы пишете приложение для корпоративного сегмента, где Azure AD — основной провайдер идентификации.
Ваше приложение должно тесно интегрироваться с сервисами Microsoft 365 (Graph API).
Вы строите B2C-продукт и хотите дать пользователям возможность входить через их личные аккаунты Microsoft, Google, Facebook (с помощью Azure AD B2C).
Вы цените безопасность и хотите использовать проверенные временем и сообществом решения от вендора.

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