JetStreamというガンダムに出てきそうな機能を利用すると、とても多くの設定が行われますが、とても追いつけないので少しずつですがメモを残していきます。

Jetstreamを入れてしまえばある程度使えるようになってしまうので、ある程度理解している状態までいければと思います。

公式ドキュメント

今回はLivewireをメインに見ていきます。

今回は以下についてザックリ確認していきます

概要
ログイン
登録
プロファイル
Livewire

LivewireとInertia

jetstreamを利用する際に選択できるフロントエンド機能です。公式ドキュメントから簡単に説明すると、LivewireはVue.jsなどのJavaScriptの機能を使わずともリアクティブなビューを表現できます。InertiaはVue.jsを完全利用してビューを構築します。

JestreamとLivewireのインストール

php artisan jetstream:install livewire
php artisan jetstream:install livewire --teams

JetstreamとInertiaのインストール

php artisan jetstream:install inertia
php artisan jetstream:install inertia --teams

Laravel Fortify

認証についてはLaravel Fortifyによって行われます。

config\fortify.phpというファイルにガードや認証後のリダイレクトについて設定があります。

通常の認証後のリダイレクト先はRouteServiceProviderのHOMEの値を利用します

ルートとコントローラー

Laravel Breezeとの違いとしてActionとしてコントローラーやルートを変更できます。

app/Actionsディレクトリが該当します。

View

Jeststreamをインストールすると以下にViewが作成されます。

Livewireを使用している場合、ビューはアプリケーションのresources/viewsディレクトリレイアウトはresources/views/layouts/app.blade.php

Inertiaを使用している場合、「ページ」はresources/js/Pagesディレクトリレイアウトはresources/js/Layouts/AppLayout.vue

プロフィールページ

プロフィールページには名前やパスワードの変更、アカウント削除などに関して表示があります。これらは\resources\views\profile\show.blade.phpに記載があり、また同フォルダのファイルがコンポーネントとして表示されています。

ログイン

ログインに関するViewはresources\views\auth\login.blade.phpにあります。

またログイン時のビューを変更するにはapp\Providers\JetstreamServiceProvider.phpのbootメソッドを修正します。

public function boot()
    {
        $this->configurePermissions();

        Jetstream::deleteUsersUsing(DeleteUser::class);

        // ここ追加
        Fortify::loginView(function() {
            return view('auth.sample-login');
        });

    }

ユーザー認証方法のカスタマイズ

ユーザー認証を行う方法をカスタマイズするのもJetstreamServiceProviderにて行うことができます。クラスを用意する方法とクロージャを利用する方法があり、クラスを利用するにはFortify::authenticateUsingに独自のクラスを渡します。

またクロージャを利用するにはbootメソッドに記載をします

詳細はこちら

public function boot()
    {
        $this->configurePermissions();

        Jetstream::deleteUsersUsing(DeleteUser::class);

        // ここ追加
        Fortify::authenticateUsing(function(Request $request){
            dd($request);
            $user = User::where('name', $request->name)->first();
            if($user && Hash::check($request->passwrod,$user->password)){
                return $user;
            }
        });

    }

パスワードリセット

パスワードをリセットについてはapp\Actions\Fortify\UpdateUserPassword.phpをカスタムします。

ここで新しいパスワードの検証から更新までを行います。

登録

登録処理を行うと app\Actions\Fortify\ CreateNewUser.phpが実行されます。

createメソッドにて検証とユーザー作成までを行います。

public function create(array $input)
    {
      
        dd($input);

        Validator::make($input, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => $this->passwordRules(),
            'terms' => Jetstream::hasTermsAndPrivacyPolicyFeature() ? ['required', 'accepted'] : '',
        ])->validate();

        return User::create([
            'name' => $input['name'],
            'email' => $input['email'],
            'password' => Hash::make($input['password']),
        ]);
    }

無理矢理ソーシャル用に適合させることもできました。

public function create(array $input)
    {
      
        Validator::make($input, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => $this->passwordRules(),
            'terms' => Jetstream::hasTermsAndPrivacyPolicyFeature() ? ['required', 'accepted'] : '',
        ])->validate();

        return User::create([
            'name' => $input['name'],
            'email' => $input['email'],
            'social_id' => "hogehoge",
            'provider' => "MY_TWITTER",
            'nickname' => "Example",
            'password' => Hash::make($input['password']),
        ]);
    }

