ルート設定
デフォルトで、FuelPHPは、fuel/app/view/welcome/index.phpを表示します。 localhost/~codex/にアクセスしたときに、表示される画面がそれです。
今回の場合、ここをfrontページにします。 そして、localhost/~codex/login/にアクセスすると、loginページが表示されるようにしましょう。
routes.phpを修正する
デフォルトでwelcome/index.phpが表示されていますので、loginの時のルートを追加します。fuel/app/config/routes.phpを修正します。
|
1 2 3 4 5 6 |
return array( '_root_' => 'welcome/index', // The default route '_404_' => 'welcome/404', // The main 404 route 'login' => array('welcome/login', 'name' => 'login'), ); |
ログインページ用index.phpを作成する
fuel/app/views/welcome/login/index.phpを作成します。
どちらにしても、後で上書きするので、内容はなんでもよいです。
.htaccessを修正する
ここで、loginというディレクトリをこれから作ります。
そこにSencha Ext JSのコードを配置するからです。しかし、初期状態では、上記の設定で上手く動いてくれません。public_html/.htaccess を以下の様に修正します。
|
1 2 3 |
RewriteCond %{REQUEST_FILENAME} !-d ↓ #RewriteCond %{REQUEST_FILENAME} !-d |
基本的にFuelPHPは、存在しないファイル、存在しないディレクトリの場合処理が走りますが、loginという実在するディレクトリ（まだ作ってないですけど）があると処理が走りません。
上記のように、存在するディレクトリの場合も実行されるように1行コメントアウトします。
ユーザーディレクトリで動かす場合
ユーザーディレクトリで動作させる場合は、以下の様にRewriteBaseの書き換えを忘れないようにしてください。
|
1 |
RewriteBase /~codex/ |
コントローラーを修正する
fuel/app/classes/controller/welcome.php を次のように修正します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class Controller_Welcome extends Controller { public function action_index() { return Response::forge(View::forge('welcome/index')); } public function action_login() { return Response::forge(View::forge('welcome/login/index')); } public function action_404() { return Response::forge(Presenter::forge('welcome/404'), 404); } } |
action_loginメソッドを追加して、先ほど作成したindex.phpを表示するように追加します。 http://localhost/~codex/ にアクセスすると、fuel/app/views/welcome/index.phpが、http://localhost/~codex/login/にアクセスすると、fuel/app/views/welcome/login/index.phpが表示されるはずです。
Antの設定で自動的にビューを配置する
前回、ログインフォームを実際にSencha Ext JSで作成しました。その前に、FuelPHPの開発環境の設置をしました。まだ、Sencha Cmdのウェブサーバーで確認はできましたが、FuelPHP経由で作ったアプリケーションを表示していません。
ここでは、Sencha Cmdでビルドしたアプリケーションを自動的にFuelPHPのビューとして配置するための設定を行います。 front/loginと2つのページを作成しました、このbuild.xmlは、Sencha Cmdが内部で利用しているAntの設定です。ビルドを行った後、前などに任意の処理を設定することができます。
login用のbuild.xmlにビルド処理を追加する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
< ?xml version="1.0" encoding="utf-8"?> <project name="Login" default=".help"> <!-- The build-impl.xml file imported here contains the guts of the build process. It is a great idea to read that file to understand how the process works, but it is best to limit your changes to this file. --> <import file="${basedir}/.sencha/app/build-impl.xml"></import> <target name="-before-page"> <delete file="../../fuel/app/views/welcome/login/index.php"></delete> <delete dir="../../public_html/login/" verbose="true"></delete> <mkdir dir="../../public_html/login/"></mkdir> </target> <target name="-after-page"> <copy todir="../../public_html/login/" > <fileset dir="${workspace.build.dir}/${build.environment}/${app.name}/" includes="**"></fileset> </copy> <delete file="../../public_html/login/index.php"></delete> <copy file="${workspace.build.dir}/${build.environment}/${app.name}/index.php" todir="../../fuel/app/views/welcome/login/"></copy> </target> <!-- The following targets can be provided to inject logic before and/or after key steps of the build process: The "init-local" target is used to initialize properties that may be personalized for the local machine. <target name="-before-init-local"/> <target name="-after-init-local"></target> The "clean" target is used to clean build output from the build.dir. <target name="-before-clean"></target> <target name="-after-clean"></target> The general "init" target is used to initialize all other properties, including those provided by Sencha Cmd. <target name="-before-init"></target> <target name="-after-init"></target> The "page" target performs the call to Sencha Cmd to build the 'all-classes.js' file. <target name="-before-page"></target> <target name="-after-page"></target> The "build" target performs the call to Sencha Cmd to build the application. <target name="-before-build"></target> <target name="-after-build"></target> --> </project> |
-before-pageと-after-pageを設定したtargetタグを設置します。ここの書き方はAntの書き方に従います。
ページのビルドを開始する前に、ディレクトリとファイルを削除します。そして、ページのビルドが終わった後に、loginページのビルド後のソースをpublic_html下に配置します。
front用のbuild.xmlにビルド処理を追加する
front用にも同様に追加します。ちょっと処理が多くなっていますが、loginの場合は丸ごとディレクトリを消して配置できるのですが、FuelPHPのindex.phpが配置されているディレクトリになるので、ファイル個別に削除しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
< ?xml version="1.0" encoding="utf-8"?> <project name="Front" default=".help"> <!-- The build-impl.xml file imported here contains the guts of the build process. It is a great idea to read that file to understand how the process works, but it is best to limit your changes to this file. --> <import file="${basedir}/.sencha/app/build-impl.xml"></import> <target name="-before-build"> </target> <target name="-after-build"> <delete file="../../public_html/app.js"></delete> <delete file="../../public_html/app.json"></delete> <delete file="../../public_html/cache.appcache"></delete> <delete file="../../public_html/index.html"></delete> <delete file="../../public_html/${toolkit.name}.json"></delete> <delete dir="../../public_html/archive" verbose="true"></delete> <delete dir="../../public_html/${toolkit.name}" verbose="true"></delete> <delete dir="../../public_html/resources" verbose="true"></delete> <copy todir="../../public_html/archive/" > <fileset dir="${workspace.build.dir}/${build.environment}/${app.name}/archive/" includes="**"></fileset> </copy> <copy todir="../../public_html/${toolkit.name}/" > <fileset dir="${workspace.build.dir}/${build.environment}/${app.name}/${toolkit.name}/" includes="**"></fileset> </copy> <copy todir="../../public_html/resources/" > <fileset dir="${workspace.build.dir}/${build.environment}/${app.name}/resources/" includes="**"></fileset> </copy> <copy file="${workspace.build.dir}/${build.environment}/${app.name}/${toolkit.name}.json" todir="../../public_html/"></copy> <copy file="${workspace.build.dir}/${build.environment}/${app.name}/index.php" todir="../../fuel/app/views/welcome/"></copy> </target> <!-- The following targets can be provided to inject logic before and/or after key steps of the build process: The "init-local" target is used to initialize properties that may be personalized for the local machine. <target name="-before-init-local"/> <target name="-after-init-local"></target> The "clean" target is used to clean build output from the build.dir. <target name="-before-clean"></target> <target name="-after-clean"></target> The general "init" target is used to initialize all other properties, including those provided by Sencha Cmd. <target name="-before-init"></target> <target name="-after-init"></target> The "page" target performs the call to Sencha Cmd to build the 'all-classes.js' file. <target name="-before-page"></target> <target name="-after-page"></target> The "build" target performs the call to Sencha Cmd to build the application. <target name="-before-build"></target> <target name="-after-build"></target> --> </project> |
ビルドしてみる
front/login それぞれのディレクトリに移動して、以下のコマンドを実行します。
|
1 |
sencha app build |
ビルド後、localhost/~codex/とlocalhost/~codex/loginにアクセスしてみましょう。Sencha Ext JSで作成したアプリケーションが表示されます。
OrmAuthを導入する
ここで、FuelPHP の OrmAuthを導入します。OrmAuthってなに？ってなりますよね。ちょっと説明します。
FuelPHPで、ユーザーの認証処理を行うauthパッケージというのがあります、この中に、SimpleAuth（ファイルベースでユーザーを管理するもの）とOrmAuthというデータベースを利用したユーザー管理パッケージがあります。 ログイン処理のサーバーサイドは、このOrmAuthを使って行きます。
always_loadの設定
OrmAuthを使うために、まず、fuel/app/config/config.phpを編集します。
|
1 2 3 4 5 6 7 |
'always_load' => array( 'packages' => array( 'orm', 'auth' ), ... ) |
always_loadの項目は、初期状態でコメントアウトされていますので、コメントアウトを解除します。そして、‘auth’を追加します。
データベース接続設定
OrmAuthは、前述の通りデータベースを使います。FuelPHPのデータベースの設定を行いましょう。fuel/app/config/development/db.php に設定を記述します。
環境に合わせて書き換えてください。
|
1 2 3 4 5 6 7 8 9 10 |
return array( 'default' => array( 'connection' => array( 'dsn' => 'mysql:host=127.0.0.1;dbname=codex;charset=utf8;', 'username' => 'root', 'password' => '', 'charset' => 'utf8' ), ), ); |
今回は、development/db.phpのみ修正しましたが、FuelPHPには動作環境変数で、この設定を切り替える機能があります。開発環境の設定と本番環境の設定を記述しておいて切り替えることができるんですね、便利ですね。
|
1 |
php oil -v |
を、FuelPHPのプロジェクトディレクトリで実行することで、以下の様に動作モードを確認できます。
|
1 |
Fuel: 1.7.3 running in "development" mode |
authパッケージの設定ファイルを配置する
authパッケージの設定ファイルを配置します。
fuel/packages/auth/config/auth.php に有るファイルを、fuel/app/config/auth.phpとしてコピーします。
以下の様に、修正します。
|
1 2 3 4 5 6 |
return array( 'driver' => array('Ormauth'), 'verify_multiple_logins' => false, 'salt' => 'xxxxxxxxxxxxxxxxxxxxxxx', 'iterations' => 10000, ); |
put_your_salt_hereの部分は、ランダムな任意の文字列を設定してください。
マイグレーション
FuelPHPプロジェクトディレクトリに移動し、以下のコマンドを実行します。
|
1 |
oil r migrate --packages=auth |
OrmAuthを利用するために必要なデータベーステーブルを一括で作成してくれます。
初期データ挿入タスクを作る
FuelPHPには、CLIで実行するためのタスクという機能があります。このタスクを生成することが以下のコマンドでできます。
|
1 |
php oil generate task setuptables index |
fuel/app/tasks/setuptables.php が作成されています。
indexメソッドの内容を次のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
public function index($args = NULL) { echo "\n==========================================="; echo "\nRunning task [Setuptables:Index]"; echo "\n-------------------------------------------\n\n"; /*************************** Put in TASK DETAILS HERE **************************/ // 初期ユーザー定義 $init_users = array( // 管理画面ユーザー array('name' => 'codex', 'password' => '1234', 'group' => 6), ); // データベース接続 \DBUtil::set_connection(null); // {{{ トランケート $truncates = array( '', '_permissions', '_metadata', '_user_permissions', '_group_permissions', '_role_permissions' ); foreach ($truncates as $truncate) { \DBUtil::truncate_table('users' . $truncate); } // }}} // {{{ 初期ユーザー追加 foreach ($init_users as $init_user) { // ユーザー名 $key = $init_user['name']; // パスワード $password = $init_user['password']; // メールアドレス $email = $key . '@xenophy.com'; // グループ $group = $init_user['group']; // 追加 $user = \Auth\Model\Auth_User::forge()->find(\Auth::create_user($key, $password, $email, $group)); // 保存 $user->save(); } // }}} } |
FuelPHPプロジェクトディレクトリに移動し、以下のコマンドを実行します。
|
1 |
oil refine setuptables:index |
データベースを確認しましょう、codeというユーザーが作成されているはずです。
認証チェック処理を実装する
最後に、frontにアクセスしたときに、認証チェックをしてloginに飛ばす処理を記述します。
fuel/app/classes/welcome.phpを以下のように修正します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
class Controller_Welcome extends Controller { public function action_index() { if (!Auth::check()) { return Response::redirect('login/'); } return Response::forge(View::forge('welcome/index')); } public function action_login() { return Response::forge(View::forge('welcome/login/index')); } public function action_404() { return Response::forge(Presenter::forge('welcome/404'), 404); } } |
一発作成コマンド
いつものように、ここまでの流れを以下のコマンド一発で作成します。 データベースは、codexデータベースが作成済みで、root、パスなしの条件で実行してください。
|
1 |
curl https://raw.githubusercontent.com/xenophy/code-x/master/setup/ext601/loginform4.sh | sh -s codex |
おわりに
FuelPHPのOrmAuthを導入して、ログイン画面に飛ばすところまで実装しました。FuelPHPのルートや、OrmAuth、タスクなど1つずつ掘り下げるだけで、それなりの内容になるので、大分端折りましたが、みなさん手元で動作させることはできたでしょうか。
次回は、このOrmAuthとSencha Ext JSのログインフォームを連動して、認証処理の実装を行います。
