コンテンツに移動 ナビゲーションに移動

IT全般に関する雑記や技術ブログ。wordpressやPHP LaravelたまにPython

南の島のSE エンジニアブログ

PHP
  1. HOME
  2. PHP
  3. Laravel8でログイン機能実装1 基本機能導入編
2020年8月7日 / 最終更新日 : 2022年8月8日 syun03 PHP

Laravel8でログイン機能実装1 基本機能導入編

本連載では、Laravelのバージョン8でログイン機能を実装する方法をご紹介いたします。バージョン5の記事や導入のみを紹介した記事はよく見るのですが、実用を意識したカスタマイズまではあまり見かけませんでしたのでこちらでご紹介いたします。

バージョン6以降は同じ手順です。

目次
  • 1. 目的
  • 2. 目指すサイトの構成
  • 3. 実装
  • 3.1. パッケージのインストール
  • 3.1.1. 会員登録画面
  • 3.1.2. ログイン画面
  • 3.2. 日本語化
  • 3.2.1. Laravelの日本語化
  • 3.2.2. ログイン画面の日本語化
  • 3.3. エラーメッセージの日本語化
  • 4. ログイン機能連載一覧

関連記事で全シリーズを紹介しております。

導入辺をスキップされる方は「関連記事」からリンクください。

目的

Laravelは標準機能を使って会員サイトを構築することができます。

ただ、実用的なものにするには少し手を加える必要がございますので

本稿では基本的な導入手順に加えて、カスタマイズについても記載してきます。

最低限ここまでやれば、まずは実用可能なレベルかと思います。

目指すサイトの構成

本稿では下記の機能を構成します。会員サイトとして最低限の機能ですね。

(会員情報変更などは次回以降で解説致します。現段階では目を瞑っていただいて、、)

  • 会員登録
  • ログイン
  • 会員メニュー
  • ログアウト
  • パスワード再設定

Laravelでの実装

Laravel5まではmake:authというコマンドがあったのですがLaravel6以降はこのコマンドがなくなっております。

でも諦めることはありません。方法が変わっただけで、Laravelの強力な認証機能はいまでも利用可能です。

コマンドはありませんが、公式に記載されている手順はございますのでこの内容に従って導入を進めていきます。

パッケージのインストール

https://readouble.com/laravel/8.x/ja/frontend.html

まずはUIパッケージをインストールします。

composer require laravel/ui:^1.0 --dev

パッケージがインストールできたら、フロントエンドのスカフォールドをインストールします。

// 基本的なスカフォールドを生成
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// ログイン/ユーザー登録スカフォールドを生成 
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

これらはすべてきちんとインストールしてください。

「bootstrapしか使わないな」などと思って、他をインストールしないと

このようになります。

ログイン画面 デザインなしver
ログイン画面 デザインなしver

あれ、なんだか画面が崩れている気がする。。

デザインが当たっていない、、、(失敗談)

ということで、きちんとすべてインストールすると、TOP画面(「Laravel」と大きく表示されている、ようこそ的なページ)の右上にloginとregisterが追加されています。

Laravel TOP
Laravel TOP

これで基本的なログイン機能が実現されています。実に簡単ですね。

それではそれぞれの画面を見ていきます。

会員登録画面

「Register」の方です。お客様が会員登録する際に利用するページです。

会員登録画面
会員登録画面

きれいに表示されていますね。

デフォルトでの入力項目は下記4つです。

  • 氏名
  • メールアドレス(※)
  • パスワード(※)
  • 確認用パスワード(※)

試しにまずはさくっと登録しようとすると

Laravel会員登録画面 パスワード登録チェック
Laravel会員登録画面 パスワード登録チェック

パスワードを入力しない状態だとエラーが返ってきます。

なんとすでにバリデーションもされています。メールアドレスに@が含まれていない場合や最大入力文字数などもすでに考慮されている状態となっています。すばらしい。

当然メールアドレスの重複チェックなどもされております。

ログイン画面

「Login」の方です。会員登録した後にログインする画面

Laravel ログイン画面
Laravel ログイン画面

