Будування надійної системи автентифікації в Laravel з використанням Breeze, соціального входу та OTP - javascript.org.ua

Повний посібник з реалізації сучасних функцій автентифікації у вашому Laravel застосунку.

Автентифікація є важливою складовою будь-якого сучасного веб-застосунку. У цьому посібнику ми розглянемо налаштування надійної системи автентифікації в Laravel за допомогою Breeze з Inertia.js та React. Також ми реалізуємо перевірку електронної пошти, вхід через Google OAuth і перевірку через OTP за допомогою Twilio.

Налаштування проекту Laravel

Спочатку створимо новий проект Laravel. Відкрийте термінал і виконайте команду:

composer create-project laravel/laravel auth-demo  
cd auth-demo

Переконайтеся, що у вас встановлено PHP 8.1+ і Composer. Після створення проекту налаштуйте з'єднання з базою даних у файлі .env:

DB_CONNECTION=mysql  
DB_HOST=127.0.0.1  
DB_PORT=3306  
DB_DATABASE=auth_demo  
DB_USERNAME=root  
DB_PASSWORD=

Встановлення та налаштування Breeze з Inertia.js

Laravel Breeze забезпечує мінімальну та просту реалізацію автентифікації. Ми використаємо його з Inertia.js та React для сучасного інтерфейсу односторінкового застосунку.

composer require laravel/breeze  
php artisan breeze:install react

Коли з'явиться запит, підтвердіть встановлення шаблонів Inertia.js. Далі встановіть і скомпілюйте залежності для фронтенду:

npm install  
npm run dev

Огляд вбудованих функцій автентифікації

Коли ви встановлюєте Laravel Breeze, ви отримуєте кілька функцій автентифікації за замовчуванням:

Реєстрація користувача
Вхід/Вихід
Процес скидання пароля
Функціонал "Запам'ятати мене"
Підтвердження пароля

Процес скидання пароля включає:

Посилання "Забули пароль?" на сторінці входу
Форма запиту на скидання пароля
Безпечні токени для скидання пароля
Сповіщення на електронну пошту для посилань на скидання пароля
Сторінка підтвердження скидання пароля

Процес скидання обробляється такими файлами:

resources/js/Pages/Auth/ForgotPassword.jsx - Форма для скидання пароля
resources/js/Pages/Auth/ResetPassword.jsx - Форма для нового пароля
App/Http/Controllers/Auth/PasswordResetLinkController.php - Обробник для надсилання посилань на скидання пароля
App/Http/Controllers/Auth/NewPasswordController.php - Логіка для скидання пароля

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

Реалізація перевірки електронної пошти

Щоб вимагати перевірку електронної пошти, ми використаємо Mailtrap для тестування нашої електронної пошти в процесі розробки. Mailtrap — це фіктивний SMTP сервер, який перехоплює всі електронні листи вашого застосунку, дозволяючи тестувати потоки електронної пошти без надсилання реальних листів.

Налаштування Mailtrap

Спочатку створіть безкоштовний акаунт на Mailtrap.io
Після входу перейдіть до вашої поштової скриньки на Mailtrap:

Натисніть на “Email Testing”
Виберіть вашу скриньку (або створіть нову)
У випадаючому меню "Integrations" виберіть "Laravel 9+"
Оновіть ваш файл .env з обліковими даними Mailtrap:

MAIL_MAILER=smtp  
MAIL_HOST=sandbox.smtp.mailtrap.io  
MAIL_PORT=2525  
MAIL_USERNAME=your_mailtrap_username  
MAIL_PASSWORD=your_mailtrap_password  
MAIL_ENCRYPTION=tls  
MAIL_FROM_ADDRESS="[email protected]"  
MAIL_FROM_NAME="${APP_NAME}"

Як Mailtrap працює з Laravel

Коли ваш застосунок надсилає листи для перевірки:

Laravel використовує ці облікові дані для з'єднання з SMTP сервером Mailtrap
Замість того щоб надсилати реальні листи, всі електронні листи перехоплюються Mailtrap
Ви можете переглядати ці листи у вашій скриньці Mailtrap
Ви можете тестувати різні поштові клієнти, оцінки спаму та відображення HTML/CSS

Реалізація вимог для перевірки

Реалізуйте інтерфейс MustVerifyEmail у вашій моделі User:

use Illuminate\Contracts\Auth\MustVerifyEmail;  

class User extends Authenticatable implements MustVerifyEmail  
{  
 // ... існуючий код  
}

Оновіть маршрути автентифікації у файлі `web.php`:

Route::middleware(['auth', 'verified'])->group(function () {
Route::get('/dashboard', function () {
return Inertia::render('Dashboard');
})->name('dashboard');
});
```

Тестування перевірки електронної пошти

Зареєструйте нового користувача у вашому застосунку
Перевірте свою скриньку Mailtrap — ви повинні побачити лист для перевірки
Натисніть на посилання для перевірки в Mailtrap
Користувач повинен бути перевірений і мати можливість доступу до захищених маршрутів

Розгляди для продакшн-середовища

При переході до продакшн-середовища:

Замість облікових даних Mailtrap введіть реальні дані для вашого SMTP сервера
Оновіть MAIL_FROM_ADDRESS на вашу доменну електронну адресу
Розгляньте сервіси для доставки електронної пошти, такі як:

Amazon SES
Mailgun
Postmark
SendGrid

Додавання входу через Google (Google OAuth)

Давайте реалізуємо вхід через Google OAuth за допомогою Laravel Socialite.

Встановіть Socialite:

composer require laravel/socialite

Додайте облікові дані Google у ваш файл .env:

GOOGLE_CLIENT_ID=your_client_id  
GOOGLE_CLIENT_SECRET=your_client_secret  
GOOGLE_REDIRECT_URI="${APP_URL}/auth/google/callback"

Створіть необхідні маршрути:

use Laravel\Socialite\Facades\Socialite;  

Route::get('/auth/google', function () {  
 return Socialite::driver('google')->redirect();  
});  

Route::get('/auth/google/callback', function () {  
 $googleUser = Socialite::driver('google')->user();  

 $user = User::updateOrCreate([  
 'email' => $googleUser->email,  
 ], [  
 'name' => $googleUser->name,  
 'google_id' => $googleUser->id,  
 'email_verified_at' => now(),  
 ]);  

 Auth::login($user);  

 return redirect('/dashboard');  
});

Тестування соціального входу з Ngrok

Щоб протестувати процес Google OAuth локально, ми використовуватимемо Ngrok для створення безпечного тунелю до нашого локального середовища розробки.

Встановіть Ngrok з ngrok.com
Запустіть ваш Laravel застосунок:

php artisan serve

У новому вікні термінала запустіть Ngrok:

ngrok http 8000

Оновіть облікові дані Google OAuth в консолі Google Cloud, вказавши URL Ngrok:

Авторизовані JavaScript джерела: https://your-ngrok-url
Авторизовані URI для редіректу: https://your-ngrok-url/auth/google/callback

Оновіть файл .env з URL Ngrok:

APP_URL=https://your-ngrok-url  
GOOGLE_REDIRECT_URI="https://your-ngrok-url/auth/google/callback"

Ви можете знайти повний код проекту тут.

Перекладено з: Building a Robust Authentication System in Laravel with Breeze, Social Login, and OTP