Web開発

LaravelのBreezeを使ってログイン認証画面を作成する

スポンサーリンク

概要

前回、「MacでLaravelのローカル環境を構築する方法(Virtualbox + Vagrant + homestead)」で、Laravelの仮想環境を作成したので、せっかくなのでLaravelのBreezeを使ってログイン認証画面を作成する方法を説明します。

Laravel Breezeとは

LaravelのBreezeとは、ログイン、ユーザー登録などの認証機能のLaravelのパッケージです。

Breezeのインストール

Laravelの環境は「MacでLaravelのローカル環境を構築する方法(Virtualbox + Vagrant + homestead)」を参考に構築してある前提で説明を進めます。

  1. 仮想環境を起動します。
vagrant up
  1. 仮想環境へログインをします。
vagrant ssh

次からは、仮想環境の中で作業になります。

  1. Laravelのルートディレクトリへ移動します
cd /code/laravel-sample
  1. Breezeの追加をします。
composer require laravel/breeze --dev
  1. Breezeのインストールをします。
php artisan breeze:install
    1. cssやJavaScriptをビルドします。
    npm install
    npm run build

    「npm install && npm run build」と一緒に実行すると、ファイル監視数のエラーが発生することがあります。別々に実行をすることをお勧めします。

    データベースの設定

    次にデータベースが必要になるので、データベースの設定を行います。

    「.env」の設定

    ルートディレクトリにある「.env」を開き、データベースの設定を以下のように変更をします。

    DB_CONNECTION=mysql
    DB_HOST=127.0.0.1
    DB_PORT=3306
    DB_DATABASE=homestead
    DB_USERNAME=homestead
    DB_PASSWORD=secret

    MacでLaravelのローカル環境を構築する方法(Virtualbox + Vagrant + homestead)」で環境を作成した場合は、赤字部分の変更になると思います。

    データベースのマイグレーション

    データベースのマイグレーションをします。

    php artisan migrate

    作成されたテーブルの確認

    1. MySQLへログインします。
    mysql -u homestead -p
    1. データベースの選択をします。
    use homestead
    1. テーブルを表示します
    show tables;

    以下のテーブルが作成されていたらデータベースの設定は成功です。

    +------------------------+
    | Tables_in_homestead    |
    +------------------------+
    | failed_jobs            |
    | migrations             |
    | password_resets        |
    | personal_access_tokens |
    | users                  |
    +------------------------+

    表示確認

    サイトを表示してみると、右上に「Log in」と「Register」が表示されるようになっていると思います。

    登録画面が以下のようになります。

    ログイン画面が以下のようになります。

    ログイン後の画面が以下のようになります。

    最後に

    いかがだったでしょうか?

    簡単に認証機能を実装することができたと思います。

    ぜひ試してみてください。

    タイトルとURLをコピーしました