Полное руководство по каркасам аутентификации в Laravel

Каркасы аутентификации в Laravel

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

Laravel Jetstream

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

Разработан с использованием Tailwind CSS. Этот CSS-фреймворк становится стандартом в Laravel-сообществе.

Два вкуса

Jetstream позволяет выбирать между двумя фронтенд-стеками:

  • Livewire + Alpine
  • Inertia + Vue

Это относительно новые инструменты, но их популярность растёт.

Вы спросите: «Мне тогда придется писать приложение, используя Livewire или Inertia»?

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

Если вы собираетесь так поступить, то я рекомендую использовать Livewire-версию.

Если вы не знаете, что такое Livewire — по сути, инструмент, который позволяет вам создавать Blade-шаблоны и бэкенд-классы компонентов, которые взаимодействуют друг с другом. Это позволяет создавать динамические пользовательские интерфейсы только с использованием бэкенд-кода.

По этой причине, если вы не знаете, какой стек вам больше подходит, то используйте Livewire, потому что каждый Laravel-разработчик понимает Blade. А Livewire очень легко понять, если вы понимаете Blade. Просто волшебство какое-то.

Inertia — отличный выбор, если у вас есть опыт работы с Vue.js и вам он нравится. Фронтенд написан на чистом Vue. Inertia фактически работает как слой между Laravel-бэкендом и Vue-компонентами.

Вместо того, чтобы создавать API-маршруты, Inertia позволяет возвращать ответы из контроллеров, как если бы вы использовали return view(...), но вы получаете возможность использовать Vue во фронтенде.

Особенности

Jetstream имеет несколько интересных функций, которых нет в других подобных инструментах.

У него есть специальная страница, где пользователи могут редактировать своё имя, почту и фото.

Пользователи могут удалить свою учетную запись одним нажатием (конечно же, с подтверждением по паролю). Это необходимо для GDPR (закон Евросоюза «Общий регламент по защите данных»).

Он также поддерживает двухфакторную аутентификацию. Пользователи могут её включить опционально — им показывают QR-код, который они будут сканировать с помощью приложения, например Google Authenticator, и им выдаются ключи восстановления. Их можно хранить в диспетчере паролей, например в 1Password, или, если они старой закалки, то записать на бумажку и запереть в сейфе.

Jetstream работает непосредственно с Laravel Sanctum (пакет для API-аутентификации). Пользователи могут генерировать API-ключи и назначать им права.

Также в нём присутствует продвинутая (опциональная) фича для групп пользователей (команд). Из документации:

Работа с командами в Jetstream позволяют каждому зарегистрированному пользователю создавать множество команд и принадлежать им. По умолчанию каждый зарегистрированный пользователь принадлежит команде Personal.

У каждого пользователя в Jetstream есть «текущая команда (current team)». Это команда в которой пользователь может просматривает ресурсы. Например, если вы создаете приложение-календарь, то ваше приложение будет отображать предстоящие события календаря для текущей команды пользователя. Вы можете получить доступ к текущей команде пользователя через отношения $user->currentTeam.

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

Использование

Обратите внимание, что Jetstream не предназначен для установки на любом этапе разработки. Только в самом начале.

Самый простой способ установить Jetstream:

laravel new my-app --jet

(Убедитесь , что установщик Laravel обновлён).

Установщик спросит, какой стек вы предпочитаете: Livewire или Inertia. Затем он установит Jetstream, и всё, что вам нужно будет сделать, это настроить учётку базы данных в файле .env и запустить миграции командой php artisan migrate.

И всё. Вы можете открыть свой проект в браузере и начать использовать Jetstream.

Laravel Fortify

В документации сказано, что Laravel Fortify — это независимая бэкенд-аутентификация для Laravel.

Это означает, что это не фронтенд-инструмент для создания каркаса, а бэкенд для вашего фронтенда. Jetstream, к примеру, использует Fortify.

Fortify предоставляет нам всю бэкэнд-логику для аутентификации (как если вы использовали Laravel 7, то это были бы Auth-контроллеры).

