yoo-s.com

Laravel7 でマルチ認証
Laravel 2020/03/24

Laravel 7 で認証ページを作成してみます。

※Laravel7 の認証ページ

https://readouble.com/laravel/7.x/ja/authentication.html

プロジェクト作成


$ composer create-project laravel/laravel laravel-auth --prefer-dist
$ chmod -R 777 storage
$ chmod -R bootstrap/cache

この時点で、 config/auth.php などが作成されています。

config/auth.php
app/User.php
app/Http/Middleware/Authenticate.php
database/migrations/xxxx_create_users_table.php
database/migrations/xxxx_create_password_resets_table.php
database/factories/UserFactory.php

User モデル

デフォルトで app/User.php が作成されています。


namespace App;

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

class User extends Authenticatable
{
    use Notifiable;
    protected $fillable = [
        'name', 'email', 'password',
    ];
    protected $hidden = [
        'password', 'remember_token',
    ];
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}

今回は、App/Models/User.php にパスを変更しておきます。
（namespace など修正が必要）

Admin モデル作成

マルチ認証用に、管理者（Admin）モデルを作成してみます。

Models/Admin.php を作成します。


$ php artisan make:model Models/Admin

Admin マイグレートファイル作成

databases/ に Admin用のマイグレーションファイルを作成します。


$ php artisan make:migration create_admins_table

モデル＆マイグレートファイルを同時に作成

上記のモデルとマイグレーションファイルを同時に作成することもできます。

Models/Admin.php を作成します。


$ php artisan make:model Models/Admin -m


use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
 
class CreateAdminsTable extends Migration
{
    public function up()
    {
        if (Schema::hasTable('admins')) return;
        Schema::create('admins', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->timestamps();
            $table->string('email');
            $table->string('name');
            $table->string('password');
            $table->string('remember_token')->nullable();
        });
    }
    public function down()
    {
        Schema::dropIfExists('admins');
    }
}

Guard の設定

Guard は Auth認証用のドライバークラスで、config/auth.php に設定をします。


    'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',
        ],
        'api' => [
            'driver' => 'token',
            'provider' => 'users',
        ],
      'admin' => [
         'driver' => 'session',
         'provider' => 'admins',
      ],
    ],

Guard を設定することにより、Controllerなどに記載するミドルウェアでの認証が可能となります。


$this->middleware('auth:admin');

Eloquent 設定

Eloquent に App\Models\User クラスを設定します。
※User.php の namespace は App\Models\ に変更


    'providers' => [
        'users' => [
            'driver' => 'eloquent',
            'model' => App\Models\User::class,
        ],
       'admins' => [
        'driver' => 'eloquent',
        'model' => App\Models\Admin::class,
      ],
    ],

artisan で auth を作成する

make:auth 廃止

Laravel6 から以下のコマンドは廃止されました。


$ php artisan make:auth

laravel/ui を利用

代わりに、「laravel/ui」でログイン画面を作成するようになりました。

更に、リリースノートには、2.0 を指定するように記載されています。


$ composer require laravel/ui "^2.0"
$ php artisan ui vue --auth

vue の部分は bootstrap などの設定もできます。

認証用ファイル

resources/views/auth
App/Http/Controllers/Auth

が作成されているので、管理者用にコピーしておくと良いでしょう。

resources/views/admin/auth
App/Http/Controllers/Admin/Auth

データベース作成

PostgreSQL


$ createdb sample_auth

MySQL


# mysql -u root
mysql > create database sample_auth;

.env

各種DBの設定を合わせる


DB_CONNECTION=pgsql
DB_HOST=postgres
DB_PORT=5432
DB_DATABASE=sample
DB_USERNAME=postgres
DB_PASSWORD=secret

DBマイグレート

DB設定が一通り完了したら、マイグレートしてみます。


$ php artisan migrate

テーブルが作成したことを確認したら、サンプルデータを作成してみます。

Seeder 作成

サンプルデータを作成する場合、artisan に seeder コマンドにも用意されています。

ユーザ、管理者の Seeder を作成すると「database/seeds/」にファイルが書き出されます。


