シムノート

PHPフレームワークSymfonyの学習帳

ユーザ用ツール

サイト用ツール


サイドバー

メニュー



このエントリーをはてなブックマークに追加

blog:2015-12-22:symfony入門_todoリストチュートリアル_ユーザー認証

Symfony3入門 TODOリストチュートリアル : (4) ユーザー認証

ユーザー認証を追加し、ログインしないとTODOリストが見れないようにします。

FOSUserBundleの導入

「超入門 Symfony3 : (13) Bundle」と同じ手順で、Userエンティティを追加し、FOSUserBundleのインストールと設定を行って下さい。

security.ymlの設定は以下になります。

security:
    # 認証方法
    firewalls:
        dev:
            pattern: ^/(_(profiler|wdt)|css|images|js)/
            security: false

        main:
            # フォームログイン
            form_login:
                provider: fos_userbundle
                csrf_token_generator: security.csrf.token_manager
            logout: true
            anonymous: ~

    # アクセス制御
    access_control:
        - { path: ^/task, role: ROLE_USER }

    # ユーザー情報取得方法
    providers:
        fos_userbundle:
            id: fos_user.user_provider.username

    # パスワード暗号化方法
    encoders:
        FOS\UserBundle\Model\UserInterface: bcrypt

ユーザー登録

ユーザーのRoleはROLE_USERとします。

$ bin/console fos:user:create r2d2 r2d2@task.com r2d2
$ bin/console fos:user:create c3po c3po@task.com c3po
$ bin/console fos:user:create bb8 bb8@task.com bb8

$ bin/console fos:user:promote r2d2 ROLE_USER
$ bin/console fos:user:promote c3po ROLE_USER
$ bin/console fos:user:promote bb8 ROLE_USER

Viewの修正

FOSUserBundleのViewをオーバーライドして修正します。

layout.html.twig

{% extends "base.html.twig" %}

{% block body %}
    {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
        <div>
            {{ 'layout.logged_in_as'|trans({'%username%': app.user.username}, 'FOSUserBundle') }} |
        </div>
    {% else %}
        {% if app.request.hasPreviousSession %}
            {% for type, messages in app.session.flashbag.all() %}
                {% for message in messages %}
                    <div class="flash-{{ type }}">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endfor %}
        {% endif %}

        <div>
            {% block fos_user_content %}
            {% endblock fos_user_content %}
        </div>
    {% endif %}
{% endblock %}

login.html.twig

{% extends "FOSUserBundle::layout.html.twig" %}

{% block title %}Login{% endblock %}

{% trans_default_domain 'FOSUserBundle' %}

{% block body %}
<div class="col-sm-offset-2 col-sm-8">
  <div class="panel panel-default">
    <div class="panel-heading">
      Login
    </div>
    <div class="panel-body">
    {% block fos_user_content %}
      {% if error %}
        <div class="alert alert-danger">
          {{ error.messageKey|trans(error.messageData, 'security') }}
        </div>
      {% endif %}

      <form action="{{ path("fos_user_security_check") }}" method="post">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />

        <div class="form-group">
          <label for="username">{{ 'security.login.username'|trans }}</label>
          <input type="text" id="username" class="form-control" name="_username" value="{{ last_username }}" required="required" />
        </div>

        <div class="form-group">
          <label for="password">{{ 'security.login.password'|trans }}</label>
          <input type="password" id="password" class="form-control" name="_password" required="required" />
        </div>

        <div class="checkbox">
          <label>
              <input type="checkbox" id="remember_me" name="_remember_me" value="on" />
            {{ 'security.login.remember_me'|trans }}
          </label>
        </div>

        <input type="submit" id="_submit" class="btn btn-primary btn-block" name="_submit" value="{{ 'security.login.submit'|trans }}" />
      </form>
    {% endblock fos_user_content %}
    </div>
  </div>
</div>
{% endblock %}

ナビゲーションを修正します。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand" href="{{ path('task_index') }}">Task List</a>
    </div>

    <div class="navbar-collapse collapse" id="navbar">
      {# Left Menu #}
      <ul class="nav navbar-nav">
        &nbsp;
      </ul>

      {# Right Menu #}
      <ul class="nav navbar-nav navbar-right">
        {% if app.user %}
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
              {{ app.user.username }} <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="{{ path('fos_user_security_logout') }}">Logout</a></li>
            </ul>
          </li>
        {% else %}
          <li><a href="{{ path('fos_user_security_login') }}">Login</a></li>
        {% endif %}
      </ul>
    </div>
  </div>
</nav>

動作確認

http://localhost:8000/task にアクセスして動作確認を行います。ログインしないとTaskのCRUD処理を行えないことを確かめます。


Comments



185 -15 =​ ?
blog/2015-12-22/symfony入門_todoリストチュートリアル_ユーザー認証.txt · 最終更新: 2015/12/22 18:34 by tsubo