L5.8 on ララジャパン

DNSを使ってメールアドレスをチェック

Sun, 09 Jan 2022 01:43:32 +0900

「お客さんにメールが届かないのでどうかして？」というＣＳからの質問。見てみるとexample@yahoo.comであるところ、example@yahpo.comになっていたりします。たった１文字違いですが、会員登録してもこのためにメールが届かないばかりか、次回からは多分ログインもできません。もちろんお客さんの間違いですが、登録時にこれが通ってしまうというのは問題です。これをどうかしたいです。

緩いメールアドレスのバリデーション

Laravelのデフォルトのメールアドレスのバリデーションemailは、結構緩いです。どれだけ緩いが実例見てみましょう。以下は、tinkerを使って、test@gmailという不正なメールアドレスチェックします。

>>> $v = validator(['email' => 'test@gmail'], ['email' => 'required|email'])
=> Illuminate\Validation\Validator {#3534
     +customMessages: [],
     +fallbackMessages: [],
     +customAttributes: [],
     +customValues: [],
     +excludeUnvalidatedArrayKeys: null,
     +extensions: [],
     +replacers: [],
   }
>>> $v->passes()
=> true

あっさり、通ってしまいます。

また、example.comとかのドメイン名は実在しないのに、これも通ります。

>>> $v = validator(['email' => 'test@example.com'], ['email' => 'required|email'])
...
>>> $v->passes()
=> true

email:dnsの登場

メールアドレスの＠マークの後ろの部分、例えば、test@example.comなら、example.comの部分、はドメイン名と言ってインターネットでは非常に重要なデータなのですが、このドメインが実在するかどうか、そしてメールを受け取るかどうかがわかれば、少なくともメールアドレスのタイポは登録時に警告できますね。

それを利用したのが、email:dnsのバリデーションルールです。早速、tinkerで試してみましょう。

>>> $v = validator(['email' => 'test@gmail'], ['email' => 'required|email:dns'])
...
>>> $v->passes()
=> false

>>> $v = validator(['email' => 'test@example.com'], ['email' => 'required|email:dns'])
...
>>> $v->passes()
=> false

>>> $v = validator(['email' => 'test@yahpo.com'], ['email' => 'required|email:dns'])
...
>>> $v->passes()
=> false

素晴らしいです、みな通りません！

email:dnsの使用において注意が必要なのは、それを利用するには、以下の国際化関数、intlのライブラリが必要です。 https://www.php.net/manual/ja/book.intl.php

dns_get_record()

ちょっとemail:dnsの仕組みを探ってみましょう。Laravelのマニュアルによると、egulias/email-validatorのパッケージを使用しているそうな。そこから関心のコードの一部を掲載します。

https://github.com/egulias/EmailValidator/blob/3.x/src/Validation/DNSCheckValidation.php

...
class DNSCheckValidation implements EmailValidation
{
    /**
     * @var int
     */
    protected const DNS_RECORD_TYPES_TO_CHECK = DNS_MX + DNS_A + DNS_AAAA;

    /**
     * Reserved Top Level DNS Names (https://tools.ietf.org/html/rfc2606#section-2),
     * mDNS and private DNS Namespaces (https://tools.ietf.org/html/rfc6762#appendix-G)
     */
    const RESERVED_DNS_TOP_LEVEL_NAMES = [ //これらのドメイン名はみなエラーとなります
        // Reserved Top Level DNS Names
        'test',
        'example',
        'invalid',
        'localhost',

        // mDNS
        'local',

        // Private DNS Namespaces
        'intranet',
        'internal',
        'private',
        'corp',
        'home',
        'lan',
    ];
   ...