$ php artisan make:seeder UsersTableSeeder
$ php artisan make:seeder AdminsTableSeeder

UsersTableSeeder.php


    public function run()
    {
        DB::table('users')->insert([
            'name' => Str::random(10),
            'email' => Str::random(10).'@gmail.com',
            'password' => Hash::make('password'),
        ]);
    }

AdminsTableSeeder.php


    public function run()
    {
        DB::table('admins')->insert([
                'email' => 'xxxx@xxxx.com',
                'name' => 'Admin',
                'password' => Hash::make('password')
            ]
        );
    }

DatabaseSeeder.php

Seeder ファイルが作成されたら、「database/seeds/DatabaseSeeder.php」に seeder を実行できるよう設定します。


public function run()
{
     $this->call(UsersTableSeeder::class);
     $this->call(AdminsTableSeeder::class);
}

設定したら、artisan コマンドで Seeder を実行します。


$ php artisan db:seed

実際に、テーブルにデータが作成されているか確認してみましょう。

Factory

ここでは割愛しますが、Factory の faker を利用する方法で seeder を実行できます。
Factory ファイルは以下のコマンドで作成できます。


$ php artisan make:factory UserFactory

コントローラー作成

各種コントローラーを作成します。

管理者ホーム

App/Http/Controllers/Admin/ にコントローラーを作成します。


$ php artisan make:controller Admin/HomeController

Admin/HomeController.php

ファイルを作成したら、index の実装と、コンストラクタに認証用のミドルウェアを記述（Guard で設定したパラメータ）をします。
以下の例は、管理者の認証制御となります。


    public function __construct()
    {
        $this->middleware('auth:admin');
    }

    public function index(Request $request)
    {
        return view('admin.index');
    }

ただコントローラが増えてくると、コンストラクタに毎度記述するのも面倒なので、Route のグループ設定で一括管理すると良いでしょう。
（認証用の親コントローラを継承する方法もありますが）

Route の設定

認証が必要・不要のページを考えて、グループ化した Route を設定します。

認証が不要のページ

ログイン、ログアウト、登録ページなどの認証不要のページのルートを作成します。
管理者URIは、admin で統一したいので「admin」プリフィックスを利用しています。

routes/web.php


Route::group(['prefix' => 'admin'], function () {
    Route::get('login', 'Admin\Auth\LoginController@index')->name('admin.login');
    Route::post('login', 'Admin\Auth\LoginController@login')->name('admin.login');
    Route::get('logout', 'Admin\Auth\LoginController@logout')->name('admin.logout');
    Route::post('logout', 'Admin\Auth\LoginController@logout')->name('admin.logout');
});

認証が必要のページ

認証が必要なページのルートを設定します。
ルートグループのパラメータに、ミドルウェアの Guard 設定します。


Route::group(['prefix' => 'admin/topic', 'middleware' => 'auth:admin'], function() {
    Route::get('/', 'Admin\HomeController@index')->name('admin.index');
});

Laravel 7 リリース
Laravel 2020/03/19

2020/03/03 に Laravel7 がリリースされたので、ちょっとだけ見てみました。

（2020/3/19 現在、バージョンは 7.1.3）

https://laravel.com/docs/7.x/upgrade

Symphony 5 リリース

Laravel7 では Symphony5 以上
PHP 7.2.5 以上
laravel/framework ^7.0
nunomaduro/collision ^4.1
phpunit/phpunit ^8.5
facade/ignition ^2.0
laravel/tinker ^2.0
facade/ignition ^2.0
report()、render() は、Exception から Throwable に変更


use Throwable;
public function report(Throwable $exception);
public function render($request, Throwable $exception);

Authentication

「Authentication Scaffolding」が変更となったようです。

Scaffolding

認証の自動作成の改修
Illuminate\Auth\Passwords\TokenRepositoryInterface
recentlyCreatedToken メソッドが追加

Eloquent

Date Serialize

Eloquent Model で Carbon の日付フォーマット改修
ISO-8601 による、timezone と秒の小数部の対応
現状の仕様をキープしたい場合は、serializeDate をオーバーライド