Вы просто «подключаете» свои шаблоны к бэкенд-логике с помощью такого кода:

use Laravel\Fortify\Fortify;

Fortify::loginView(function () {
    return view('auth.login');
});

Он также позволяет настраивать логику. Например, вы можете установить, как пользователи должны аутентифицироваться (входить в систему):

Fortify::authenticateUsing(function (Request $request) {
    $user = User::where('email', $request->email)->first();

    if ($user && Hash::check($request->password, $user->password)) {
        return $user;
      }
})

Laravel UI

Очень простой каркас аутентификации, построенный на CSS-фреймворке Bootstrap. Он также позволяет выбрать между пресетами Vue и React.

В нем нет расширенного функционала Jetstream, он просто предоставляет функции и шаблоны логина, регистрации и забыл/подтвердить/cбросить пароль.

Тейлор Отвелл его особо не рекомендует, но, если вам нужен Bootstrap, то это официальный пакет.

Laravel-сообщество сделало несколько форков Jetstream, которые также используют Bootstrap. Например: Jetstrap . Я не могу их рекомендовать, потому что не пробовал, но если вам нужен функционал Jetstream и вёрстка Bootstrap, то они могуть стать хорошим выбором.

Лично я бы порекомендовал вместо этого начать изучать Tailwind CSS. Он идеально соответствует эргономике Jetstream, гораздо больше, чем Bootstrap. И, хотя кривая обучаемости стека TALL (Tailwind, Alpine, Livewire, Laravel) сложнее, чем для Bootstrap, но ваши усилия окупятся и вы получите большое удовольствие от работы с этими новыми технологиями.

Это при условии, что вы понимаете основы веб-разработки и Laravel. Если нет, сосредоточьтесь в первую очередь на них. Bootstrap удобен, если вам нужно просто рабочее приложение без запарок по дизайну и CSS. Так что, если вы только изучаете Laravel, Bootstrap покроет ваши потребности в вёрстке и у вас будет меньше поводов для беспокойства.

Сторонние пресеты

Они используют ту же логику, что и Laravel UI, но предоставляют больше возможностей, чем просто Vue и React.

Самые популярные:

Также есть множество других. Вы можете найти их в гугле, в зависимости от того, что именно вам нужно. Например, попробуйте поискать «laravel react preset» или «laravel react spa template». Если они обновлялись недавно, то их можно смело использовать.

Ваше собственное решение

И, наконец, вы, конечно, можете создать собственное решение. С Fortify это очень просто — как я уже говорил, он предоставляет всю бэкенд-логику, поэтому всё, что вам нужно сделать, это подключить свои шаблоны.

Но вам даже не обязательно использовать Fortify. Почитайте документацией по аутентификации. Довольно просто написать свою собственную. Хотя, если вам нужны такие функции, как «забыл пароль», то лучше выбрать Fortify.

Еще один момент: вы можете взять из Jetstream только шаблоны и использовать их напрямую с Fortify, без всего остального функционала пакета.

Вы скажете: «Но мне не нужны ни Livewire, ни Inertia».

Не нужно — не используйте. Вот отрывок из документации по Jetstream:

Laravel Jetstream предоставляет шаблоны для входа в систему, двухфакторной аутентификации, регистрации, сброса пароля и проверки электронной почты. Для простоты, независимо от выбранного стека, эти шаблоны сделаны на Blade и не используют JavaScript.

Это означает, что шаблоны, используемые для «гостевых» страниц, вообще не используют Livewire или Inertia. Это просто Blade с Fortify-бэкэндом (который работает как контроллеры).

Что позволит нам сделать очень интересную вещь — просто скопируем эти шаблоны из Jetstream и используем их в приложении на Fortify. Это даст нам практически Laravel UI, но с Tailwind CSS вместо Bootstrap.

