Laravel Breezeで「シンプルな」ログイン機能をインストール

こんにちは❗フリーランス・エンジニアの 九保すこひ です。

さてさて、Laravel 8.xがリリースされ新ログインパッケージ「Laravel Jetstream」の高機能に驚かされたばかりですが、少し前にまた新しいログインのパッケージがリリースされたのをご存知でしょうか。

その名も・・・・・・

Laravel Breeze(ららべる・ぶりーず)

です。

もしかかすると、「もうJetstreamがあるのになんで❓」と思われた方もいるかもしれませんが、実はこのLaravel Breezeはコンセプトが、

『シンプルなスタート地点』

となっていて、Jetstreamとの違いは次のようになっています。

  • シンプルにログイン、会員登録、パスワード再発行だけ
  • livewire や inertia は使わず、Bladeを使う

そのため、ほぼLaravel 7.xまで使われていた laravel/ui と同じものと考えていいでしょう。(もしかすると、livewireinertia.jsの学習コストを避けたいという要望があったのかもしれません)

そこで❗

今回は「よりシンプルなログイン機能」をLaravel Breezeで実装してみます。

ぜひ皆さんのお役に立てると嬉しいです😊✨

「冬は箱でカイロを買います❗ドッサリ」

開発環境: Laravel 8.x

パッケージをインストールする

では、まずはLaravel Breezeをインストールします。
以下のコマンドを実行してください。

composer require laravel/breeze --dev

パッケージがインストールされたら、以下のArtisanコマンドを実行します。

php artisan breeze:install

実行すると以下のような表示になります。

必要になるJavaScript、CSSをビルドする

まだこの状態では、ログイン機能に必要なJavaScriptCSSファイルが有効になっていませんので、以下のコマンドを実行してビルドしてください。

npm install && npm run dev

※ ビルドが終わると、JavaScriptは以下のファイルにひとまとめにされています。

  • JavaScript ・・・ public/js/app.js
  • CSS ・・・ public/css/app.css

マイグレーションを実行する

では、最後にログインに必要なDBテーブルをつくります。
以下のコマンドを実行してください。

php artisan migrate

実行が完了すると、こうなります。

これでインストールは完成です。
この状態でトップページを再読込みしてみてください。

以下のように画面右上にログインとユーザー登録ページへのリンクが表示されていると思います。

テストデータをつくる

ログイン機能のインストールは完了していますが、実際にログインができるユーザーデータがありませんので、これをつくっていきましょう。

※ なお、JetstreamのインストールではLaravel 8.xから新しくなったFactoryを使いましたが、今回のテーマは「シンプルなログイン機能のインストール」なので、Seederを使った内容にしています。もしFactoryがお好みの方は以下のURLを参考にしてみてください。

📝 Laravel8.x以降でログイン機能をインストールする方法

以下のコマンドを実行してください。

php artisan make:seed UsersTableSeeder

すると、ファイルが作成されるので中身を以下のように変更してください。

database/seeders/UsersTableSeeder.php

<?php

namespace Database\Seeders;

use App\Models\User; // 👈 ここに注意です
use Illuminate\Database\Seeder;

class UsersTableSeeder extends Seeder
{
    public function run()
    {
        $names = [
            'taro' => '太郎',
            'jiro' => '次郎',
            'saburo' => '三郎',
            'shiro' => '四郎',
            'goro' => '五郎',
            'rokuro' => '六郎',
            'shichiro' => '七郎',
            'hachiro' => '八郎',
            'kuro' => '九郎'
        ];

        foreach ($names as $name_en => $name_jp) {

            User::create([
                'name' => $name_jp, // ユーザー名
                'email' => $name_en .'@example.com', // 👈 メールアドレス
                'password' => bcrypt('xxxxxxxx') // 👈 パスワード
            ]);

        }
    }
}

Laravel 8.xからは、初期状態のモデルのフォルダが変更になっていますので気をつけてください。

では、Seederファイルが実行されるようにLaravelに登録しましょう。

database/seeders/DatabaseSeeder.php

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    public function run()
    {
        // \App\Models\User::factory(10)->create();
        $this->call(UsersTableSeeder::class); // 👈 ここを追加しました
    }
}

これで準備は完了です。
以下のコマンドでDBを初期化&テストデータの追加をしましょう。

php artisan migrate:fresh --seed

コマンドを実行すると、usersテーブルはこのようになります。

テストしてみる

では、実際にログインしてみましょう❗

https://******/login」にアクセスすると、ログインフォームが表示されるので、先ほど登録したテストデータのメールアドレス&パスワードを入力し、ボタンをクリックします。

すると・・・・・・

はい❗
ログインができました。

成功です😊✨

ちなみに – その1:関連情報

ログインに関連する独自設定のために関連情報をまとめました

ログイン後のリダイレクト先はどこで変更する?

以下の部分で変更できます。

app/Providers/RouteServiceProvider.php

public const HOME = '/dashboard';

※ なお、このリダイレクトURLは通常のログインだけでなく、ミドルウェアなどでいくつかの場所でも使われるURLです。

例:「app/Http/Middleware/RedirectIfAuthenticated.php」 など

ログインのコントローラーはどこにある?

app/Http/Controllers/Auth/AuthenticatedSessionController.php」になります。なお、各メソッドの意味は次のとおりです。

  • create(): ログインフォーム
  • store(): ログインの実行
  • destroy(): ログアウト

ログアウト後のリダイレクト先を変更するには?

以下の場所で変更できます。

app/Http/Controllers/Auth/AuthenticatedSessionController.php

public function destroy(Request $request)
{
    Auth::logout();

    $request->session()->invalidate();

    $request->session()->regenerateToken();

    return redirect('/'); // 👈 ここを変更してください
}

CSSフレームワークは何?

Laravel Jetstreamと同じくTailwind CSSです。

Tailwind(追い風)+ Breeze(そよ風) = 嵐が巻き起こるイメージでしょうか(笑)

ちなみに – その2:日本語化

日本語化するにはJetstreamとほぼ同じなので以下のURLを参考にしてみてください。

※ なお、Laravel Breezeの場合はすでに「resource/views/auth」フォルダにビューが用意されています。

📝 Laravel Jetstream の各種フォームを日本語化する

ちなみに – その3:Jetstreamにあるその他の機能は?

残念ながら 2020.11.11現在、Laravel Breezeには2段階認証などの機能はついていません。そのため、そういった機能が必要な場合はLaravel Jetstreamをインストールしてください。

もしかするとLaravel Breezeも「livewireinertiaを使わない用」として今後はもっと高機能になっていくのかもしれませんね👍

おわりに

ということで、今回は「よりシンプルな」ログイン機能を実装できるパッケージLaravel Breezeのご紹介をしました。

Laravel Jetstreamは、多機能ですがそれを使いこなすにはいろいろと知識が必要なので、こういった選択肢が出てくるのは嬉しい限りです。

ただ、できればBreezeの方にも2段階認証がほしいかな、なんて思うのですが、それはやはりゼイタクな話ですよね・・・😂

もし今後2段階認証が追加されそうにないなと思ったら、自力で実装する記事を書いてみたいと思います。

ではでは〜❗

「検証用にiPhone 8(中古)を
注文しました(アプリ開発する❓)」

今回の技術をつかった開発のご依頼、お待ちしております😊✨ お問い合わせ また、個人レッスンや、わかりにくい部分がありましたらからお気軽にご連絡ください。 どうぞよろしくお願いいたします!
このエントリーをはてなブックマークに追加       follow us in feedly