В этой статье мы углубимся в особенности Laravel Breeze, сравним его с другими стартовыми наборами Laravel и проведем вас через процесс установки. Кроме того, мы изучим сгенерированные файлы, настроим процесс регистрации и настроим пользовательский интерфейс (пользовательский интерфейс) в соответствии с потребностями вашего проекта.

Что такое Laravel Breeze

Laravel Breeze — это пакет поддержки аутентификации для Laravel. Используя его, вы можете получить полностью работающую систему входа и регистрации за считанные минуты. Он поддерживает Blade, Vue и React, а также имеет версию API.

Основные особенности Laravel Breeze:

  • Авторизоваться
  • Постановка на учет
  • Восстановление пароля
  • Подтверждение адреса электронной почты
  • Страница профиля, с редактированием

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

В экосистеме Laravel есть два похожих пакета, которые могут сбивать с толку, если вы новичок в этом пространстве.

Первым из них является Laravel Fortify, который представляет собой серверную часть безголовой аутентификации, что делает его идеальным для создания пользовательских систем аутентификации без предварительно созданного пользовательского интерфейса.

Выберите Fortify, если у вас очень настраиваемый пользовательский интерфейс или если вы отвечаете только за серверную часть аутентификации.

Другой пакет — Laravel Jetstream, который предлагает более продвинутую отправную точку для приложений Laravel, включая такие функции, как двухфакторная аутентификация и управление командой.

Напротив, Laravel Breeze лучше всего подходит разработчикам, которые ищут простую, но настраиваемую основу аутентификации с поддержкой различных интерфейсных фреймворков и минимальными накладными расходами.

Если вы новичок в Laravel, проверьте Laravel Breeze для простой аутентификации! Узнайте больше в этом руководстве 🤝Нажмите, чтобы твитнуть

Установка Laravel Breeze в свежий проект Laravel

Для простоты предположим, что мы уже создали новый проект Laravel. Если вам нужна помощь, вы можете следовать нашему руководству по настройке нового приложения Laravel в Kinsta.

После этого нам нужно установить Laravel Breeze с помощью следующей команды:

composer require laravel/breeze --dev

В этом уроке мы будем использовать Blade, который является шаблонизатором по умолчанию для Laravel. Чтобы запустить скаффолдинг, выполните следующие команды:

php artisan breeze:install blade
 
php artisan migrate
npm install
npm run dev

У Laravel Breeze также есть версии Vue/React/custom API, для их использования нужно просто поставить флаг в команде.

Для запуска Vue:

php artisan breeze:install vue

Для запуска реакции

php artisan breeze:install react

Для пользовательского запуска API

php artisan breeze:install api

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

Как настроить пользовательский интерфейс

Laravel Breeze использует TailwindCSS под капотом, для настройки пользовательского интерфейса мы можем использовать любой служебный класс Tailwind.

Вы можете настроить каждую часть пользовательского интерфейса, отредактировав файлы представления в resources/views/auth; папке некоторая часть пользовательского интерфейса организована в компоненты Blade, вы можете найти их в resources/views/components папка.

Изменение логотипа Laravel на логотип нашей организации

Laravel Breeze использует компоненты Blade для организации многократно используемого кода. Так, например, вот как можно изменить логотип в resources/views/components/application-blade.php файл.

Откройте файл и замените текущий контент своим файлом svg.

Изменение цвета основной кнопки

Открой resources/views/components/primary-button.blade.php файл. Здесь вы можете внести любые изменения, например, настроить кнопку на странице входа в соответствии с цветом вашего бренда.

Основная кнопка изменена на фирменный цвет
Основная кнопка изменена на фирменный цвет

Как настроить процесс регистрации

Страница регистрации Laravel Breeze содержит 4 предопределенных поля:

  1. Имя
  2. Электронная почта
  3. Пароль
  4. Подтверждение пароля
Предустановленные поля страницы регистрации
Предустановленные поля страницы регистрации

Чтобы расширить поля, которые мы хотели бы иметь в нашей регистрационной форме, нам нужно открыть resources/views/auth/register.blade.php файл.

Чтобы продолжить наш пример, мы создадим поле телефона после поля электронной почты. Для этого добавьте следующий код после поля электронной почты:

<div class="mt-4">
   <x-input-label for="phone" :value="__('Phone')" />
   <x-text-input id="phone" class="block mt-1 w-full" type="text" name="phone" :value="old('phone')" required autocomplete="phone" />
   <x-input-error :messages="$errors->get('phone')" class="mt-2" />
</div>

Поле телефона теперь видно в регистрационной форме.

Добавлено поле для телефона
Добавлено поле для телефона

Изменение бэкенда для хранения нового поля телефона

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

Создайте новую миграцию, которая добавит поле телефона в наш users стол.

php artisan make:migration add_phone_field_to_users_table

Откройте созданный файл и добавьте строковое поле с именем «телефон»:

Schema::table('users', function (Blueprint $table) {
   $table->string('phone')->nullable();
});

После этого запустите миграцию:

php artisan migrate

Чтобы сохранить поле телефона, нам нужно изменить RegisteredUserController.phpв store метод внесите эти изменения:

$request->validate([
   'name' => ['required', 'string', 'max:255'],
   'email' => ['required', 'string', 'email', 'max:255', 'unique:'.User::class],
   ‘phone’ => [‘required’, ‘string’, ‘max:255’],
   'password' => ['required', 'confirmed', Rules\Password::defaults()],
]);

$user = User::create([
   'name' => $request->name,
   'email' => $request->email,
   ‘phone’ => $request->phone,
   'password' => Hash::make($request->password),
]);

Не забудьте добавить phone поле для заполняемых свойств в модели пользователя.

protected $fillable = [
   'name',
   'email',
   'phone',
   'password',
];

Вот и все, теперь у нас есть модифицированная регистрационная форма!

Как включить проверку электронной почты

Проверка электронной почты — это процесс проверки и аутентификации электронных писем, которые пользователи предоставили в регистрационной форме.

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

use Illuminate\Contracts\Auth\MustVerifyEmail;
…

class User extends Authenticatable implements MustVerifyEmail
{
…
}

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

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

Мы создадим новый маршрут под названием «только проверенный» и добавим промежуточное ПО «аутентификация» и «проверено». Промежуточное ПО аутентификации предотвращает доступ гостей, а проверенное промежуточное ПО проверяет, подтвердил ли пользователь свою электронную почту.

Вот пример:

Route::get('/only-verified', function () {
   return view('only-verified');
})->middleware(['auth', 'verified']);

Нужна система аутентификации как можно скорее? Попробуйте Laravel Breeze. Простые и настраиваемые шаблоны для Blade, Vue, React и API. Проверьте это! 👇Нажмите, чтобы твитнуть

Краткое содержание

Laravel Breeze — отличный инструмент для быстрой настройки системы аутентификации для вашего проекта Laravel.

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

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