Следующая инструкция поможет вам это сделать:

  • Установите Fortify
  • Опубликуйте шаблоны Jetstream, скопируйте их и переместите во views/components/jet
    • Вам понадобится только некоторые из них, но если вы хотите быстро начать работу, то опубликуйте их все, чтобы быть уверенным, что они заработают
    • Совет: если вы выберете Inertia для установки Jetstream, у вас будет намного меньше Blade-шаблонов
  • Переименуйте x-jet- в x-jet. во всех файлах
  • Скопируйте package.json
  • Скопируйте app.css
  • Скопируйте webpack.mix.js
  • Скопируйте tailwind.config.js
  • npm install
  • npm run watch
  • Откройте в браузере

Примечание: Этот процесс немного утомителен, но, судя по обсуждению в моем Твиттере, он явно востребован многими разработчиками. В сущности мы получим старый добрый make:auth, но с современными шаблонами на Tailwind.

Если меня поддержит народ, то я создам отдельный пакет и буду поддерживать его, либо попытаюсь объединить его с Jetstream, в качестве третьей опции установки.

Что вам нужно использовать

Как видите, есть множество пакетов, которые вы можете использовать для создания каркаса аутентификации в Laravel. Это может затруднить выбор.

Вы должны руководствоваться тем, какие именно технологии вам нужны.

Я бы не стал беспокоиться о том, являются ли технологии, используемые Jetstream, зрелыми, так как вам не обязательно их использовать, можно просто установить и написать остальную часть как вам нужно.

Я новичок и не знаю Tailwind

  • Возможно, лучше начать с Laravel UI на Bootstrap, если есть опыт работы с Bootstrap.
  • Если Bootstrap вы не знаете, то начать изучать Tailwind CSS — хороший выбор. Он даст вам больше знаний о CSS, чем Bootstrap, да в Интернете полно компонентов для быстрого создания пользовательского интерфейса.
  • Основной недостатк Tailwind — в нём не очень много копипастных компонентов, в отличие от Bootstrap.

Xочу Bootstrap

  • Laravel UI — официальный пакет с Bootstrap
  • Jetstrap — если нужен функционал Jetstream. Как объяснял выше, Jetstrap это неофициальный пакет, поэтому не могу определенно его рекомендовать.

Xочу функционал Jetstream

  • В идеале официальный Jetstream
  • Jetstrap, если нужен Bootstrap

Хочу Tailwind CSS

  • Jetstream — новейший проект с наибольшим количеством функций
  • Пресет TALL — если также нужны Livewire и Alpine
  • Fortify с шаблонами Jetstream, как описано выше
  • Пресет Tailwind CSS, поддерживаемый Майклом Дайриндой

Хочу TALLstack

  • Jetstream — новейший проект с наибольшим количеством функций
  • Пресет TALL — если нужен более простой пресет

Хочу Inertia

Хочу Vue

  • Jetstream с Inertia, если нужна Inertia
  • Laravel UI с Vue, если планируете добавлять Vue в Blade
  • Пресет Inertia.js
  • Без пресета — используйте кастомный фронтенд (например, Nuxt), а Laravel только для API.

Хочу React

  • Laravel UI с React, если планируете добавлять React в Blade
  • Inertia.js с React (похоже, что обновленных пресетов нет)
  • Без пресетов

Хочу Fortify с дизайном Tailwind UI

  • Fortify с шаблонами Jetstream, как рассказывал выше

Хочу свой собственный UI

  • Fortify с кастомными шаблонами
  • Laravel UI с кастомными шаблонами. Обратите внимание, что Laravel UI не такой современный, как Fortify,и возможно не будет поддерживаться в таком же объеме.

Не нужен весь Jetstream, но нужно больше, чем Fortify

Fortify UI поставляется с 2FA и возможностью обновления пользовательского профиля/пароля

Хочу всё сделать сам, включая бэкенд аутентификации

  • Кастомный бэкэнд аутентификации, как описано в документации с кастомным фронтендом

Автор: Samuel Štancl
Перевод: Алексей Широков

Наш Телеграм-канал — следите за новостями о Laravel.