この記事の一部では、fortify、laravelおよびbootstrapを使用して認証設定を作成しました.

ブートストラップとFortifyによるlaravel 8認証

ジャスミントレーシー・ 10月10日・ 3分読む

#laravel #fortify #bootstrap #auth

このチュートリアルでは

プロフィール情報の更新

プロフィールページからパスワードを変更する

プロジェクトの一部

git clone --branch starter [email protected]:jasminetracey/lara8auth.git
cd lara8auth

新しく作成したプロジェクトをIDEのIDEで開きますVisual Studio Code

ライブスワイヤー

composer require livewire/livewire

次に、レイアウトファイルにLiveWire資産を読み込みます.

...

<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">

<livewire:styles />

...

<livewire:scripts />

</body>
</html>

また、設定ファイルを公開しますphp artisan livewire:publish --config

プロフィールページ

プロファイルページを追加touch resources/views/profile.blade.phpその後、我々は我々のルートを加えますroutes/web.php ページにアクセスできるようにファイルします.

Route::middleware(['auth', 'verified'])->group(function () {
    Route::view('home', 'home')->name('home');

    Route::view('profile','profile')->name('profile');
});

今我々は我々のNavbarセクションを更新しますresources/layouts/app.blade.php ファイルは、我々のページにナビゲートする目に見えるリンクを持っています.

@else
    <li class="nav-item {{ request()->routeIs('home') ? 'active' : '' }}">
        <a class="nav-link" href="{{ route('home') }}">{{ __('Home') }}</a>
    </li>
    <li class="nav-item {{ request()->routeIs('profile') ? 'active' : '' }}">
        <a class="nav-link" href="{{ route('profile') }}">{{ __('Profile') }}</a>
    </li>

プロフィール情報フォーム

あなたがLavavel LiveWireの創作者が若干のチュートリアルビデオをつくったLiveWire Calebに新しいならばhere 始めるには
端末から次のコマンドを実行しますphp artisan livewire:make profile-formこれは、最初のlivewireコンポーネントを作成します.
あなたのresources/views/livewire/profile-form.blade.php フォームフィールドを作成するには、次のコードを追加します.

<section class="my-5">
    @if (session()->has('status'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('status') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Update Profile Information</h5>

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form wire:submit.prevent="updateProfileInformation" role="form">

                <div class="form-group">
                    <label for="state.email">Name</label>
                    <input type="text" class="form-control" id="state.name" wire:model="state.name"/>
                </div>

                <div class="form-group">
                    <label for="state.email">Email Address</label>
                    <input type="email" class="form-control" id="state.email"  wire:model="state.email"/>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Update Info</button>
                </div>
            </form>
        </div>
    </div>
</section>

ビューを追加した後、LiveWireコンポーネントファイルにコードを追加する必要がありますapp\Http\Livewire\ProfileForm.php フィールドと対話する.
私たちはまず最初に、私たちが対話するフィールドを格納するパブリックアレイを追加します

public $state = [];

それから、我々は加えますmount メソッド.これは、コンポーネントが設定されたときに実行される関数です.このメソッドを使用して、state 配列.

public function mount()
{
    $this->state = auth()->user()->withoutRelations()->toArray();
}

次に、私たちはupdateProfileInformation Fortifyが付属するUpdateUserProfileInfoアクションを使用するメソッドです.

public function updateProfileInformation(UpdateUserProfileInformation $updater)
{
    $this->resetErrorBag();

    $updater->update(auth()->user(), $this->state);

    session()->flash('status', 'Profile successfully updated');
}

UpdateUserProfileInfoアクションをインポートすることを忘れないでください
最後に、コンポーネントをresources/views/profile.blade.php 私たちがプロフィールページを訪問するとき、我々がフォームを見ることができるページ.

@extends('layouts.app')

@section('content')

    <div class="container">

        <livewire:profile-form />

    </div>
@endsection

パスワード変更フォームの作成

端末から次のコマンドを実行しますphp artisan livewire:make password-change-formこれは、LiveWireコンポーネントを作成します.
あなたのresources/views/livewire/password-change-form.blade.php フォームフィールドを作成するには、次のコードを追加します.

<section class="my-5">
    @if (session()->has('status'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('status') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Update Password</h5>

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form wire:submit.prevent="updateProfileInformation" role="form">

                <div class="form-group">
                    <label for="state.current_password">Current Password</label>
                    <input type="password" class="form-control" id="state.current_password" wire:model="state.current_password"/>
                </div>

                <div class="form-group">
                    <label for="state.password">New Password</label>
                    <input type="password" class="form-control" id="state.password" wire:model="state.password"/>
                </div>

                <div class="form-group">
                    <label for="state.password_confirmation">Confirm Password</label>
                    <input type="password" class="form-control" id="state.password_confirmation" wire:model="state.password_confirmation"/>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Change Password</button>
                </div>
            </form>
        </div>
    </div>
</section>

ビューを追加した後、LiveWireコンポーネントファイルにコードを追加する必要がありますapp/Http/Livewire/PasswordChangeForm.php フィールドと対話する.
私たちはまず最初に、私たちが対話するフィールドを格納するパブリックアレイを追加します

public $state = [
     'current_password' => '',
     'password' => '',
     'password_confirmation' => '',
];

次に、私たちはchangePassword Fortifyが付属するUpdateUserPasswordアクションを使用するメソッドです.

public function updateProfileInformation(UpdateUserPassword $updater)
{
    $this->resetErrorBag();

    $updater->update(auth()->user(), $this->state);

    $this->state = [
        'current_password' => '',
        'password' => '',
        'password_confirmation' => '',
    ];

    session()->flash('status', 'Password successfully changed');
}

UpdateUserPasswordアクションをインポートすることを忘れないでください
最後に、コンポーネントをresources/views/profile.blade.php 私たちがプロフィールページを訪問するとき、我々がフォームを見ることができるページ.

@extends('layouts.app')

@section('content')

    <div class="container">

        <livewire:profile-form />

        <livewire:password-change-form/>

    </div>
@endsection

今あなたが行くとき/profile ユーザー情報を更新し、パスワードを変更するための2つのフォームを使用する必要があります.

結論

Laravel Fortify機能についての詳細を見つけるには、GithubFortify LiveWireドキュメントの場合はlivewire
読んでいただきありがとうございます下記のコメントを共有し、この記事を参考にした場合.
次の記事では、2つのファクタ認証をカバーします.

ジャスミントレーシー / ララエイト

これは、ブートストラップとlaravel fortifyを使用して、Laravel

これは、Laravel 8プロジェクトのための簡単なAuth Statusセットアップです

機能

ユーザーログインユーザー登録メール確認パスワードを忘れるリセットパスワードパスワード変更更新ユーザープロファイル2因子認証ブラウザセッション管理View on GitHub