Laravel開発：２．ユーザ認証と管理画面を作成する

こちらの内容は[ブログ](https://ksysnote.com/php/laravel-auth-voyager/)にアップしています。

<h3>はじめに</h3>
https://ksysnote.com/php/laravel-mamp-setup/

こちらの続きとなっています。

ユーザと管理者で認証を分けるために、ユーザの管理テーブルとして「clients」を追加しています。

管理画面は「 Voyager」を使用しています。
<h4>環境：</h4>
OS : macOS High Sierra 10.13.6

MAMP : 5.1

Laravel : 5.7.6
<h3>DB設定</h3>
MAMPを実行するとMAMPのTop画面が表示されます。その中にMySQLの設定情報が表示されています。

&nbsp;
<p id="gfJNxon"><img class="alignnone size-full wp-image-100 " src="https://ksysnote.com/wp-content/uploads/2018/10/img_5bb1c62a6260d.png" alt="" /></p>
　こちらの「phpMyAdmin」のリンクからphpMyAdminを表示してプロジェクトで使用するデータベースを作成します。

データベースを作成したら「.env」を編集します。
<pre class="EnlighterJSRAW" data-enlighter-language="null">APP_URL=http://localhost:8888 // MAMPで設定されているPORTに変更

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel  // DB名
DB_USERNAME=root
DB_PASSWORD=root</pre>
<h3>ユーザ認証</h3>
<h4>認証機能を追加する</h4>
Laravel標準の認証機能を追加する
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ php artisan make:auth</pre>
<h4>ユーザーのモデルを作成</h4>
ユーザーはClientテーブルに管理して、標準のusersテーブルは管理者で管理していきます。
<pre class="EnlighterJSRAW" data-enlighter-language="null">php artisan make:model Client -m</pre>
「/database/migrations」ディレクトリにマイグレーションファイルが作成されています。DATE_TIME_create_users_table.php の内容を DATE_TIME_create_clients_table.php にコピーします。
<pre class="EnlighterJSRAW" data-enlighter-highlight="16-23">&lt;?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateClientsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('clients', function (Blueprint $table) {
            $table-&gt;increments('id');
            $table-&gt;string('name');
            $table-&gt;string('email')-&gt;unique();
            $table-&gt;timestamp('email_verified_at')-&gt;nullable();
            $table-&gt;string('password');
            $table-&gt;rememberToken();
            $table-&gt;timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('clients');
    }
}</pre>
<h4>マイグレーション</h4>
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ php artisan migrate</pre>
phpmyAdminで確認するとテーブルが作成されていることを確認することができます。
<h4>認証するテーブルをusersからclientsに変更をする</h4>
「/config/auth.php」
<pre class="EnlighterJSRAW" data-enlighter-language="null">    // デフォルトの認証ガード　　　　　　　　
    'defaults' =&gt; [
        // 認証ガードを変更する。guardとpasswordsの設定は以下に記述します
        'guard' =&gt; 'clients',
        'passwords' =&gt; 'clients',
    ],

    // 認証ガード
    'guards' =&gt; [
        
        ...

        // 新しく認証ガードを追加します
        'clients' =&gt; [
            'driver' =&gt; 'session',
            'provider' =&gt; 'clients',
        ],
    ],

    // 認証プロバイダー
    'providers' =&gt; [

        ...

        // 新しく認証プロバイダーを追加します。
        'clients' =&gt; [
            'driver' =&gt; 'eloquent',
            'model' =&gt; App\Client::class,
        ],
    ],

    // 認証パスワード
    'passwords' =&gt; [

        ...

        //password追加
        'clients' =&gt; [
            'provider' =&gt; 'clients',
            'table' =&gt; 'password_resets',
            'expire' =&gt; 60,
        ],
    ],
</pre>
・デフォルトの認証ガードを今回新しく追加した「Client」に変更しています。

&nbsp;
<h4>RegisterControllerの編集</h4>
アカウント追加時の処理をClientに変えるために、「RegisterController」を編集します。

「/app/Http/Controller/Auth/RegisterController.php」
<pre class="EnlighterJSRAW" data-enlighter-language="null">//use App\User;
use App\Client;
...

class RegisterController extends Controller
{

    ...

    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' =&gt; 'required|string|max:255',
            // メールアドレスのユニークをclientテーブルに変更
            'email' =&gt; 'required|string|email|max:255|unique:clents',
            'password' =&gt; 'required|string|min:6|confirmed',
        ]);
    }

    ...

    protected function create(array $data)
    {
        // モデルを変更
        return Client::create([
            'name' =&gt; $data['name'],
            'email' =&gt; $data['email'],
            'password' =&gt; Hash::make($data['password']),
        ]);
    }
}
</pre>
<h4>Clientモデルの編集</h4>
Userモデルを参考に、Clientモデルを編集していきます。

「/app/Client.php」
<pre class="EnlighterJSRAW" data-enlighter-language="null">&lt;?php

namespace App;

use Illuminate\Notifications\Notifiable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;