こちらも問題なしです。機能的にはすでに完成。

でも実際に使うにはまだまだ改良の余地はあります。

日本語化

まずは理解できる言語にしないといけないですね。そう、日本語化です。

Laravelの日本語化

すでに対応済みの方は読み飛ばしてください。

Laravel自体を日本語化するには、読み込む言語ファイルを日本語に指定する必要があります。下記の箇所を修正します

//70行目くらい
'locale' => 'ja'

//83行目くらい,
'fallback_locale' => 'ja',

//109行目くらい
'faker_locale' => 'ja_JP',

ログイン画面の日本語化

これは手順さえわかってしまえば簡単で、下記jsonファイルを適切な場所に保存するだけです。

{
    "Login": "ログイン",
    "login_id": "ログインID",
    "Register": "新規登録",
    "Forgot Your Password?": "パスワードを忘れた場合",
    "Reset Password": "パスワード再設定",
    "Send Password Reset Link":  "パスワード再設定URLを送信",

    "Name": "お名前",
    "E-Mail Address": "メールアドレス",
    "Password": "パスワード",
    "Confirm Password": "パスワード(確認用)",
    "Remember Me": "ログイン状態を保存",

    "Hello!": "ご利用ありがとうございます。",
    "Reset Password Notification":  "パスワード再設定のお知らせ",
    "You are receiving this email because we received a password reset request for your account.": "あなたのアカウントでパスワード再発行のリクエストがありました。",
    "This password reset link will expire in :count minutes.": "再設定URLの有効期限は :count 分です。",
    "If you did not request a password reset, no further action is required.": "もしパスワード再発行をリクエストしていない場合、操作は必要ありません。",
    "If you’re having trouble clicking the \":actionText\" button, copy and paste the URL below\ninto your web browser: [:actionURL](:actionURL)": "\":actionText\"ボタンを押しても何も起きない場合、以下URLをコピーしてWebブラウザに貼り付けてください。\n[:actionURL](:actionURL)",
    "Regards": "よろしくお願いいたします"
}

このファイルを配置するだけで、この通り日本語化されました。

Laravel会員登録画面 日本語化
Laravel会員登録画面 日本語化

パスワード再設定のメールについても、この通り日本語化対応完了しております。

パスワード再設定メール

エラーメッセージの日本語化

これで日本語化は完了したと思ってたのも束の間

テストをしていると、違和感のあるこんなメッセージが表示されていることを発見します。

Laravel メールアドレス重複チェックbefore
Laravel メールアドレス重複チェックbefore

「email」でもわからないことはないですが

この際すべて日本語化してしまいましょう。

ここではバリデーションメッセージ用の言語ファイルを更新します。

編集するファイルは下記です。

    'attributes' => [
        'email' => 'メールアドレス',
],

attributesに「email」の文字列に対して、何の日本語に変換するかを記述します。

たったこれだけで、エラーメッセージの日本語化も完了です。

Laravel メールアドレス重複チェックafter
Laravel メールアドレス重複チェックafter

この手順は、Laravelにてバリデーションエラーを記述する際の基本的な手順です。

本稿は以上となります。

次回はログイン時に利用する項目として「ログインID」が利用できるようにする方法をご紹介いたします。

Laravelログイン機能 連載一覧

  • Laravel 8でログイン機能実装1 基本機能 ←いまここ
  • Laravel 8でログイン機能実装2 ログインIDの導入
  • Laravel 8でログイン機能実装3 会員登録時の入力項目追加
  • Laravel 8でログイン機能実装4 ValueObjectとバリデーション
  • Laravel 8でログイン機能実装5 会員情報変更
  • クリックして Twitter で共有 (新しいウィンドウで開きます)
  • Facebook で共有するにはクリックしてください (新しいウィンドウで開きます)

関連記事

LaravelとAmazon Cognitoでログイン実装
Laravelで Amazon Cognito ログイン認証2【会員登録機能】
 2022年9月2日
Laravel8でログイン機能実装5 会員情報更新
Laravel 8で会員サイト構築5 会員情報更新機能
 2020年9月19日
