Laravel: ログイン認証と管理画面 【voyager】

前回はLaravelをdockerを使って環境構築までしました。
今回はログイン機能と管理画面を作ります。

docker+Laravelをrailsエンジニアが使ってみる
Laravel: ログイン認証と管理画面 【voyager】←今回はここ
Laravel + docker で掲示板を作るチュートリアル
docker + Laravelアプリをherokuにデプロイする

ログイン機能

ライブラリのインストール

laravel/uiライブラリをインストールします。

composer require laravel/ui
php artisan ui bootstrap --auth

ライブラリ

vueなら
php artisan ui vue –auth
reactなら
php artisan ui react –auth

上記コマンドを実行したら

npm install
npm run dev

完了したら先ほどのトップページにアクセスしてみましょう

home

登録画面とログイン画面へのリンクができてます

試しに登録してみましょう
登録
完了

登録できました。
すごく簡単に実装できますね。
railsだとdeviseとか使ってましたが、、、。
こんな簡単にできるとは、Laravel便利ですね。

ユーザIDでログイン

メールアドレスではなくユーザIDでログインできるようにしましょう。

ログインコントローラを編集

ログインコントローラを編集します。
app/Http/Controllers/Auth/LoginController.php

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
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 = '/home';

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }

        //ここを追加
    public function username()
    {
      return 'name';
    }
}

viewを変更

resources/views/auth/login.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">ログイン</div>
                <div class="card-body">
                    <form method="POST" action="{{ route('login') }}">
                        @csrf
                        <div class="form-group row">
                            <label for="name" class="col-md-4 col-form-label text-md-right">ユーザID</label>
                            <div class="col-md-6">
                                    <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
                                    @error('name')
                                        <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="password" class="col-md-4 col-form-label text-md-right">パスワード</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">

                                @error('password')
                                        <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                        </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-6 offset-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>

                                    <label class="form-check-label" for="remember">
                                            ログイン情報を保存
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row mb-0">
                            <div class="col-md-8 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    ログイン
                                </button>
                                @if (Route::has('password.request'))
                                        <a class="btn btn-link" href="{{ route('password.request') }}">
                                            パスワードを忘れた方へ?
                                        </a>
                                @endif
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

せっかくなので登録画面のラベルも変更しましょう。
resources/views/auth/register.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">登録</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('register') }}">
                        @csrf

                        <div class="form-group row">
                            <label for="name" class="col-md-4 col-form-label text-md-right">ユーザID</label>

                            <div class="col-md-6">
                                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>

                                @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="email" class="col-md-4 col-form-label text-md-right">メールアドレス</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">

                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="password" class="col-md-4 col-form-label text-md-right">パスワード</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">

                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">パスワード確認</label>

                            <div class="col-md-6">
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                            </div>
                        </div>

                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    登録
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

管理画面の作成

voyagerのインストール

voyagerをプロジェクトに導入します。

composer require tcg/voyager

インストールしましょう。

php artisan voyager:install --with-dummy

dummy
インストールできました。

email: admin@admin.com
password: password

localhost:8080/adminに上記のデータでログインします。

データが作られてない場合

本来は作られるはずなんですが、ユーザーができてない場合はこのコマンドで作ります、

php artisan voyager:admin admin@example.com --create

管理画面
入れました!

本当に簡単にできますね。
Activeadminよりも画面が綺麗で、Activeadminよりカスタマイズしずらそうです笑

日本語表示にしたい場合

プロフィール編集画面のLocaleをjaに変更します。
プロフィール編集画面
日本語化
日本語表示になりました!

なぜかログイン後にHomeに飛ばされる場合は下記を実行してみてください
php artisan migrate:refresh –seed
php artisan db:seed –class=VoyagerDatabaseSeeder
php artisan voyager:admin admin@example.com –create

コメント