 private function validateDnsRecords($host) : bool
    {
        // A workaround to fix https://bugs.php.net/bug.php?id=73149
        /** @psalm-suppress InvalidArgument */
        set_error_handler(
            static function (int $errorLevel, string $errorMessage): ?bool {
                throw new \RuntimeException("Unable to get DNS record for the host: $errorMessage");
            }
        );

        try {
            // Get all MX, A and AAAA DNS records for host
            $dnsRecords = dns_get_record($host, static::DNS_RECORD_TYPES_TO_CHECK);
        } catch (\RuntimeException $exception) {
            $this->error = new InvalidEmail(new UnableToGetDNSRecord(), '');

            return false;
        } finally {
            restore_error_handler();
        }
...

上の４５行目見てください。dns_get_record()なるphp関数があったのですね。 https://www.php.net/manual/ja/function.dns-get-record.php

上の説明によると、こんなしてドメイン情報取得できるようです。

>>> dns_get_record("yahpo.com", DNS_MX);
=> [
     [
       "host" => "yahpo.com",
       "class" => "IN",
       "ttl" => 0,
       "type" => "MX",
       "pri" => 0,
       "target" => "",
     ],
   ]
>>> dns_get_record("yahoo.com", DNS_MX);
=> [
     [
       "host" => "yahoo.com",
       "class" => "IN",
       "ttl" => 0,
       "type" => "MX",
       "pri" => 1,
       "target" => "mta5.am0.yahoodns.net",
     ],
     [
       "host" => "yahoo.com",
       "class" => "IN",
       "ttl" => 0,
       "type" => "MX",
       "pri" => 1,
       "target" => "mta6.am0.yahoodns.net",
     ],
     [
       "host" => "yahoo.com",
       "class" => "IN",
       "ttl" => 0,
       "type" => "MX",
       "pri" => 1,
       "target" => "mta7.am0.yahoodns.net",
     ],
   ]

最初のタイポのドメイン名のtargetは存在しないけれど、正式なドメインは３つtargetを返しています。Laravelのemail:dnsはこれを利用しているのですね。

最後に

メールのバリデーションには、email:dnsの他にもrfcとかstrictとかspoofとかあります。 emailとemail:rfcは同じです。また、email:rfc,dnsとように合わせての使用も可能です。

あと大事なのは、バリデーションでは必ず弾かれてしまうが、test.@docomo.ne.jpのようにドットが不正な場所にあるにもかかわらず実在するメールアドレスの対応です。docomo.ne.jpやezweb.ne.jpではその不正を許す必要あります。まだ使っている人いるんですよ。

ddd()

Sat, 29 Feb 2020 02:03:48 +0900

Laravelではdd()というヘルパー関数をデバッグでよく使用しますが、ddd()は初耳です。なぜなら、Laravel 6.xバージョンで新登場したデバッグの関数だからです。

dd()

新登場のddd()の比較のためと、Laravel 6.xの以前のバージョンのために、まずdd()の使用を見てみましょう。

dd()を以下のように追加すると、

routes/web.php

Route::get('/', function () {
	$user = App\User::first();
	dd($user);
    return view('welcome');
});

以下のように実行を止めて、引数で指定した変数の情報をブラウザに表示してくれます。

その時点で、実行した関数のスタックトレースをしたいなら、

routes/web.php

Route::get('/', function () {
	$user = App\User::first();
	dd(print_r(debug_backtrace(DEBUG_BACKTRACE_IGNORE_ARGS),true));//面倒なら、debug_backtrace(2)でもＯＫ
    return view('welcome');
});

とすると、

Array
(
    [0] => Array
        (
            [file] => /vol1/usr/www/repos/repos/l6x/vendor/laravel/framework/src/Illuminate/Routing/Route.php
            [line] => 205
            [function] => {closure}
            [class] => Illuminate\Routing\RouteFileRegistrar
            [type] => ->
        )

    [1] => Array
        (
            [file] => /vol1/usr/www/repos/repos/l6x/vendor/laravel/framework/src/Illuminate/Routing/Route.php
            [line] => 179
            [function] => runCallable
            [class] => Illuminate\Routing\Route
            [type] => ->
        )

    [2] => Array
        (
            [file] => /vol1/usr/www/repos/repos/l6x/vendor/laravel/framework/src/Illuminate/Routing/Router.php
            [line] => 681
            [function] => run
            [class] => Illuminate\Routing\Route
            [type] => ->
        )
...

ddd()

さて、Laravel 6.xのバージョンのddd()ヘルパーを使用すると、

routes/web.php

Route::get('/', function () {
	$user = App\User::first();
	ddd($user);
    return view('welcome');
});

以下のように、とても見やすいＵＩで出力してくれます。

そればかりでなく、関数スタックのトレースもメニューを選択して表示してくれます。しかも、Laravel内部での関数の実行を隠して（拡張して見ることも可能）開発した関数だけを見せてくれます。

こういう便利な機能を追加してくれると、Laravelをアップグレードするモチベーションが上がりますね。

ユーザー認証のパスワード制限の変更

Tue, 25 Feb 2020 00:10:58 +0900

Laravel 5.8において、ユーザー認証のパスワードの長さの制限がそれまでの最低の６文字長から８文字長に変わりました。セキュリティ強化の目的です。しかし、この制限を変えたい、つまり昔の６文字長をキープしたい、あるいは８文字長でなくより強化して１０文字長としたいなら、どうするのでしょう？

5.8のコードを見ると、会員登録とパスワードを忘れた時のパスワードリセットにおいてのみ、min:8のバリデーションが使われています（不思議とログインではパスワードの長さの制限なし）。しかもトレイトで定義されているバリデーションの関数rules()を上書きすればよいだけ、と思いきや、ハードコードされていて効かない箇所がありました。

ハードコードの箇所は、パスワードリセットの機能です。そこのコントローラーから、コードを追跡してみましょう。

app/Http/Controller/Auth/ResetPasswordController

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\ResetsPasswords;

class ResetPasswordController extends Controller
{
    use ResetsPasswords;

    /**
     * Where to redirect users after resetting their password.
     *
     * @var string
     */
    protected $redirectTo = '/home';

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

そこで使用されている、ResetPasswordsのトレイトの定義は、

vendor/laravel/framework/src/Illuminate/Foundation/Auth/ResetsPasswords.php

namespace Illuminate\Foundation\Auth;

use Illuminate\Support\Str;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Password;
use Illuminate\Auth\Events\PasswordReset;

trait ResetsPasswords
{
...
    /**
     * Reset the given user's password.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\RedirectResponse|\Illuminate\Http\JsonResponse
     */
    public function reset(Request $request)
    {
        $request->validate($this->rules(), $this->validationErrorMessages());

        // Here we will attempt to reset the user's password. If it is successful we
        // will update the password on an actual user model and persist it to the
        // database. Otherwise we will parse the error and return the response.
        $response = $this->broker()->reset(
            $this->credentials($request), function ($user, $password) {
                $this->resetPassword($user, $password);
            }
        );

        // If the password was successfully reset, we will redirect the user back to
        // the application's home authenticated view. If there is an error we can
        // redirect them back to where they came from with their error message.
        return $response == Password::PASSWORD_RESET
                    ? $this->sendResetResponse($request, $response)
                    : $this->sendResetFailedResponse($request, $response);
    }

    /**
     * Get the password reset validation rules.
     *
     * @return array
     */
    protected function rules()
    {
        return [
            'token' => 'required',
            'email' => 'required|email',
            'password' => 'required|confirmed|min:8',
        ];
    }
...

rules()では、min:8とあるから、先ほどのResetPasswordControllerで、rules()を再定義して、min:6とすれば良いということです。

しかし、そのルールを使用する21行目のvalidate()だけでなく、さらに、26行目のbrokerのreset()でもチェックが入っていたのです。その、brokerのコードを見てみましょう。

vendor/laravel/framework/src/Illuminate/Auth/Passwords/PasswordBroker.php

namespace Illuminate\Auth\Passwords;

use Closure;
use Illuminate\Support\Arr;
use UnexpectedValueException;
use Illuminate\Contracts\Auth\UserProvider;
use Illuminate\Contracts\Auth\PasswordBroker as PasswordBrokerContract;
use Illuminate\Contracts\Auth\CanResetPassword as CanResetPasswordContract;

class PasswordBroker implements PasswordBrokerContract
{
...

   /**
     * Reset the password for the given token.
     *
     * @param  array  $credentials
     * @param  \Closure  $callback
     * @return mixed
     */
    public function reset(array $credentials, Closure $callback)
    {
        // If the responses from the validate method is not a user instance, we will
        // assume that it is a redirect and simply return it from this method and
        // the user is properly redirected having an error message on the post.
        $user = $this->validateReset($credentials);

        if (! $user instanceof CanResetPasswordContract) {
            return $user;
        }

        $password = $credentials['password'];

        // Once the reset has been validated, we'll call the given callback with the
        // new password. This gives the user an opportunity to store the password
        // in their persistent storage. Then we'll delete the token and return.
        $callback($user, $password);

        $this->tokens->delete($user);

        return static::PASSWORD_RESET;
    }

    /**
     * Validate a password reset for the given credentials.
     *
     * @param  array  $credentials
     * @return \Illuminate\Contracts\Auth\CanResetPassword|string
     */
    protected function validateReset(array $credentials)
    {
        if (is_null($user = $this->getUser($credentials))) {
            return static::INVALID_USER;
        }

        if (! $this->validateNewPassword($credentials)) {
            return static::INVALID_PASSWORD;
        }

        if (! $this->tokens->exists($user, $credentials['token'])) {
            return static::INVALID_TOKEN;
        }

        return $user;
    }

    /**
     * Set a custom password validator.
     *
     * @param  \Closure  $callback
     * @return void
     */
    public function validator(Closure $callback)
    {
        $this->passwordValidator = $callback;
    }

    /**
     * Determine if the passwords match for the request.
     *
     * @param  array  $credentials
     * @return bool
     */
    public function validateNewPassword(array $credentials)
    {
        if (isset($this->passwordValidator)) {
            [$password, $confirm] = [
                $credentials['password'],
                $credentials['password_confirmation'],
            ];

            return call_user_func(
                $this->passwordValidator, $credentials
            ) && $password === $confirm;
        }

        return $this->validatePasswordWithDefaults($credentials);
    }

    /**
     * Determine if the passwords are valid for the request.
     *
     * @param  array  $credentials
     * @return bool
     */
    protected function validatePasswordWithDefaults(array $credentials)
    {
        [$password, $confirm] = [
            $credentials['password'],
            $credentials['password_confirmation'],
        ];

        return $password === $confirm && mb_strlen($password) >= 8;
    }
...

上のコードで、定義されている関数をトレースすると実行順番は、

reset() validateReset() validateNewPassword() validatePasswordWithDefaults()

最後の関数で８文字長の制限がありましたね（118行目）。しっかり、ハードコードされています。

5.8のドキュメントでは、

https://laravel.com/docs/5.8/upgrade#new-default-password-length Illuminate\Auth\Passwords\PasswordBrokeを継承して、validatePasswordWithDefaults()を上書きすればよいとありますが、ディープ過ぎて面倒です。

以下で他の人も不平述べています。

https://github.com/laravel/framework/issues/28274

より簡単な解決策はないかと、調査したら、

ベストの解決策は、ResetPasswordsのトレイトのreset()をResetPasswordControllerで上書きしてbrokerのvalidator()を無能にすることです。つまり、

app/Http/Controller/Auth/ResetPasswordController

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\ResetsPasswords;

use Illuminate\Http\Request; // この追加必要！
use Illuminate\Support\Facades\Password; // この追加必要！

class ResetPasswordController extends Controller
{
...
   /**
     * Reset the given user's password.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\RedirectResponse|\Illuminate\Http\JsonResponse
     */
    public function reset(Request $request)
    {
        $request->validate($this->rules(), $this->validationErrorMessages());

        // Here we will attempt to reset the user's password. If it is successful we
        // will update the password on an actual user model and persist it to the
        // database. Otherwise we will parse the error and return the response.

        // PasswordBrokerのvalidatorをここで定義
        $this->broker()->validator(function (array $credentials) {
            return true; // rules()ですでにバリデーションを実行しているので、さらにここでバリデーションの必要はなし！
        });

        $response = $this->broker()->reset(
            $this->credentials($request), function ($user, $password) {
                $this->resetPassword($user, $password);
            }
        );

        // If the password was successfully reset, we will redirect the user back to
        // the application's home authenticated view. If there is an error we can
        // redirect them back to where they came from with their error message.
        return $response == Password::PASSWORD_RESET
                    ? $this->sendResetResponse($request, $response)
                    : $this->sendResetFailedResponse($request, $response);
    }

    /**
     * Get the password reset validation rules.
     *
     * @return array
     */
    protected function rules()
    {
        return [
            'token' => 'required',
            'email' => 'required|email',
            'password' => 'required|confirmed|min:6',　// min:8でなくmin:6に変える
        ];
    }
...

rules()も再定義して６文字長としました。

さて、この問題6.xのバージョンではどうなんでしょう？ PasswordBroker.phpのコードを見ると、

vendor/laravel/framework/src/Illuminate/Auth/Passwords/PasswordBroker.php

namespace Illuminate\Auth\Passwords;

use Closure;
use Illuminate\Contracts\Auth\CanResetPassword as CanResetPasswordContract;
use Illuminate\Contracts\Auth\PasswordBroker as PasswordBrokerContract;
use Illuminate\Contracts\Auth\UserProvider;
use Illuminate\Support\Arr;
use UnexpectedValueException;

class PasswordBroker implements PasswordBrokerContract
{
...
    /**
     * Reset the password for the given token.
     *
     * @param  array  $credentials
     * @param  \Closure  $callback
     * @return mixed
     */
    public function reset(array $credentials, Closure $callback)
    {
        $user = $this->validateReset($credentials);

        // If the responses from the validate method is not a user instance, we will
        // assume that it is a redirect and simply return it from this method and
        // the user is properly redirected having an error message on the post.
        if (! $user instanceof CanResetPasswordContract) {
            return $user;
        }

        $password = $credentials['password'];

        // Once the reset has been validated, we'll call the given callback with the
        // new password. This gives the user an opportunity to store the password
        // in their persistent storage. Then we'll delete the token and return.
        $callback($user, $password);

        $this->tokens->delete($user);

        return static::PASSWORD_RESET;
    }

    /**
     * Validate a password reset for the given credentials.
     *
     * @param  array  $credentials
     * @return \Illuminate\Contracts\Auth\CanResetPassword|string
     */
    protected function validateReset(array $credentials)
    {
        if (is_null($user = $this->getUser($credentials))) {
            return static::INVALID_USER;
        }

        if (! $this->tokens->exists($user, $credentials['token'])) {
            return static::INVALID_TOKEN;
        }

        return $user;
    }
...

validateReset()から、validateNewPassword()は削除されていますね！

これに関しては、以下で説明されています。

https://laravel.com/docs/6.x/upgrade#belongs-to-update　（Password Resetの部分）

さらに、PRとして、 https://github.com/laravel/framework/pull/29480

もう、この部分で悩むことはなさそうです。

既存のＤＢからmigrationファイルを自動作成

Fri, 10 Jan 2020 03:33:08 +0900

私が現在管理するプロジェクトのほとんどは、Laravelのフレームワーク採用以前から存在したphpのプロジェクトです。嬉しいことにお客様から移行の機会を与えられて、ほとんどLaravelに書き換えることができました。しかし、それらのプロジェクトのDBの管理には、Laravelのmigrationを使用していません。私が開発したオンラインのツールが生成するSQLファイルでDBの変更を行っています。最近になって、プロジェクトのデータベーステストを行う必要が出て、migrationのファイルを用意しなければなくなりました。

どうして、migrationのファイルが必要？

今までは、dbunitなるものを使用してデータベーステストを行っていましたが、これが去年に作者（phpunitの作者でもある）の意向で開発が停止となりました。それゆえに、テストにおいてLaravelのRefreshDatabaseトレイトの使用に変えていくことが突然に必要になったわけです。

RefreshDatabaseは、毎回のテストの実行において、

$ php artisan migrate:fresh

の実行と同様に、migrationファイルで定義されたDBのテーブルをすべて削除し、再度一からそれらを作成します。つまり、データベースのテーブルをすべてゼロレコードの状態としてくれます。それゆえに、既存のDBのすべてのテーブルのmigrationを作成する必要があるのです。

migrationファイル自動生成ツール

既存のDBからmigrationファイルを作成するツールはないかと、探した結果、以下のツールが出てきました。

https://github.com/Xethron/migrations-generator

ツールのインストールには、

$ composer require --dev "xethron/migrations-generator"

をコマンドラインで実行します。

migrationファイルを作成するには、artisanの実行となります。laravel 5.8で新規のプロジェクトを作成して実行してみました。

$ php artisan migrate:generate
Using connection: mysql

Generating migrations for: password_resets, users

 Do you want to log these migrations in the migrations table? [Y/n] :
 > y

 Next Batch Number is: 2. We recommend using Batch Number 0 so that it becomes the "first" migration [Default: 0] :
 > 2

Setting up Tables and Index Migrations
Created: /vol1/usr/www/repos/repos/l58-new/database/migrations/2020_01_08_191742_create_password_resets_table.php
Created: /vol1/usr/www/repos/repos/l58-new/database/migrations/2020_01_08_191742_create_users_table.php

Setting up Foreign Key Migrations


Finished!

上の実行においては、２つ質問が尋ねられます。

最初は、migrationsのDBテーブルにログを作成するか？ 2番目は、そのログにおいてのバッチ番号をなんとするか？

上では、yと2と答えたところ、migrationsのデータは以下のようになりました。

mysql> select * from migrations;
+----+------------------------------------------------+-------+
| id | migration                                      | batch |
+----+------------------------------------------------+-------+
|  1 | 2014_10_12_000000_create_users_table           |     1 |
|  2 | 2014_10_12_100000_create_password_resets_table |     1 |
|  3 | 2020_01_08_191742_create_password_resets_table |     2 |
|  4 | 2020_01_08_191742_create_users_table           |     2 |
+----+------------------------------------------------+-------+
4 rows in set (0.00 sec)

すでに、php artisan migrateが実行されていたので、最初の２つのレコードはそのときに生成されていたものです。これらはLaraelのデフォルトのmigrationファイルです。

一方、generateで生成されたのは次の２つのレコードですが、見ての通り既存のものと重複となってしまいました。既存のDBをもとに１からDBテーブルを作成するという目的では、generate実行の前にmigrationsテーブルを空としたほうが良さそうですね。

さて、生成されたものと、デフォルトのmigrationファイルを比べてみましょう。

デフォルト：2014_10_12_000000_create_users_table.php

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

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

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

生成：2020_01_08_191742_create_users_table

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

class CreateUsersTable extends Migration {

	/**
	 * Run the migrations.
	 *
	 * @return void
	 */
	public function up()
	{
		Schema::create('users', function(Blueprint $table)
		{
			$table->bigInteger('id', true)->unsigned();
			$table->string('name');
			$table->string('email')->unique();
			$table->dateTime('email_verified_at')->nullable();
			$table->string('password');
			$table->string('remember_token', 100)->nullable();
			$table->timestamps();
		});
	}


	/**
	 * Reverse the migrations.
	 *
	 * @return void
	 */
	public function down()
	{
		Schema::drop('users');
	}

}

やや違いがありますね。例えば、email_verified_atの定義、なぜかtimestampからdateTimeとなっています。また、bigIncrementやrememberTokenに対応するフィールドも生成では変わっています。しかし、これらは、実行されるDBテーブルでは同じとなります。

ということで、mysqldumpの結果と見比べて、手動での調整が必要となりそうです。しかし、かなりの部分を作成してくれるので十分使えそうです。

Turbolinks、POST成功後のリダイレクト

Sun, 15 Dec 2019 00:53:46 +0900

前回のTurbolinks、再びにおいて掲載した記事に、修正が必要なことに気づきました。登録フォームのPOSTでバリデーションエラーが出て同画面に戻るときは問題ないのですが、エラーがなく登録完了してホーム画面へリダイレクトされたときが問題です。

以下のように、画面はホーム画面の中身となっていますが、ブラウザのURLがhomeであるべきところ、registerのままでした。

これを修正するには、まずブレードのインラインのjsから、

resources/views/auth/register.blade.php

...
@section('script')

    $(document).on('turbolinks:load', function() {
      $("form").on("submit", function(event) {
        event.preventDefault();

        $.ajax({
          url: '/register',
          type: 'POST',
          dataType: 'html',
          processData: false,
          contentType: false,
          cache: false,
          data: new FormData($("form")[0])
        }).done(function(response, status, $xhr) {

          var redirect = $xhr.getResponseHeader('Turbolinks-Location');

          if (redirect) { // 投稿成功でリダイレクトしたとき
            Turbolinks.visit(redirect);
          } else { // バリデーションエラーのとき
            var referrer = window.location.href;
            Turbolinks.controller.cache.put(referrer, Turbolinks.Snapshot.wrap(response));
            Turbolinks.visit(referrer, { action: 'restore' });
          }
        });
      });
    });

@endsection

変更は、投稿で成功したときを認識して、Turbolinks.visit()をリダイレクト先でコールするところです。

さて、問題は投稿が成功したか否かをどう判定するか、です。

それには、サーバーサイドでPOSTが生成するレスポンスのヘッダーにリダイレクト先を含む項目を追加してクライアント（ブラウザ）にコミュニケートする必要があります。上の例では、ヘッダーにTurbolinks-Locationの項目に値があれば、リダイレクトが必要という条件文になりました。その情報がなければ、バリデーションエラーが発生したので同じ画面を表示します。

さて、POSTのレスポンスにこの特別なヘッダーの情報を追加するには、以下のようにコントローラを編集します。

app/Http/Controllers/Auth/RegisterController.php

namespace App\Http\Controllers\Auth;

use App\User;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
use Illuminate\Foundation\Auth\RegistersUsers;

// register()で使用される以下の２行の宣言が必要！
use Illuminate\Http\Request;
use Illuminate\Auth\Events\Registered;

class RegisterController extends Controller
{
    use RegistersUsers;
...
   /**
     * Handle a registration request for the application.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function register(Request $request)
    {
        $this->validator($request->all())->validate();

        event(new Registered($user = $this->create($request->all())));

        $this->guard()->login($user);

//  オリジナルのコード
//        return $this->registered($request, $user)
//                        ?: redirect($this->redirectPath());

        return response('success', 200)
            ->header('Turbolinks-Location', $this->redirectPath());

    }
}

RegistersUsersのトレイトで定義されている、register()メソッドをコピーペーストして上書きします。ヘッダーのTurbolinks-Locationには、リダイレクト先のURLが含まれることになります。ちなみに、response()で指定している、‘success’の文字列は使用しないのでなんでもよいです。空でも。

これで登録を実行すると、POSTのヘッダーには以下のように, Turbolinks-Locationは/homeの値となります。そして、その値が先のインラインのjsで抽出されて、Turbolinks.visit()に渡されてbodyタグの中身を取り換えてブラウザのURLを変更します。

HTTP/1.1 200 OK
Date: Fri, 13 Dec 2019 17:31:21 GMT
Server: Apache/2.4.38 (Fedora) OpenSSL/1.1.1b
X-Powered-By: PHP/7.2.16
Cache-Control: no-cache, private
Turbolinks-Location: /home
...

リダイレクト先には、Turbolinks-Locationというヘッダーの変数名を使用しましたが、他と重複がなければどんな名前でもよいです。サーバーとクラインとで一致している限り。

コントローラを編集しなければならない部分が残念ですが、たいした編集ではないので、私の中ではやはりサイトのSPA化ではまだまだコストパフォーマンスが大きい技術です。

Turbolinks、再び

Tue, 03 Dec 2019 00:44:58 +0900

ほぼ２年前にTurbolinksを紹介しました。全ページロードのウェブサイトを高速のSPA(シングルページアプリ)に変えてくれます。しかも、Laravelのフロントエンドのブレードやバックエンドのコントローラーをまったく変えることなしです。今回は、再びこのTurbolinksに戻って、まずcdnを使わずにnpmを使用してトランスパイルします。そして前回不可能と思っていたajaxによるフォームのPOST投稿もSPA化します。

SPA移行へのコストが非常に低いTurbolinks

ある程度大きな規模のプロジェクトを抱えていると、開発テクノロジー進歩によりプログラムを書き直す必要性が出てきます。それはまったく新しいデバイスへの対応（例：bootstrap）であったり、プログラムの管理性を高めるためのフレームワークの採用（例：Laravel）であったりします。プロジェクトが大きいほど、書き直しには時間とコストがかかります。スマホの対応ならお客さんにとっては理解されやすいですが、フレームワークの採用では外観は何も変わらないときもあるので、何か月（あるいは何年）もかけて書き直す必要性を説くのは大変です。

今回のSPAの採用も同じ状況です。SPAの採用の目的はユーザー体験の改善です。画面のリフレッシュが行われないのでページの遷移がスムーズで高速です。それだけで採用の説得は十分ですが、問題はSPAへ移行のためのコストが非常に高いことです。まず、すでにたくさんある、しかも新しいのが次々と登場する、SPAのJavascriptのフレームワークの中で、どれが有望性があるか長期的に管理されるかを見極めるために時間が必要なこと、さらにどれかに決めたらそれを学習して巧みになること、その上で既存のプロジェクトをSPAへ移行する開発です。これらを考慮すると、ReactJS, AngularJS, VueJSなどを採用してSPAに書き直すには莫大な時間、つまりコストがかかります。それらのフレームワークの経験に乏しい私が持つ小さい開発チームだと、特に。

そこで輝くのがTurbolinks!

Turbolinksを採用すると、ウェブページ内に同じサイト内のリンク、つまりがあると、そのリンクがクリックされたら、Turbolinksはajaxでそのページを取ってきてその中ののコンテンツを現在のページのものと取り換えます。は同じなので、全ページ更新とはならず、SPA特有のスムーズなページ遷移となります。しかも、ブラウザのURLはあたかも全ページ更新と同様に変更されるし、遷移したページ内のJavascriptも実行されます。さらに、ブラウザのWeb History APIを利用してキャッシュからの「戻る」ボタンで前のページの出力にも対応しています。これらは、既存のサーバーサイドのプログラムを変更することなく、次に説明する、npmでパッケージを追加するだけでできちゃいます。夢のような話と思いませんか？

npmでパッケージを追加

このTurbolinksを前回紹介したときは、

<html lang="ja">                                                                                                                                                                                                   
  <head>                                                                                                                                                                                                           
    <meta charset="utf-8">                                                                                                                                                                                         
    <title>Turbolinks</title>                                                                                                                                                                                      
    <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.0.3/turbolinks.js"></script>    
..

のようにCDNを使う設定でした。

今回は、npmでパッケージを追加して（関連記事）して、npmでトランスパイルします。

まず、コマンドラインでパッケージの追加。

$ npm install turbolinks --save-dev

次に、bootstrap.jsに以下の行を追加して、このパッケージをロードします。

resources/js/bootstrap.js

...
var Turbolinks = require("turbolinks");
Turbolinks.start();

最後にトランスパイルの実行です（ライブバージョンは、npm run prod）。

$ npm run dev

これでホーム画面のリンクから以下の会員登録画面にアクセスすると、以下のようにすでにSPA化されています。画面の下は、FirefoxのInspectorのパネルですが、そこのxhrはXMLHttpRequest (XHR) のことでいわゆるajaxの実行のことです。

フォームの投稿のSPA化

さて、turbolinksは、リンクのようなGETに対しては自動にSPA化してくれますが、POSTは自動で対応していません。同じ登録画面で、入力して意図的にエラーを出すようにして、「Register」ボタンを押すと、以下のように通常の入力データの投稿のPOSTとエラーの出力のGETのアクションが起こります。

見ての通り、それらのアクションはajaxではありません。通常の全ページロードです。

turbolinksのレポのgithubサイトには、フォームの投稿後のリダイレクト、つまり入力が成功して違う画面に（例：ホーム画面）に飛ぶことに関して、ajaxを使用しての対応に関して書かれている部分があります。しかし、上のようにバリデーションエラーが発生して入力画面に戻りエラーを出力する場合は書かれていません。

つい最近まで、私も「そういうものなのか」「まあGETだけSPAになるだけでも結構」と思っていました。しかし、より調査したところ、Rubyではエラーの際に画面をレンダーするパッケージがある、ということを知りました。ちなみに、TurbolinksはRuby in Railsを開発したBaseCampが発明したものなので、とてもRubyとの仲が良い。

Rubyで可能なら、どこかにそれに対応するJavascriptの例があるのでは、と思い、以下にそれらしきディスカッションを見つけました。

https://github.com/turbolinks/turbolinks/issues/85#issuecomment-338784510

これをもとに、会員登録をSPA化してみます。

編集するのは以下のブレードです。

resources/views/auth/register.blade.php

...
@section('script')

    $(document).on('turbolinks:load', function() { // Turbolinksがロード完了のイベントにおいて、
      $("form").on("submit", function(event) {
        event.preventDefault();

        $.ajax({　// jqueryのajax関数
          url: '/register', // データ送信宛てのURL
          type: 'POST',
          dataType: 'html',
          processData: false,
          contentType: false,
          cache: false,
          data: new FormData($("form")[0])　// フォームのデータを送信
        }).done(function(response, status, $xhr) {
          if (response && ($xhr.getResponseHeader('Content-Type') || '').substring(0, 9) === 'text/html') {
            var referrer = window.location.href; //　現在のURLを取得
            Turbolinks.controller.cache.put(referrer, Turbolinks.Snapshot.wrap(response));　// キャッシュにレスのデータを入れる
            Turbolinks.visit(referrer, { action: 'restore' });　// キャッシュを呼び出す
          }
        });
      });
    });

@endsection

そして、このscriptのセクションは、レイアウトのブレードに入れ込みます。

resources/views/layouts/app.blade.ophp

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <script type="module">
        @yield('script')
    </script>
...

これで再度、登録画面での入力エラーの実行をすると、

今度は、documentではなくxhrでの取得になっています。

さらに、登録成功のときは、以下のようにホーム画面への遷移もSPA化されています。

前回のVue.js：バックエンドのバリデーションを使うと、まったく同じ動作です。比べてみてください。

Vue.js：バックエンドのバリデーションを使う

Sun, 24 Nov 2019 05:34:09 +0900

最近、フロントエンドのフレームワークのVue.jsを勉強し始めました。またしても世間の流行から一歩遅れての開始ですが、比較的大きなプロジェクトを管理する私としては、ピッカピッカの流行りをすぐに採用とは行きません。長期的な管理を考えてLaravelのように本当にメージャーになるかを見極めてからです。幸い、Laravelのコミュニティでは、Vue.jsが盛んに利用され情報が多いので、よりメージャーなReactやAngularなどのフレームワークの存在を気にしつつもLaravelとの親近さでVue.jsの習得です。Vue.jsの1からの説明は他の人のブログに任せて、私の方はいきなり実用的なVue.jsを紹介していく予定です。まず今回は、Vue.jsをフォームの入力のバリデーションに使用するところを紹介します。

フロントエンドのバリデーション

フォームのバリデーションと言えば、Laravelでは、コントローラにおけるvalidate()です。ルールを指定するだけでとても便利です。しかし、それはバックエンドの話で、その実行には毎回毎回画面を更新するPOSTの実行が必要です。それが嫌なら、inputのHTMLのタグのrequiredで入力必須の指定やtypeでデータタイプを指定するか、あるいはjqueryのvalidation inputのプラグインの使用で、フロントエンドである程度のバリデーションを肩代わりしてもらいます。

例えば、Laravelのデフォルトのインストールでの会員登録のフォームでは、以下のようにinputでtypeやrequiredを使いフロントエンドでベーシックなチェックしています。画面の更新を必要とせず高速なので、ユーザーにとっても快適です。

/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">{{ __('Register') }}</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">{{ __('Name') }}</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">{{ __('E-Mail Address') }}</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>     
...

画面ではこんな感じ。

しかし、フロンドエンドのチェックは完璧ではなく、例えば、パスワードの確認、つまりPasswordとConfirm Passwordの値が同じかどうかはバックエンドのバリデーションに任せます。

さらに、ブラウザを使用せずにPOSTで特定のURL（ここでは /register）に直接データを送信すれば、フロントエンドのバリデーションをすっ飛ばすことは簡単に可能なので、フロントエンドのバリデーションがあるからバックエンドのバリデーションが要らないということにはなりません。

もちろん、バリデーションがフロントにあるのは、バックエンドの使用が経済的（サーバーのリソースを消費しない）になるので良いのですが、同じバリデーションを２箇所で、しかも違う言語（片方はhtmlタグあるいはjquery、もう片方はlaravelやphp）で管理するのはやっかいです。そこで、Vue.jsを使用して画面を更新せずにバックエンドのコントローラのバリデーションを実行してエラーを出力すれば、というのが今回のポストです。

Vue.jsのバックエンドバリデーションパッケージ

今回使用するのは以下のパッケージです。Laracastで有名なJeffreyくんがオリジナルに作成したのをベルギーのspatieの会社がパッケージ化してオープンソースしています。ちなみに、spatieは前回紹介したWeb tinkerも開発しています。しかも、それはVue.jsで開発されています。

https://github.com/spatie/form-backend-validation

まず、インストールとしては、デフォルトのLaravelのプロジェクトを作成したことを仮定して、

$ php artisan make:auth

をコマンドラインで実行後、

$ npm install

を実行して、node_modulesをダウンロードして、

$ npm install vue
$ npm install form-backend-validation

とパッケージをインストールします。

ブレードとスクリプトの編集

それから、先の会員登録のフォームのブレードを以下のように編集します。完全にバックエンドのバリデーションのみを使うために、inputのタグ内において、requiredなどのフロントエンドのバリデーションは削除しました。また、emailではinput typeは、emailからtextに変更しています。上のHTMLを比べてみてください。

/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">{{ __('Register') }}</div>

        <div class="card-body">

          <div class="alert" :class="messageClass">
            @{{ message }}
          </div>

          <form @submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name);">

            <div class="form-group row">
              <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>

              <div class="col-md-6">
                <input id="name" type="text" class="form-control" :class="{ 'is-invalid': form.errors.has('name') }" v-model="form.name">
                <div class="invalid-feedback"
                  v-if="form.errors.has('name')"
                  v-text="form.errors.first('name')"></div>
              </div>
            </div>

            <div class="form-group row">
              <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

              <div class="col-md-6">
                <input id="email" type="text" class="form-control" :class="{ 'is-invalid': form.errors.has('email') }" v-model="form.email">
                <div class="invalid-feedback"
                  v-if="form.errors.has('email')"
                  v-text="form.errors.first('email')"></div>
              </div>
            </div>

            <div class="form-group row">
              <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

              <div class="col-md-6">
                <input id="password" type="password" class="form-control" :class="{ 'is-invalid': form.errors.has('password') }" v-model="form.password">
                <div class="invalid-feedback"
                  v-if="form.errors.has('password')"
                  v-text="form.errors.first('password')"></div>
              </div>
            </div>

            <div class="form-group row">
              <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>

              <div class="col-md-6">
                <input id="password_confirmation" type="password" class="form-control" :class="{ 'is-invalid': form.errors.has('password_confirmation') }" v-model="form.password_confirmation">
                <div class="invalid-feedback"
                  v-if="form.errors.has('password_confirmation')"
                  v-text="form.errors.first('password_confirmation')"></div>
              </div>
            </div>

            <div class="form-group row mb-0">
              <div class="col-md-6 offset-md-4">
                <button type="submit" class="btn btn-primary" :disabled="form.errors.any()">
                  {{ __('Register') }}
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

VueやFormのパッケージを使用するために、app.jsの編集も必要です。

resources/js/app.js

require('./bootstrap');

window.Vue = require('vue');

import Form from 'form-backend-validation';

window.Form = Form;

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

    data: {
            form: new Form({
                name: '',
                email: '',
                password: '',
                password_confirmation: ''
            }),
            message: '',
            messageClass: ''
    },

    methods: {
        onSubmit() {
            this.form['post']('/register') // 適切なパスに変更してください！
                .then(response => this.displaySuccessMessage('Your account was created'))
                .catch(response => this.displayErrorMessage('Your account was not created'));
        },

        displaySuccessMessage(message) {
            this.messageClass = 'alert-success';
            this.message = message;
        },

        displayErrorMessage(message) {
            this.messageClass = 'alert-danger';
            this.message = message;
        },

        clearMessage() {
            this.message = '';
        },
    }

});

最後に、以下の実行が必要です。

$ npm run dev

ブラウザで見てみましょう。RegisterController.phpのコントローラのvalidationが実行されてエラーが画面を更新せずにエラーが出力されています。

インラインのスクリプト

上の例では、app.jsでは、登録画面だけにしか対応していません。他にも入力画面があるなら問題です。必要な部分だけをそれぞれに画面のインラインスクリプトとしてみます。

まず、app.jsからVueのオブジェクト生成のコードを削除します。

resources/js/app.js

require('./bootstrap');

window.Vue = require('vue');

import Form from 'form-backend-validation';

window.Form = Form;

そして、それをコンパイルします。

$ npm run dev

次に、app.jsで削除したオブジェクト生成を、register.blade.phpのインラインとします。

/resources/views/auth/register.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
...
@endsection

@section('script')
    const app = new Vue({
        el: '#app',

        data: {
                form: new Form({
                    name: '',
                    email: '',
                    password: '',
                    password_confirmation: ''
                }),
                message: '',
                messageClass: ''
        },

        methods: {
            onSubmit() {
                this.form['post']('/register')
                    .then(response => this.displaySuccessMessage('Your account was created'))
                    .catch(response => this.displayErrorMessage('Your account was not created'));
            },

            displaySuccessMessage(message) {
                this.messageClass = 'alert-success';
                this.message = message;
            },

            displayErrorMessage(message) {
                this.messageClass = 'alert-danger';
                this.message = message;
            },

            clearMessage() {
                this.message = '';
            },
        }
    });
@endsection

最後に、レイアウトを編集して、インラインのスクリプトを出力するようにします。以下の@yield(‘script’)の部分です。必ず、