Laravel8でログイン機能実装4 値オプジェクト
Laravel8 ログイン機能実装4 値オブジェクトを用いたバリデーション
 2020年9月15日
Laravel8でログイン機能実装3
Laravel 8でログイン機能実装3 会員登録項目追加
 2020年8月31日
Laravel8でログイン機能実装2
Laravel 8でログイン機能実装2 ログインID導入
 2020年8月12日
カテゴリー
PHP、Laravel
タグ
ログイン

コメントを残す コメントをキャンセル

wordpress
WP-Membersで会員サイト構築1

次の記事

WP-Membersで会員サイト構築(ログインIDをメールアドレスに変更)
2020年8月10日

検索

自己紹介

auther

南の島を愛するエンジニア
他にはない一歩踏み込んだ内容を心がけています。PHP/Phtyonでの開発やwordpressのカスタマイズ。最近はAWS
【IPA資格】
ITストラテジスト/ ITアーキテクト/ 情報セキュリティスペシャリスト

ココナラで活動中 お仕事のご依頼はこちら

【お友達紹介キャンペーン】ここから会員登録で1,000ポイント獲得

ランサーズはこちら お仕事承ります

人気記事

カテゴリー

  • AWS (5)
  • Python (4)
    • Django (4)
  • システム構築 (5)
  • PHP (19)
    • Laravel (18)
  • wordpress (31)
    • WooCommerce (5)
    • welcart (2)
  • ライフスタイル (1)
    • 副業 (1)
  • セキュリティ (1)
  • 資格 (35)
    • 基本情報技術者試験 (2)
    • プロジェクトマネージャ (7)
    • システムアーキテクト (3)
    • ITストラテジスト (5)
    • 情報処理安全確保支援士 (17)
  • その他 (7)

タグ

AWS (1) cognito (2) laravel-admin (4) SalonBookingSystem (5) simple-membership (3) stripe (5) subscription (1) wp-members (10) ドメイン駆動設計 (1) ログイン (6) 会員サイト (1)

目次

  • 1 目的
  • 2 目指すサイトの構成
  • 3 Laravelでの実装
    • 3.1 パッケージのインストール
    • 3.2 日本語化
    • 3.3 エラーメッセージの日本語化
  • 4 Laravelログイン機能 連載一覧

当サイトについて

TOP |
プライバシーポリシー |
お問合せ

カテゴリー

  • AWS
  • Python
    • Django
  • システム構築
  • PHP
    • Laravel
  • wordpress
    • WooCommerce
    • welcart
  • ライフスタイル
    • 副業
  • セキュリティ
  • 資格
    • 基本情報技術者試験
    • プロジェクトマネージャ
    • システムアーキテクト
    • ITストラテジスト
    • 情報処理安全確保支援士
  • その他

タグ

  • laravel
  • wp-members
  • 会員サイト
  • ドメイン駆動設計
  • simple-membership
  • stripe
  • SalonBookingSystem
  • laravel-admin
  • subscription
  • AWS
  • ログイン
  • cognito

最近の投稿

プロジェクトマネージャ試験令和4年度秋季 午後1問3解答速報
【解答・解説】プロジェクトマネージャ 令和4年度秋季【午後1問3】
2022年10月15日
プロジェクトマネージャ試験令和4年度秋季 午後1解答速報
【解答・解説】プロジェクトマネージャ 令和4年度秋季【午後1問2】
2022年10月12日
【解答・解説】情報処理安全確保支援士 令和4年度秋季【午後2問2】
2022年10月10日
情報処理安全確保支援士令和4年度秋季 午後1解答速報
【解答・解説】情報処理安全確保支援士 令和4年度秋季【午後1問3】
2022年10月9日
情報処理安全確保支援士令和4年度秋季 午後1解答速報
【解答・解説】情報処理安全確保支援士 令和4年度秋季【午後1問2】
2022年10月9日

Copyright © 南の島のSE エンジニアブログ All Rights Reserved.

MENU
  • HOME