Laravel入門トップページ


目次

  1. Composerのダウンロードとインストール
  2. コメント掲示板を作成してみよう
  3. リレーションシップを使いこなそう
  4. ユーザ認証の機能を実現しよう
  5. マルチ認証の機能を実現しよう
    1. 概要と準備
    2. デフォルト認証ガードの変更
    3. adminとprofessorを追加
    4. ログイン機能の実装
  6. MongoDB に接続しよう
  7. キューを利用しよう
  8. コマンド(コンソール)を利用しよう
  9. 本番環境にデプロイしよう

マルチ認証の機能を実現しよう

ログイン機能の実装

admin と professor で実際にログインできるように実装しよう.

目次に戻る

ログインフォームの準備

resources/views/ 以下に admin と professor フォルダを作成し,それぞれの中に login.blade.php と home.blade.php のファイルを作成する.また,レイアウトのファイルも admin 用と professor 用を準備する.

[GakuinHana@rin06 laravelUser]$ ls resources/views/ ⏎
auth  email  home.blade.php  layouts  users  welcome.blade.php
[GakuinHana@rin06 laravelUser]$ mkdir resources/views/admin ⏎
[GakuinHana@rin06 laravelUser]$ mkdir resources/views/professor ⏎
[GakuinHana@rin06 laravelUser]$ ls resources/views/ ⏎
admin  auth  email  home.blade.php  layouts  professor  users  welcome.blade.php
[GakuinHana@rin06 laravelUser]$ touch resources/views/admin/login.blade.php ⏎
[GakuinHana@rin06 laravelUser]$ touch resources/views/admin/home.blade.php ⏎
[GakuinHana@rin06 laravelUser]$ touch resources/views/professor/login.blade.php ⏎
[GakuinHana@rin06 laravelUser]$ touch resources/views/professor/home.blade.php ⏎
[GakuinHana@rin06 laravelUser]$ cp resources/views/layouts/app.blade.php resources/views/layouts/admin.blade.php ⏎
[GakuinHana@rin06 laravelUser]$ cp resources/views/layouts/app.blade.php resources/views/layouts/professor.blade.php ⏎
[GakuinHana@rin06 laravelUser]$

resources/views/layouts/admin.blade.php を修正する.ここでは,route('xxx') をすべて route('admin.xxx') に変更する.また,新規登録をさせないように Register へのリンクを削除する.さらに,Profileを表示させる部分のリンクも削除しておく.

resources/views/layouts/admin.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">

                    <!-- Collapsed Hamburger -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <!-- Branding Image -->
                    <a class="navbar-brand" href="{{ url('/') }}">
                        {{ config('app.name', 'Laravel') }}
                    </a>
                </div>

                <div class="collapse navbar-collapse" id="app-navbar-collapse">
                    <!-- Left Side Of Navbar -->
                    <ul class="nav navbar-nav">
                         
                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="nav navbar-nav navbar-right">
                        <!-- Authentication Links -->
                        @if (Auth::guest())
                            <li><a href="{{ route('admin.login') }}">Login</a></li>
                        @else
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                    {{ Auth::user()->name }} <span class="caret"></span>
                                </a>

                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a href="{{ route('admin.logout') }}"
                                            onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                            Logout
                                        </a>

                                        <form id="logout-form" action="{{ route('admin.logout') }}" method="POST" style="display: none;">
                                            {{ csrf_field() }}
                                        </form>
                                    </li>
                                                                              
                                </ul>
                            </li>
                        @endif
                    </ul>
                </div>
            </div>
        </nav>

        @yield('content')
    </div>

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

admin のログインフォームのビューをデザインする.なお,resources/views/auth/login.blade.php をコピーして一部修正するだけで良い.なお,パスワードを忘れたときのリセットを行わないので,その部分(68行目あたり)は削除しておく.

resources/views/admin/login.blade.php
@extends('layouts.admin')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Admin Login</div>

                <div class="panel-body">
                    {{-- フラッシュメッセージの表示 --}}
                    @if (session('warning'))
                        <div class="alert alert-warning">
                            {{ session('warning') }}
                        </div>
                    @endif
                    @if (session('status'))
                        <div class="alert alert-info">
                            {{ session('status') }}
                        </div>
                    @endif
                    <form class="form-horizontal" method="POST" action="{{ route('admin.login') }}">
                        {{ csrf_field() }}

                        <div class="form-group{{ $errors->has('login_id') ? ' has-error' : '' }}">
                            <label for="login_id" class="col-md-4 control-label">Login ID</label>

                            <div class="col-md-6">
                                <input id="login_id" type="text" class="form-control" name="login_id" value="{{ old('login_id') }}" required autofocus>

                                @if ($errors->has('login_id'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('login_id') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                            <label for="password" class="col-md-4 control-label">Password</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control" name="password" required>

                                @if ($errors->has('password'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> Remember Me
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-8 col-md-offset-4">
                                <button type="submit" class="btn btn-primary">
                                    Login
                                </button>
                                                                           
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

ホーム画面用のビューも整えておく.これも resources/views/home.blade.php をコピーして一部修正するだけで良い.

resources/views/admin/home.blade.php
@extends('layouts.admin')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Admin Dashboard</div>

                <div class="panel-body">
                    {{-- フラッシュメッセージの表示 --}}
                    @if (session('warning'))
                        <div class="alert alert-warning">
                            {{ session('warning') }}
                        </div>
                    @endif
                    @if (session('status'))
                        <div class="alert alert-info">
                            {{ session('status') }}
                        </div>
                    @endif
                    @if (session('status'))
                        <div class="alert alert-success">
                            {{ session('status') }}
                        </div>
                    @endif

                    You are logged in as admin!
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

コントローラを修正する.

app/Http/Controllers/Admin/HomeController.php
  public function index()
  {
      return view('admin.home');
  }
app/Http/Controllers/Admin/LoginController.php
  public function showLoginForm()
  {
    return view('admin.login');
  }

目次に戻る

ログインしてみる

/admin/login にアクセスして,管理者の一人である「taro」でログインしてみる.

ma-1 ma-2 ma-3

目次に戻る

スタイルを変更する

うまく動いたが,一般ユーザと管理者用の画面でデザインが全く同じだと混乱する可能性がある.よって,管理者用ページの背景色を変えてデザインを変更する.

resources/views/layouts/admin.blade.php でスタイルシートを読み込むように設定する.

resources/views/layouts/admin.blade.php (抜粋)
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link href="{{ asset('css/adminstyle.css') }}" rel="stylesheet">
</head>
<body>

スタイルシートは public/css フォルダに設置すれば良い.次のようなスタイルを設定する.

public/css/adminstyle.css
body {
  background-color: deepskyblue;
}

これによって,管理者画面と一般ユーザ画面で背景色が異なるようになった.

ma-4 ma-5

ここでは,管理者ログインを実装したが,教員用のログインもほぼ同様に実装できます.


目次に戻る