DB と Eloquent のフォーマットがことなると、Exception になるのでこれが改修されたか？検証が必要

Unique Route Names

同じ Route名を指定できなくなった
重複する場合は、重大なエラーが発生する

CORS サポート

Cross-Origin Resource Sharing (CORS) でクロスドメイン通信
「\Fruitcake\Cors\HandleCors::class」をグローバルの Middleware に追加


$ composer require fruitcake/laravel-cors

CastsAttributes

「CastsAttributes」を implements することで、カスタムでキャストすることができます。

カスタムクラスに、get、set メソッドを追加し、Eloquent モデルに $casts を設定することで、自動的にキャストされるようです。

下記の例は、json_decode()、json_encode() を利用して JSON型のキャストを行なっています。


namespace App\Casts;

use Illuminate\Contracts\Database\Eloquent\CastsAttributes;

class Json implements CastsAttributes
{
    public function get($model, $key, $value, $attributes)
    {
        return json_decode($value, true);
    }

    public function set($model, $key, $value, $attributes)
    {
        return json_encode($value);
    }
}


namespace App;

use App\Casts\Json;
use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    protected $casts = [
        'options' => Json::class,
    ];
}

Blade

The component Method

「Blade::component」から「Blade::aliasComponen」に名称変更

Blade Component Tags

Viewコンポーネントクラスにプロパティやメソッドを設定することで、Blade の記述をシンプルにできます。

下記の例は、Alert コンポーネントクラスを作成し「alert.blade.php」に対して、class を動的に設定します。


namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    public $type;

    public function __construct($type)
    {
        $this->type = $type;
    }

    public function classForType()
    {
        return $this->type == 'danger' ? 'alert-danger' : 'alert-warning';
    }

    public function render()
    {
        return view('components.alert');
    }
}

Factory Types

Laravel7 から factory types が削除された

プロジェクト作成

実際に、認証処理を実装していきます。

※Laravel7 の認証ページ

https://readouble.com/laravel/7.x/ja/authentication.html


$ composer create-project laravel/laravel laravel-auth --prefer-dist
$ chmod -R 777 storage
$ chmod -R bootstrap/cache

バージョン確認


$ php artisan --version
Laravel Framework 7.1.3

この時点で、 config/auth.php などが作成されています。

config/auth.php
app/User.php
app/Http/Middleware/Authenticate.php
database/migrations/xxxx_create_users_table.php
database/migrations/xxxx_create_password_resets_table.php
database/factories/UserFactory.php

app/User.php


namespace App;

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

class User extends Authenticatable
{
    use Notifiable;
    protected $fillable = [
        'name', 'email', 'password',
    ];
    protected $hidden = [
        'password', 'remember_token',
    ];
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}

最近のバージョンアップが早く、仕様も日々変わりつつあるのでチェックが必要ですね。

Laravel で Vue コンポーネントを使う
Laravel 2020/03/15

Laravel + Vue.js 環境において、Vue コンポーネントを利用してみます。

プロジェクト作成

Laravel プロジェクトを作成します。


$ composer create-project --prefer-dist laravel/laravel laravel-vuemix
$ cd laravel-vue-mix
$ chmod 777 storage
$ chmod 777 bootstrap/cache/

Laravel Vue UI 追加

Vue に対応した Laravel UI を作成します。


$ composer require laravel/ui --dev
$ php artisan ui vue
$ npm install

ファイルを確認する

Webpack Mix

webpack.mix.js が作成されています。


const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js') 
    .sass('resources/sass/app.scss', 'public/css');

デフォルトでは、以下が作成＆設定されています。

resources/js/app.js
resources/sass/app.scss

resources/js/app.js


Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app',
}
});

サンプル Vue コンポーネント

Vue UIを作成すると、「resources/js/components/ExampleComponent.vue」が作成されています。

このコンポーネントファイルは、app.js で設定されています。


Vue.component('example-component', require('./components/ExampleComponent.vue').default);

第1引数に「タグ名」、第2引数にコンポーネントを設定します。


Vue.component('タグ名', require('.vueファイルパス').default)

コンテンツ作成