class Client extends Authenticatable
{
    use Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];
}</pre>
<h4>確認</h4>
「http://localhost:8888/home」にアクセスするとログイン画面が表示されます。

&nbsp;
<p id="vGZKVbD"><img class="alignnone size-full wp-image-75 " src="https://ksysnote.com/wp-content/uploads/2018/10/img_5bb1746279af6.png" alt="" /></p>
右上の「Register」メニューをクリックして登録画面からユーザを追加します。
<p id="rIpNiVO"><img class="alignnone size-full wp-image-76 " src="https://ksysnote.com/wp-content/uploads/2018/10/img_5bb174a649eb6.png" alt="" /></p>
無事にログインができたら完了です
<p id="sxkMntZ"><img class="alignnone size-full wp-image-77 " src="https://ksysnote.com/wp-content/uploads/2018/10/img_5bb174d003d84.png" alt="" /></p>

<h3>管理画面</h3>
続いて管理画面を作成していきます。今回はVoyagerを使用して簡単に管理画面を実装していきたいと思います。
<h4>Voyagerのインストール</h4>
コマンドからVoyagaerをインストールします。
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ composer require tcg/voyager
$ php artisan voyager:install</pre>
<h4>セッションクッキーを管理画面とユーザで分ける</h4>
「/app/.env」
<pre class="EnlighterJSRAW" data-enlighter-language="null">//追記
SESSION_COOKIE=auth
SESSION_COOKIE_ADMIN=auth-admin</pre>
「/config/session.php」
<pre class="EnlighterJSRAW" data-enlighter-language="null">&lt;?php

$conf = [

    ...

];

// 管理画面のセッションクッキーを変更する
$uri = isset($_SERVER['REQUEST_URI']) ? $_SERVER['REQUEST_URI'] : '';

if (strpos($uri, '/admin/') === 0 || $uri === '/admin') {
    $conf['cookie'] = env(
        'SESSION_COOKIE_ADMIN',
        str_slug(env('APP_NAME', 'laravel'), '_').'_admin_session'
    );
}

return $conf;
</pre>
<h4>管理画面の認証ガードを変更する</h4>
「/config/auth.php」
<pre class="EnlighterJSRAW" data-enlighter-language="null">&lt;?php

$conf = [

    ...

];


// 管理画面の場合は、デフォルトの認証ガードをuserに変更する
$uri = isset($_SERVER['REQUEST_URI']) ? $_SERVER['REQUEST_URI'] : '';

if (strpos($uri, '/admin/') === 0 || $uri === '/admin') {
    $conf['defaults'] = [
        'guard' =&gt; 'web',
        'passwords' =&gt; 'users',
    ];
}

return $conf;
</pre>
&nbsp;
<h4>管理者アカウントを追加する</h4>
<pre class="EnlighterJSRAW" data-enlighter-language="null">$ php artisan voyager:admin admin@example.com --create

 Enter the admin name:
 &gt; admin

 Enter admin password:
 &gt;

 Confirm Password:
 &gt;

Creating admin account
The user now has full access to your site.</pre>
コマンドから管理者アカウントを追加します。
<h4>確認</h4>
「http://localhost:8888/admin」
<p id="ycgzXrA"><img class="alignnone size-full wp-image-78 " src="https://ksysnote.com/wp-content/uploads/2018/10/img_5bb179fb75ec5.png" alt="" /></p>
管理画面が表示されて、先程追加した管理者アカウントでログインができたら完了です。
<p id="WaVQfKl"><img class="alignnone size-full wp-image-79 " src="https://ksysnote.com/wp-content/uploads/2018/10/img_5bb17a4090272.png" alt="" /></p>

<h3>ユーザーの管理</h3>
管理画面にログインしてサイドメニューの「Tools &gt; Database」からテーブルの管理ができそうです。
<p id="pWdsjsU"><img class="alignnone size-full wp-image-81 " src="https://ksysnote.com/wp-content/uploads/2018/10/img_5bb17d05e56e0.png" alt="" /></p>
一覧からclientsの「Add BREAD to this table」をクリックしてBREADを追加します。
<p id="gLWleSV"><img class="alignnone size-full wp-image-82 " src="https://ksysnote.com/wp-content/uploads/2018/10/img_5bb17d4ee659a.png" alt="" /></p>
編集画面が表示されるので、一番下までスクロールして「Submit」をクリックします。
<p id="PPYhytn"><img class="alignnone size-full wp-image-83 " src="https://ksysnote.com/wp-content/uploads/2018/10/img_5bb17dd51cfd5.png" alt="" /></p>
ユーザー情報が一覧で見れるようになります。
<p id="VMOwnBV"><img class="alignnone size-full wp-image-84 " src="https://ksysnote.com/wp-content/uploads/2018/10/img_5bb17e4d16787.png" alt="" /></p>

<h3>参考：</h3>
https://tac-blog.tech/index.php/2018/08/14/voyager-multi-auth/

https://diy.hot-maker.com/445/

&nbsp;