「CakePHP3」ログイン画面とログイン機能の作り方【入門】

カテゴリー:PHP

前回、ユーザーの登録関連でパスワードのハッシュ化が完了したので、今回はログイン画面とログイン機能を実装して行こうと思います。今回もsrcフォルダ以下のUsers関連を編集していきます。

今回のページでは、ログイン画面とログイン機能関連から下記の2項目をまとめています。

  • 「CakePHP3のログイン画面の作り方」
  • 「CakePHP3のログイン機能の作り方」

CakePHP3のログイン画面の作り方

今回作成するログイン画面にアクセスするURLは下記の通りになります。

http://localhost/cms/users/login

MAMPを起動して、この時点で上記URLにアクセスするとloginアクションがまだ存在していないので下記画像のようにエラーが表示されます。

CakePHP3でログイン画面の作り方「エラー画面」

エラーを確認しながら作業を進めていくとプログラムの上達が早くなるのかなと個人的には感じているのでエラーもしっかり確認をいつもしています。

ということで、エラー解消のために「src/Controller/UsersController.php」にlogin actionを追加していきます。

一先ず追加するコードは下記です。UsersController.php内のDelete methodの下に追加しておきます。

    /**
     * Login method
     */
    public function login()
    {
        if ($this->request->is('post')) {
            $user = $this->Auth->identify();
            if ($user) {
                $this->Auth->setUser($user);
                return $this->redirect($this->Auth->redirectUrl('/users'));
            }
            $this->Flash->error('ユーザー名またはパスワードが不正です。');
        }
    }

ついでにlogout actionもlogin actionの下に追加しておきます。

    /**
     * logout method
     */
    public function logout()
    {
        $this->Flash->success('ログアウトしました。');
        return $this->redirect($this->Auth->logout());
    }

追加後、再度「http://localhost/cms/users/login」にアクセスをすると今度は下記画像のようにMissing Templateのエラーが表示されます。

CakePHP3でログイン画面の作り方「Missing Template」

Missing Templateを解消するために続いて、「src/Template/Users/」以下に「login.ctp」を新規作成します。

CakePHPでは表示部分のファイルは主にTemplateフォルダ以下に作成していきます。

login.ctpを作成して、下記のタグとコードを追加します。

    <?php
    /**
     * @var \App\View\AppView $this
     */
    ?>
    <nav class="large-3 medium-4 columns" id="actions-sidebar">
      <ul class="side-nav">
          <li class="heading"><?= __('Actions') ?></li>
          <li><?= $this->Html->link(__('List Users'), ['action' => 'index']) ?></li>
          <li><?= $this->Html->link(__('List Articles'), ['controller' => 'Articles', 'action' => 'index']) ?></li>
          <li><?= $this->Html->link(__('New Article'), ['controller' => 'Articles', 'action' => 'add']) ?></li>
      </ul>
    </nav>
    <div class="users form large-9 medium-8 columns content">
    <?= $this->Form->create() ?>
      <fieldset>
        <legend><?= __('ログイン') ?></legend>
        <?= $this->Form->control('email') ?>
        <?= $this->Form->control('password') ?>
      </fieldset>
    <?= $this->Form->button('ログイン') ?>
    <?= $this->Form->end() ?>
    </div>
  

ここまでで、「http://localhost/cms/users/login」にアクセスをするとログイン画面が表示されるようになりました。

CakePHP3のログイン機能の作り方

ここからは、「src/Controller/AppController.php」を編集していきます。

下記のコードをInitialization hook method内に追加します。

    $this->loadComponent('Auth', [
            'authenticate' => [
                'Form' => [
                    'fields' => [
                        'username' => 'email',
                        'password' => 'password'
                    ]
                ]
            ],
            'loginAction' => [
                'controller' => 'Users',
                'action' => 'login'
            ],
            'authorize' => ['Controller'],
            'unauthorizedRedirect' => $this->referer()
        ]);

        $this->Auth->allow(['display', 'view', 'index']);

コードを追加した後のAppController.php下記のようになります。

<?php
/**
 * CakePHP(tm) : Rapid Development Framework (https://cakephp.org)
 * Copyright (c) Cake Software Foundation, Inc. (https://cakefoundation.org)
 *
 * Licensed under The MIT License
 * For full copyright and license information, please see the LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @copyright Copyright (c) Cake Software Foundation, Inc. (https://cakefoundation.org)
 * @link      https://cakephp.org CakePHP(tm) Project
 * @since     0.2.9
 * @license   https://opensource.org/licenses/mit-license.php MIT License
 */
namespace App\Controller;

use Cake\Controller\Controller;
use Cake\Event\Event;

/**
 * Application Controller
 *
 * Add your application-wide methods in the class below, your controllers
 * will inherit them.
 *
 * @link https://book.cakephp.org/3.0/en/controllers.html#the-app-controller
 */
class AppController extends Controller
{

    /**
     * Initialization hook method.
     *
     * Use this method to add common initialization code like loading components.
     *
     * e.g. `$this->loadComponent('Security');`
     *
     * @return void
     */
    public function initialize()
    {
        parent::initialize();

        $this->loadComponent('RequestHandler', [
            'enableBeforeRedirect' => false,
        ]);
        $this->loadComponent('Flash');

        /*
         * Enable the following component for recommended CakePHP security settings.
         * see https://book.cakephp.org/3.0/en/controllers/components/security.html
         */
        //$this->loadComponent('Security');

    // ここから下が追加したコード
        $this->loadComponent('Auth', [
            'authenticate' => [
                'Form' => [
                    'fields' => [
                        'username' => 'email',
                        'password' => 'password'
                    ]
                ]
            ],
            'loginAction' => [
                'controller' => 'Users',
                'action' => 'login'
            ],
            'authorize' => ['Controller'],
            'unauthorizedRedirect' => $this->referer()
        ]);

        $this->Auth->allow(['display', 'view', 'index']);
    }
}

完了後、再度「UsersController.php」に戻って下記コード先ほど追加したlogout actionの下に追加して、ログアウトとユーザーの新規登録画面にはユーザー認証なしにアクセスができるようにします。

    /**
     * Initialization method
     */
    public function initialize()
    {
        parent::initialize();
        $this->Auth->allow(['logout', 'add']);
    }

これで、http://localhost/cms/users/loginにアクセスをして、前回作成したユーザーでログイン後、http://localhost/cms/users/logoutにアクセスをするとログアウトができるはずです。

ここまでで、ユーザーの追加、ログイン機能は完了です。

参考:CakePHP3クイックスタートガイド「CMS チュートリアル – 認証」


タグ

関連する投稿

ドラクエ好きな社会保険労務士有資格者・ファイナンシャルプランナー技能士検定2級正会員が運営をしています。当ブログではDQMSLを中心にWordPress・HTML・CSS・JS・PHPなどのTips備忘記録や資格関連の情報、その他雑記を発信して行きます。