laravel8バージョンでは、認証機能にBreezeとJetstreamというスターターキットが導入されました。
Jetsreamにはteamサポートがあり、それを使用してSNSのような招待制度やWordPressのユーザーグループのようなユーザー分けが可能です。
一方、Breezeは最小限の認証機能だけで、teamサポートのような機能は自分で設定する必要があります。ただ、Breezeは、Jetstreamよりはるかにカスタマイズしやすく感じたので、こちらを使用してマルチ認証を設定したいと思います。
今回はUserに対し、Adminを増やしています。
もっと簡単な実装方法もあるのですが、ユーザータイプを管理・販売ユーザー・購入ユーザーなどふやせるような実装方法のほうが、あとあと便利なので、こちらを紹介します。
Laravel本体のインストールをする
まずLaravelプロジェクトを作成します。
Xamppのコントロールパネルで、Shellボタンを押してShellを立ち上げ、次のコードを入力します。
“project-name” には、自身のプロジェクト名を入力します。
cd htdocscomposer create-project laravel/laravel:^8.0 --prefer-dist project-nameインストールが終わったら、VSCodeでこのプロジェクトを開きます。
Breezeのインストールをする
VSCodeを立ち上げ、フォルダを開くで、このプロジェクトフォルダを選びます。
その後、ターミナルを開いて、コードを入力します。
詳しくは過去記事（Laravel8 にログイン認証を実装する（Breeze編））参照
composer require laravel/breeze --devphp artisan breeze:installnpm installnpm run devENVとapp.phpの設定をする
ENVファイルとapp.phpの設定をします。
ENVファイルは、サイト名・データベース・送信メールの設定。
app.phpは、日本語に関する設定を行います。
'timezone' => 'Asia/Tokyo',
'locale' => 'ja',
'faker_locale' => 'ja_JP',データベースのマイグレーションをする
データベースのマイグレーションを行います。
databaseフォルダにusersテーブル用のマイグレーションファイルがあるので、必要に応じて編集します。
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateUsersTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name')->nullable();
$table->string('nickname');
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->rememberToken();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('users');
}
}ターミナルに下記のコードを入力します。
php artisan migrate管理用AdminのModelをつくる
現在、Laravelにはユーザー用のテーブルしかないので、このLaravelを管理するAdminのテーブルやモデルを作りたいと思います。
-mをつけることで一緒にマイグレーションファイルも作成してくれます。モデルを作成するときはおすすめのコマンドです。
php artisan make:model Admin -m
Modelsの中にAdmin.phpができているので、User.phpの中身をまるっとコピーしてペーストします。
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
class Admin extends Authenticatable
{
use HasFactory, Notifiable;
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name', 'email', 'password', 'nickname'
];
/**
* The attributes that should be hidden for arrays.
*
* @var array
*/
protected $hidden = [
'password',
'remember_token',
];
/**
* The attributes that should be cast to native types.
*
* @var array
*/
protected $casts = [
'email_verified_at' => 'datetime',
];
}モデルと一緒に作ったマイグレーションファイルは、databaseのmigrationsの中にあるので、それも編集します。usersテーブルのものをコピーしてペーストします。
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateAdminsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('admins', function (Blueprint $table) {
$table->id();
$table->string('name')->nullable();
$table->string('nickname')->unique();
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->rememberToken();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('admins');
}
}パスワードの変更もできるようにしたいので、テーブルを作成します。ターミナルに下記のコードを入力します。
php artisan make:migration create_admin_password_resets_table作成されたadmin_のマイグレーションファイルに、ユーザー用のパスワードリセットテーブルの中身をコピーしてペーストします。
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateAdminPasswordResetsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('admin_password_resets', function (Blueprint $table) {
$table->string('email')->index();
$table->string('token');
$table->timestamp('created_at')->nullable();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('admin_password_resets');
}
}マイグレーションファイルの編集ができたので、マイグレーションを実行します。
php artisan migrate
ルートの設定をする
次は、Adminのルートを設定します。
routes/auth.phpをコピーして、admin.phpにリネームします。
routes/auth.phpはuser.phpにリネームします。
それぞれのファイルに書かれたAuthフォルダは、それぞれの名前の付いたフォルダの中に格納予定なので、そこも変更します。
//admin.php
<?php
//Authの前にAdminを入れる
use App\Http\Controllers\Admin\Auth\AuthenticatedSessionController;
use App\Http\Controllers\Admin\Auth\ConfirmablePasswordController;
use App\Http\Controllers\Admin\Auth\EmailVerificationNotificationController;
use App\Http\Controllers\Admin\Auth\EmailVerificationPromptController;
use App\Http\Controllers\Admin\Auth\NewPasswordController;
use App\Http\Controllers\Admin\Auth\PasswordResetLinkController;
use App\Http\Controllers\Admin\Auth\RegisteredUserController;
use App\Http\Controllers\Admin\Auth\VerifyEmailController;
use App\Http\Controllers\Admin\HomeController;
use Illuminate\Support\Facades\Route;
//web.phpに書かれていた内容をこちらに移動
Route::get('/', function () {
return view('admin.welcome');
})->name('welcome');
Route::middleware('guest')->group(function () {
Route::get('register', [RegisteredUserController::class, 'create'])
->name('register');
Route::post('register', [RegisteredUserController::class, 'store']);
Route::get('login', [AuthenticatedSessionController::class, 'create'])
->name('login');
Route::post('login', [AuthenticatedSessionController::class, 'store']);
Route::get('forgot-password', [PasswordResetLinkController::class, 'create'])
->name('password.request');
Route::post('forgot-password', [PasswordResetLinkController::class, 'store'])
->name('password.email');
Route::get('reset-password/{token}', [NewPasswordController::class, 'create'])
->name('password.reset');
Route::post('reset-password', [NewPasswordController::class, 'store'])
->name('password.update');
});
Route::middleware('auth:admins')->group(function () {
Route::get('dashboard', [HomeController::class, 'index'])
->name('dashboard');
Route::get('verify-email', [EmailVerificationPromptController::class, '__invoke'])
->name('verification.notice');
Route::get('verify-email/{id}/{hash}', [VerifyEmailController::class, '__invoke'])
->middleware(['signed', 'throttle:6,1'])
->name('verification.verify');
Route::post('email/verification-notification', [EmailVerificationNotificationController::class, 'store'])
->middleware('throttle:6,1')
->name('verification.send');
Route::get('confirm-password', [ConfirmablePasswordController::class, 'show'])
->name('password.confirm');
Route::post('confirm-password', [ConfirmablePasswordController::class, 'store']);
Route::post('logout', [AuthenticatedSessionController::class, 'destroy'])
->name('logout');
});
//user.php
<?php
//Authの前にUserを入れる
use App\Http\Controllers\User\Auth\AuthenticatedSessionController;
use App\Http\Controllers\User\Auth\ConfirmablePasswordController;
use App\Http\Controllers\User\Auth\EmailVerificationNotificationController;
use App\Http\Controllers\User\Auth\EmailVerificationPromptController;
use App\Http\Controllers\User\Auth\NewPasswordController;
use App\Http\Controllers\User\Auth\PasswordResetLinkController;
use App\Http\Controllers\User\Auth\RegisteredUserController;
use App\Http\Controllers\User\Auth\VerifyEmailController;
use App\Http\Controllers\User\HomeController;
use Illuminate\Support\Facades\Route;
//web.phpに書かれていた内容をこちらに移動
Route::get('/', function () {
return view('user.welcome');
})->name('welcome');
Route::middleware('guest')->group(function () {
Route::get('register', [RegisteredUserController::class, 'create'])
->name('register');
Route::post('register', [RegisteredUserController::class, 'store']);
Route::get('login', [AuthenticatedSessionController::class, 'create'])
->name('login');
Route::post('login', [AuthenticatedSessionController::class, 'store']);
Route::get('forgot-password', [PasswordResetLinkController::class, 'create'])
->name('password.request');
Route::post('forgot-password', [PasswordResetLinkController::class, 'store'])
->name('password.email');
Route::get('reset-password/{token}', [NewPasswordController::class, 'create'])
->name('password.reset');
Route::post('reset-password', [NewPasswordController::class, 'store'])
->name('password.update');
});
Route::middleware('auth:users')->group(function () {
Route::get('dashboard', [HomeController::class, 'index'])
->name('dashboard');
Route::get('verify-email', [EmailVerificationPromptController::class, '__invoke'])
->name('verification.notice');
Route::get('verify-email/{id}/{hash}', [VerifyEmailController::class, '__invoke'])
->middleware(['signed', 'throttle:6,1'])
->name('verification.verify');
Route::post('email/verification-notification', [EmailVerificationNotificationController::class, 'store'])
->middleware('throttle:6,1')
->name('verification.send');
Route::get('confirm-password', [ConfirmablePasswordController::class, 'show'])
->name('password.confirm');
Route::post('confirm-password', [ConfirmablePasswordController::class, 'store']);
Route::post('logout', [AuthenticatedSessionController::class, 'destroy'])
->name('logout');
});ルートプロバイダも変更します。
appフォルダのProvidersフォルダ、RouteServiceProviderの中を変更します。
これでAdminのダッシュボードに定数が設定できました。
public const HOME = '/dashboard';
public const ADMIN_HOME = '/admin/dashboard';//admin用を追加最後にboot()も変更します。ドメイン/admin/と続くアドレスには、Adminがアクセスできるように、prefixを設定します。as()で、ルートがUserなのかAdminなのかわかりやすくします。
public function boot()
{
$this->configureRateLimiting();
$this->routes(function () {
//Route::middleware('web')->group(base_path('routes/web.php'));
Route::prefix('api')
->middleware('api')
->group(base_path('routes/api.php'));
Route::prefix('admin')
->as('admin.')
->middleware('web')
->namespace($this->namespace)
->group(base_path('routes/admin.php'));
Route::prefix('/')
->as('user.')
->middleware('web')
->namespace($this->namespace)
->group(base_path('routes/user.php'));
});
}認証のガードの設定をする
認証8.ｘ
Authファサードのguardメソッドを介して、ユーザーを認証するときに利用するガードインスタンスを指定できます。
Laravelのドキュメントにある通り、Laravelの認証では、Guardを参照して、認証ユーザーを区別します。middlewareではguards設定で指定されたものだけを認証します。
configフォルダにあるauth.phpのguards設定の中を参照するので、そこで使用するguardを設定します。
デフォルトの設定は、webとapiですが、ここに今回使うadminを追加で入れます。
'defaults' => [
'guard' => 'users',//webから変更
'passwords' => 'users',
],
//////略///////
'guards' => [
'web' => [
'driver' => 'session',
'provider' => 'users',
],
'api' => [
'driver' => 'token',
'provider' => 'users',
'hash' => false,
],
'users' => [
'driver' => 'session',
'provider' => 'users',
],
'admins' => [
'driver' => 'session',
'provider' => 'admins',
],
],
//////略///////
'providers' => [
'users' => [
'driver' => 'eloquent',
'model' => App\Models\User::class,
],
'admins' => [
'driver' => 'eloquent',
'model' => App\Models\Admin::class,
],
],
//////略///////
'passwords' => [
'users' => [
'provider' => 'users',
'table' => 'password_resets',
'expire' => 60,
'throttle' => 60,
],
'admins' => [
'provider' => 'admins',
'table' => 'admin_password_resets',
'expire' => 60,
'throttle' => 60,
],
],Middlewareの設定をする
appフォルダのHttpフォルダに、Middlewareフォルダがあります。このなかのAuthenticateを設定します。ここでは、未認証の際のリダイレクトの処理を書きます。
Route::is(パターン)の戻り値は真偽なので、パターンがadminならadmin_routeに飛ばしてねとなります。
<?php
namespace App\Http\Middleware;
use Illuminate\Auth\Middleware\Authenticate as Middleware;
use Illuminate\Support\Facades\Route; //add
class Authenticate extends Middleware
{
protected $admin_route = 'admin.login';
protected $user_route = 'user.login';
/**
* Get the path the user should be redirected to when they are not authenticated.
*
* @param \Illuminate\Http\Request $request
* @return string|null
*/
protected function redirectTo($request)
{
if (! $request->expectsJson()) {
//return route('login');
if (Route::is('admin.*')) {
return route($this->admin_route);
} else {
return route($this->user_route);
}
}
}
}次は、同じフォルダにある、RedirectIfAuthenticatedの設定をします。
ここでは認証後のリダイレクトを設定します。
ガードには定数を設定し、ガードがADMINと確認できルート文字にadminがあるなら、ADMIN_HOMEにリダイレクトします。
<?php
namespace App\Http\Middleware;
use App\Providers\RouteServiceProvider;
use Closure;
use Illuminate\Http\Request; //add
use Illuminate\Support\Facades\Auth;
class RedirectIfAuthenticated
{
private const GUARD_ADMIN = 'admins';
private const GUARD_USER = 'users';
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @param string[]|null ...$guards
* @return mixed
*/
public function handle($request, Closure $next, ...$guards)
{
/*
$guards = empty($guards) ? [null] : $guards;
foreach ($guards as $guard) {
if (Auth::guard($guard)->check()) {
return redirect(RouteServiceProvider::HOME);
}
}
*/
if (Auth::guard(self::GUARD_ADMIN)->check() && $request->routeIs('admin.*')) {
return redirect(RouteServiceProvider::ADMIN_HOME);
}
if (Auth::guard(self::GUARD_USER)->check() && $request->routeIs('user.*')) {
return redirect(RouteServiceProvider::HOME);
}
return $next($request);
}
}appフォルダのHttpフォルダには、Requestsクラスもあります。
その中にはAuthフォルダがあり、ここにも変更しなければいけないものがあります。
認証に関する関数を変更します。
//LoginRequest.php
public function authenticate()
{
$this->ensureIsNotRateLimited();
//add
if ($this->routeIs('admin.*')) {
$guard = 'admins';
} else {
$guard = 'users';
}
//if文にAuth::guard($guard)追加
if (! Auth::guard($guard)->attempt($this->only('email', 'password'), $this->boolean('remember'))) {
RateLimiter::hit($this->throttleKey());
throw ValidationException::withMessages([
'email' => trans('auth.failed'),
]);
}
RateLimiter::clear($this->throttleKey());
}Admin用のAuthコントローラーの追加
breezeをインストールした段階では、ControllersフォルダにAuthフォルダが作成され、Userはそれを使用して認証します。
しかし、今回、Adminというユーザータイプを追加で作ったので、それに応じて、AuthもUser用とAdmin用を分ける必要があります。
AuthフォルダをAdmin用、User用に分けます。appフォルダのHttpフォルダにあるControllersフォルダの中にAdminフォルダとUserフォルダを作成します。
各フォルダの中に、Authフォルダを複製して入れます。
↓
あとは、各コントローラの中身を書き換えます。
AdminのAuthの場合namespace App\Http\Controllers\Admin\Auth;//Authの前にAdmin追加view('admin.auth.login');//Viewにadminを追加Auth::guard('admins')->logout();//webからadminsを指定RouteServiceProvider::ADMIN_HOME;//HOMEから修正use App\Models\Admin;//Userから変更
RegisteredUserControllerのstoreメソッドのUserをAdminに変えるのを忘れずに。
UserのAuthの場合namespace App\Http\Controllers\User\Auth;//Authの前にUser追加view('user.auth.login');//Viewにuserを追加Auth::guard('users')->logout();//webからusersを指定
ダッシュボード用のホームコントローラーを作成します。
php artisan make:controller Admin/HomeControllerHomeControllerの中身
<?php
namespace App\Http\Controllers\Admin;
use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use GuzzleHttp\Middleware;
use Illuminate\Http\Request;
use App\Models\Admin;
use Illuminate\Support\Facades\Auth;
class HomeController extends Controller
{
public function __construct()
{
$this->middleware('auth:admins');
}
public function index()
{
$admin = Admin::find(Auth::guard('admins')->id());
return view('admin.dashboard', compact('admin'));
}
}同じ様にしてUserにもHomeControllerを作成します。
<?php
namespace App\Http\Controllers\User;
use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use GuzzleHttp\Middleware;
use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
class HomeController extends Controller
{
public function __construct()
{
$this->middleware('auth:users');
}
public function index()
{
$user = User::find(Auth::guard('users')->id());
return view('user.dashboard', compact('user'));
}
}
Viewファイルを作る
現在resourcesフォルダのviewsフォルダにauthフォルダがありますが、これもAdminとUser用に分けます。
viewsフォルダにadminフォルダとuserフォルダを作成します。その中にauthフォルダを複製して入れます。
各フォルダの全Viewファイルのroute()の中の文字列を変更します。
adminの中なら、admin.を先頭に追加し、userの中ならuser.を先頭に追加します。
//admin/auth/
<form method="POST" action="{{ route('admin.password.confirm') }}">//user/auth/
<form method="POST" action="{{ route('user.password.confirm') }}">ViewをUserとAdminに分けたので、viewに使っている共通パーツも使いまわしできない場面があるので、これも分けます。
layoutsフォルダにあるnavigation.blade.phpをコピーし、admin-navigation.blade.phpとuser-navigation.blade.phpにリネームします。
それぞれのviewファイルに書かれたrouteの中身もadminとuserに合わせて変更します。
//layouts/admin-navigation.blade.php
<nav x-data="{ open: false }" class="bg-white border-b border-gray-100">
<!-- Primary Navigation Menu -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<!-- Logo -->
<div class="shrink-0 flex items-center">
<a href="{{ route('admin.dashboard') }}">
<x-application-logo class="block h-10 w-auto fill-current text-gray-600" />
</a>
</div>
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<x-nav-link :href="route('admin.dashboard')" :active="request()->routeIs('admin.dashboard')">
{{ __('Dashboard') }}
</x-nav-link>
</div>
</div>
<!-- Settings Dropdown -->
<div class="hidden sm:flex sm:items-center sm:ml-6">
<x-dropdown align="right" width="48">
<x-slot name="trigger">
<button class="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
<div>{{ Auth::user()->name }}</div>
<div class="ml-1">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</div>
</button>
</x-slot>
<x-slot name="content">
<!-- Authentication -->
<form method="POST" action="{{ route('admin.logout') }}">
@csrf
<x-dropdown-link :href="route('admin.logout')"
onclick="event.preventDefault();
this.closest('form').submit();">
{{ __('Log Out') }}
</x-dropdown-link>
</form>
</x-slot>
</x-dropdown>
</div>
<!-- Hamburger -->
<div class="-mr-2 flex items-center sm:hidden">
<button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Responsive Navigation Menu -->
<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
<div class="pt-2 pb-3 space-y-1">
<x-responsive-nav-link :href="route('admin.dashboard')" :active="request()->routeIs('admin.dashboard')">
{{ __('Dashboard') }}
</x-responsive-nav-link>
</div>
<!-- Responsive Settings Options -->
<div class="pt-4 pb-1 border-t border-gray-200">
<div class="px-4">
<div class="font-medium text-base text-gray-800">{{ Auth::user()->name }}</div>
<div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
</div>
<div class="mt-3 space-y-1">
<!-- Authentication -->
<form method="POST" action="{{ route('admin.logout') }}">
@csrf
<x-responsive-nav-link :href="route('admin.logout')"
onclick="event.preventDefault();
this.closest('form').submit();">
{{ __('Log Out') }}
</x-responsive-nav-link>
</form>
</div>
</div>
</div>
</nav>app.bladeとguest.bladeは共通で使用できます。app.bladeには、呼び出すnavigationについて追加します。
//layouts/app.blade.php
//@include('layouts.navigation')これは消す
@if(auth('admins')->user())
@include('layouts.admin-navigation')
@elseif(auth('users')->user())
@include('layouts.user-navigation')
@endifViewsフォルダにある、dashboard.bladeとwelcome.bladeもそれぞれコピーして、adminフォルダをuserフォルダに移動します。
今まで同様、それぞれのviewファイルに書かれたrouteの中身もadminとuserに合わせて変更します。
ここまでで修正は終わりです。
ブラウザで登録テストをする
まずは、Adminで登録してみます。ブラウザにアクセスします。
http://localhost:8000/admin/register
無事ログインできました。
Userで登録してみます。
無事ログインできました。
ユーザータイプを増やすときは、こんな感じで、1個づつ増やしていけばよいと思います。