登録用View

登録用のViewはログインの時と同じように設定できます。

public function boot()
    {
        $this->configurePermissions();

        Jetstream::deleteUsersUsing(DeleteUser::class);

        // ここ追加
        Fortify::registerView(function () {
            return view('auth.sample-register');
        });

    }

またデフォルトのViewは以下にあります。

resources\views\auth\register.blade.php

メールアドレスの確認

登録時にメールアドレスの確認を行う機能も提供されていますが、デフォルトでは無効になっています。

config\fortify.phpのコメントアウト箇所のコメントアウトを外します。

'features' => [
        Features::registration(),
        Features::resetPasswords(),
        // ここのコメントアウトを外す
        Features::emailVerification(),
        Features::updateProfileInformation(),
        Features::updatePasswords(),
        Features::twoFactorAuthentication([
            'confirmPassword' => true,
        ]),
    ],

次にUserモデルのクラスにMustVerifyEmailインターフェースを実装させる必要があります。

参考

プロファイル

プロファイル管理機能は、ユーザー名やメールアドレスの変更などの入口となっています。これらのバリデーションと更新は以下のクラスで行われます

app\Actions\Fortify\UpdateUserProfileInformation.php

updateメソッドの引数になっている$userは現在ログインしているユーザー、そして$inputにはフォームの入力内容が設定されています。

プロファイルのView

Viewファイルは以下で定義されており自由にフォームを追加することができます。追加した内容は上述した$inputにて拾うことができます

resources\views\profile\update-profile-information-form.blade.php

フォームを追加して確認する

public function update($user, array $input)
    {

        dd($input);

アカウントの削除

プロファイル管理画面にあるアカウント削除を実行すると以下のクラスが実行されます。

app\Actions\Jetstream\DeleteUser.php

この機能を無効化するにはconfig\jetstream.phpの設定を修正します。Viewからも表示が消えます。

'features' => [
        // Features::termsAndPrivacyPolicy(),
        // Features::profilePhotos(),
        // Features::api(),
        // Features::teams(['invitations' => true]),
        //ここをコメントアウトする
        //Features::accountDeletion(),
    ],

Livewire

アカウント削除ではLivewireモーダルコンポーネントがバックエンドと通信を行っています。（パスワードの確認）

bladeの読み込み

show.blade.phpではアカウント削除機能が有効の場合にdelete-user-formを表示するようになっています。

@if (Laravel\Jetstream\Jetstream::hasAccountDeletionFeatures())
  <x-jet-section-border />
     <div class="mt-10 sm:mt-0">
       @livewire('profile.delete-user-form')
     </div>
@endif

ロジックの発火

bladeファイルを見るとなにやら処理を行っているのがわかります

<div class="mt-5">
   <x-jet-danger-button wire:click="confirmUserDeletion" wire:loading.attr="disabled">
        {{ __('Delete Account') }}
   </x-jet-danger-button>
</div>

モーダルを表示しているようですが、このメソッドの定義は以下にあります。

vendor\laravel\jetstream\src\Http\Livewire\DeleteUserForm.phpに定義があります。

ここがtrueになると実際のパスワード入力箇所が表示されるようになりますね。

/**
     * Indicates if user deletion is being confirmed.
     *
     * @var bool
     */
    public $confirmingUserDeletion = false;

パスワードのチェック処理を消してしまうことで、ボタンを押してユーザーを削除することもできます

public function deleteUser(Request $request, DeletesUsers $deleter, StatefulGuard $auth)
    {

        $this->resetErrorBag();

        /*
        if (! Hash::check($this->password, Auth::user()->password)) {
            throw ValidationException::withMessages([
                'password' => [__('This password does not match our records.')],
            ]);
        }
        */

        $deleter->delete(Auth::user()->fresh());

        $auth->logout();

        if ($request->hasSession()) {
            $request->session()->invalidate();
            $request->session()->regenerateToken();
        }

        return redirect('/');
    }

DeleteUserFormクラスのdeleteメソッドが呼ばれて、DeleteUserクラスのdeleteメソッドが呼ばれてデータベースからユーザーが削除されます。

おまけルーティングの設定

vendor\laravel\fortify\routes\routes.php

Laravel8とJetstreamのメモ１