コントローラー、ビュー（レイアウト、ページ）を作成し「app.js」「app.css」も読み込むようにします。

Controller

SampleController 作成


$ php artisan make:controller SampleController --resource

SampleController.php の index() を修正


    public function index()
    {
        return view('sample.index');
    }

Route 追加

sample/index にアクセスできるように、route/web.php に追記します。


Route::get('/sample', 'SampleController@index')->name('sample');

ビュー作成

レイアウトファイル

resources/views/layouts/app.blade.php を作成

head タグに app.js 用の scriptタグと app.css 用の linkタグを blade で追記します。


src="{{ asset('js/app.js') }} //script タグで head などに追記
href="{{ asset('css/app.css') }}  //link タグ head などにで追記

ページファイル

resources/views/sample/index.blade.php を作成し、ExampleComponent.vue を読み込みます。

app.js で設定した example-component タグで利用可能です。

カスタム Vue コンポーネント作成

「resources/js/components/」に MessageComponent.vue コンポーネントを作成します。

template 部分

script 部分

script タグで以下を記述します。


export default {
    data: function() {
        return {
            message: "Message Component Message!",
        }
    }
}

app.js

app.js に「MessageComponent.vue」の設定を追記します。


Vue.component('message-component', require('./components/MessageComponent.vue').default);

ビルド

npm または yarn でビルドし、app.js を書き出します。

書き出し先は、「webpack.mix.js」で設定した通りです。


$ npm install
$ npm run dev
//または
$ yarn install
$ yarn run dev

watch で監視

毎回、run dev するのは面倒なので、watch を使ってファイル修正を監視します。


$ npm run watch
//または
$ yarn run watch

Laravel で確認

実際に、Laravel にアクセス（SampleController@index）すると、「example-component」「message-component」に対応して表示されます。

<< 最初 < 前ページ次ページ > 最後 >>

ページの先頭に戻る

Laravel7 でマルチ認証

Laravel 7 リリース

Laravel で Vue コンポーネントを使う

composer で vendor がインストールできない

Eloquent の日付を Carbon で扱う

freee SDKを Laravel で使ってみる

Laravel 6.x 構築（Homestead編）

try-catch で Exception検知

FormRequest を利用したバリデーション

Middlewareを利用したルートグループ化

namespaceを利用したルートグループ化

名前付きルートによるリダイレクト

artisanコマンド

RuntimeException No application encryption key has been specified

Laravel インストール&起動

Laravel7 でマルチ認証 Laravel 2020/03/24

プロジェクト作成

User モデル

Admin モデル作成

Admin マイグレートファイル作成

モデル＆マイグレートファイルを同時に作成

Guard の設定

Eloquent 設定

artisan で auth を作成する

make:auth 廃止

laravel/ui を利用

認証用ファイル

データベース作成

PostgreSQL

MySQL

.env

DBマイグレート

Seeder 作成

UsersTableSeeder.php

AdminsTableSeeder.php

DatabaseSeeder.php

Factory

コントローラー作成

管理者ホーム

Admin/HomeController.php

Route の設定

認証が不要のページ

routes/web.php

認証が必要のページ

Laravel 7 リリース Laravel 2020/03/19

Symphony 5 リリース

Authentication

Scaffolding

Eloquent

Date Serialize

Unique Route Names

CORS サポート

CastsAttributes

Blade

The component Method

Blade Component Tags

Factory Types

プロジェクト作成

バージョン確認

app/User.php

Laravel で Vue コンポーネントを使う Laravel 2020/03/15

プロジェクト作成

Laravel Vue UI 追加

ファイルを確認する

Webpack Mix

resources/js/app.js

サンプル Vue コンポーネント

コンテンツ作成

Controller

SampleController 作成

SampleController.php の index() を修正

Route 追加

ビュー作成

レイアウトファイル

ページファイル

カスタム Vue コンポーネント作成

template 部分

script 部分

app.js

ビルド

watch で監視

Laravel で確認

Laravel7 でマルチ認証
Laravel 2020/03/24

Laravel 7 リリース
Laravel 2020/03/19

Laravel で Vue コンポーネントを使う
Laravel 2020/03/15