(Laravel7.x)標準のユーザー認証機能の利用 laravel/uiの利用 #Laravel頻出パターン #Laravelの教科書
こちらはLaravel7.xを対象にした記事となります。2020年9月9日にLaravel8がリリースされたことでLaravel8では動作しない可能性があります。
Laravel8を利用している人はこちらをご確認ください。
#はじめに
こちらの記事でMiddlewareを使った認証機能について解説を行いました。車輪の再発明と書きましたが、Laravelには基本的な機能でログイン出来るようにすでに用意されています。
本稿で説明している内容は公式ドキュメントの認証ページに書いてあるものです。laravel/uiを利用した認証機能を簡単に導入するための手順書です。
# 課題
・laravel/uiをインストールする
・認証機能を組み込んで会員登録・ログインを試す
・作成されたコードを確認する
・ログイン状態に応じた書き方を学ぶ
自動で高機能なログイン処理が作成されるため、自分で作ることはほとんどありません。
# プロジェクトの準備
まずはプロジェクトの準備を行います。create-projectを使ってプロジェクトを作成します。既存のプロジェクトに導入することも可能です。
今回は「auth_sample」というプロジェクトにしました。
composer create-project --prefer-dist laravel/laravel auth_sample "7.*"
cd auth_sample
※ Laravel7で作成するため"7.*"を指定します
次にDBの設定と作成を行います（省略）。自動的に作られる「users」テーブルを使うので、マイグレーションの実行を忘れないようにしましょう。
php artisan migrate
# laravel/uiのインストール
認証機能を利用するためlaravel/uiをインストールします。
composer require laravel/ui:2.x
※ Laravel8の影響でlaravel/uiはバージョン指定が必要となりました
こちらのコマンドの実行でpackage.jsonの書き換えが行われます。こちらはプロジェクト毎に行う必要があります。
laravel/uiをインストールすると、artisan uiコマンドが使えるようになります。これはフロントエンド開発を行うためのテンプレートです。
下記コマンドを入力して認証機能をセットアップします。
php artisan ui vue --auth
artisan uiコマンドはreactを使うためのテンプレートを作成できます。
今の所他のコマンドが無いのですが、もしかしたら今後他のパターンが増えるかもしれません。
CSSやログインに使うJSをビルドするために下記コマンドを入力します。
npm install && npm run dev
npmコマンドが無いというエラーが出る場合はNodeのインストールを行う必要があります。
上記コマンドを実行すると下記の2ファイルが作成されます。
public/css/app.css
public/js/app.js
初期状態のapp.cssとapp.jsは中身はほぼ空なので、無くても動作します。
# 動作確認
サーバーを動かして動作確認をしましょう。
php artisan serve
右上にLOGINとREGISTERというメニューが表示されます。
こちらから会員登録・ログインを試すことが出来ます。
シンプルなログイン機能だけであれば、このように簡単に導入出来ます。
シンプルといってもパスワードリマインドなどの機能もあるのですぐにでも使うことが出来ます。
# ログイン状態でのテンプレートの出し分け
ログインしているかどうか、テンプレートにはどのように書くかはwelcome.blade.phpにかかれています。
resources/views/welcome.blade.php
@auth
<a href="{{ url('/home') }}">Home</a>
@else
<a href="{{ route('login') }}">Login</a>
@if (Route::has('register'))
<a href="{{ route('register') }}">Register</a>
@endif
@endauth
@if構文と同じように@auth〜@endauthが用意されていて認証済かどうかを判定出来ます。
# 作成されたファイルの確認
初期化のコマンドでどのようなファイルが作られたか確認します。次のようなファイルが作成されています。
・Controller
app/Http/Controllers/Authに認証に関連するControllerが生成されています。
・View
resources/views/authにログイン画面に関係するテンプレートが、resources/views/layoutsにレイアウト用のテンプレートが作られています。
テンプレートファイルについては独立しているのでこのまますぐに使うことができます。
作成されたLoginController.phpを見てみましょう。
app/Http/Controllers/Auth/LoginController.php
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
class LoginController extends Controller
{
/*
|--------------------------------------------------------------------------
| Login Controller
|--------------------------------------------------------------------------
|
| This controller handles authenticating users for the application and
| redirecting them to your home screen. The controller uses a trait
| to conveniently provide its functionality to your applications.
|
*/
use AuthenticatesUsers;
/**
* Where to redirect users after login.
*
* @var string
*/
protected $redirectTo = RouteServiceProvider::HOME;
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('guest')->except('logout');
}
}ログインの処理はどこで行っているのか書かれていませんが、Laravelの中にコードがあります。
気になる人は次のパスにあるファイルを覗いてみましょう。
vendor/laravel/ui/auth-backend/AuthenticatesUsers.php
例えばログイン画面を表示するための関数は次のように書かれています。
public function showLoginForm()
{
return view('auth.login');
}また、ルーティングはどうなっているのかとroutes/web.phpを見てみるとログインに関連するコードがありません。あるのは次の一行だけ。
Auth::routes();
どうやって/loginや/registerの設定を行っているのかというとこちらもlaravel/uiの内部で行われています。
vendor/laravel/ui/src/AuthRouteMethods.php
public function auth()
{
return function ($options = []) {
// Authentication Routes...
$this->get('login', 'Auth\LoginController@showLoginForm')->name('login');
$this->post('login', 'Auth\LoginController@login');
$this->post('logout', 'Auth\LoginController@logout')->name('logout');
（略）
}
}Auth\LoginController@showLoginFormへの設定がされていますね。
# まとめ
今回利用したlaravel/uiは古いLaravelのmake:authで作っていた認証機能です。標準機能をカスタマイズするのは設定などを覚える必要がありますが、非常に簡単に導入出来るので、こだわりが無い場合はこちらを使うのが適切です。
サンプルプロジェクトもこちらをベースにしたもので作ることが多いため、今回記事にしました。
おつかれさまでした！
完成まで突っ走る意気込みです。サポートしていただけると非常に嬉しいです。応援よろしくお願いします。