# UserFrostingによるユーザ登録システム
**URL:** https://forum.ficusonline.com/t/topic/340
**Category:** WEB Design
**Created:** [2019 年 12 月 7 日午後 12:00 UTC](https://forum.ficusonline.com/t/topic/340 "2019-12-07T12:00:47Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@tk-fuse](https://forum.ficusonline.com/u/tk-fuse)
#### Post date: [2019 年 12 月 7 日午後 12:00 UTC](https://forum.ficusonline.com/t/topic/340/1 "2019-12-07T12:00:47Z")
以前紹介した[Flexisip](https://www.linphone.org/technical-corner/flexisip)などのユーザ登録型アプリをサービス提供する場合、ユーザ登録用画面・登録ユーザ専用画面といったウェブフロントエンドもセットで用意する必要があります。巷に出回っているPHPによるユーザ管理用サンプルコードをベースにすれば簡易的な登録システムは構築できますが、パスワード管理、管理ユーザによるメール認証方式など商業レベルまでの機能を実現するとなると大幅な工数が必要になります。
今回Flexisipアプリのサインインシステムとして、他のアプリにも同サインインシステムを導入できることや、ユーザのグループ化・権限付与、パスワードの暗号化・リセット、メールによるユーザ認証、デザインのカスタマイズなど、商業レベルでの使用にも十分対応できるサインインシステムに特化したフレームワークである[UserFrosing](https://www.userfrosting.com/)を採用することにしました。
## **UserFrosting**
UserFrosting Github:[GitHub - userfrosting/UserFrosting: Modern PHP user login and management framework · GitHub](https://github.com/userfrosting/UserFrosting)
UserFrostingによるサインインシステムの主な特徴は以下の通りです。
- ユーザ登録・メールによる認証
- 登録ユーザのグループ化・権限付与
- パスワードリセット
- ユーザ登録情報の編集
- ユーザ登録用画面、ユーザ専用ダッシュボード、アプリ用メイン画面
- 日本語ローカライズ
- MVC(Model-View-Controller)デザインによるカスタマイズ・拡張性
- MITライセンスによるフリーオープンソース
[ドキュメント](https://learn.userfrosting.com/)にインストールからカスタマイズの方法まで良く纏められています。インストールしたデフォルトの状態から **Sprinkles** というフォルダにルールに則ったカスタマイズコードファイル郡を配置することで、内容を上書き・反映させることができます。
**管理ユーザ：ダッシュボード**
## **インストール環境**
**Dockerコンテナを使用しない場合**
Nginx,PHP-FPM, MariaDB, phpMyAdmin, Git, Composer, Node.js, npmの各レポジトリを直接インストールして下さい。
(Ubuntu,Debian:apt-get install コマンド)
**Dockerコンテナ（Composerイメージ）を利用する場合**
Nginx,PHP, MariaDB, phpMyAdmin公式Dockerイメージをインストール先PC環境に合わせてComposerファイル内で指定します。
Tags指定により好みのイメージを選択して下さい。
1. **Nginx: image: nginx:alpine**
2. **MariaDB: image: mariadb**
3. **PHP-FPM: image: php:7.2-fpm-alpine**
4. **phpMyAdmin: image: phpmyadmin/phpmyadmin:fpm-alpine**
**Docker-Composeサンプルファイル（Nginx+PHP-FPM+ｐｈｐMyAdmin）**
Docker-Composeファイルが用意されていますが、これを参考にNGINX,PHP-FPMコンテナのイメージファイルを選定しました。
> **[UserFrosting/docker at master · userfrosting/UserFrosting](https://github.com/userfrosting/UserFrosting/tree/master/docker)**
>
> Modern PHP user login and management framework. Contribute to userfrosting/UserFrosting development by creating an account on GitHub.
以下、Nginx-ProxyとLet’sEncryptによるSSL接続に対応させるための設定です。
Nginx-Proxy+Let’sEncryptによるコンテナ稼働についてはフォーラム記事を参照願います。
> [@SIPサーバFlexisipのTLS接続（Docker+Nginx+Let's Encrypt）](https://forum.ficusonline.com/t/topic/317/3):
>
> コンテナへの特権付与:cap\_add, privileged version: '3' services: flexisip-mariadb: container\_name: flexisip-mariadb image: mariadb restart: always ... ... ubuntu-flexisip: container\_name: u…
> [@Dockerコンテナ(NGINX+MariaDB+PHP-FPM+phpMyAdmin)によるサイト構築](https://forum.ficusonline.com/t/topic/337/3):
>
> Mixed Content Error NGINX+FastCGI（共にDockerコンテナ）によるサイトの表示エラー。 HTTPSページ読み込み時のエラーで、ページを構築するために必要なCSS,JS等の関連ファイルをHTTPで読み込もうとするために生じるエラー。 Mixed Content: The page at '\' was loaded over HTTPS, but req…
```auto
version: '3'
services:
mariadb:
container_name: mariadb
image: mariadb
restart: always
volumes:
- ./db:/var/lib/mysql
environment:
- MYSQL_ROOT_PASSWORD=root_passowrd
- MYSQL_DATABASE=your_database
- MYSQL_USER=your_user
- MYSQL_PASSWORD=user_password
networks:
proxy-tier:
ipv4_address: 172.18.0.4
# nginx, additional install $ docker exec nginx apk add bash nano
nginx:
container_name: nginx
image: nginx:alpine
tty: true
environment:
- VIRTUAL_HOST=test-site.com
- VIRTUAL_ROOT=/var/www/html
- VIRTUAL_PORT=80
# - VIRTUAL_PROTO=fastcgi
- LETSENCRYPT_HOST=test-site.com
- LETSENCRYPT_EMAIL=your_id@gmail.com
volumes:
# shared nginx default.conf between host and container
- ./nginx_default.conf:/etc/nginx/conf.d/default.conf
# shared the directory /var/www/html in php-fpm container
- ./html:/var/www/html/register
# shared the directory /var/www/html in phpmysql-fpm container
- ./phpmyadmin_data:/var/www/html/phpmyadmin
restart: always
networks:
proxy-tier:
ipv4_address: 172.18.0.6
# php-fpm, additional install $ docker exec php-fpm apk add bash nano
# php extension mysqli should be installed, $ docker exec php-fpm docker-php-ext-install mysqli
php-fpm:
container_name: php-fpm
image: php:7.2-fpm-alpine
tty: true
expose:
- "9000"
volumes:
- ./html:/var/www/html/register
depends_on:
- mariadb
restart: always
networks:
proxy-tier:
ipv4_address: 172.18.0.7
# phpmyadmin-fpm, additional install $ docker exec phpmyadmin-fpm apk add bash nano
# php extension mysqli should be installed, $ docker exec phpmyadmin-fpm docker-php-ext-install mysqli
phpmyadmin:
container_name: phpmyadmin-fpm
image: phpmyadmin/phpmyadmin:fpm-alpine
tty: true
expose:
- "9000"
environment:
- PMA_HOST=mariadb
- PMA_PORT=3306
- PMA_ABSOLUTE_URI=http://localhost/phpmyadmin
volumes:
- ./phpmyadmin_data:/var/www/html
- /sessions
depends_on:
- mariadb
restart: always
networks:
proxy-tier:
ipv4_address: 172.18.0.8
networks:
proxy-tier:
external:
name: nginx-proxy
volumes:
shared:
external: true
```
上記docker-composeファイルにより各コンテナを起動します。
```auto
$ docker-compose up -d
```
上記項目3.PHP-FPMの追加レポジトリ: composer, node.js, npm, nano, bash（Alpine-Linux:apk add コマンド）をインストールします。
```auto
$ docker exec php-fpm apk add composer nodejs npm nano bash
```
php-fpmコンテナ内にbashコマンドで移動し、Userfrostingに必要な以下パッケージとphp機能拡張モジュールをインストールします。
```auto
$ docker exec -ti php-fpm bash
# apk add libpng-dev freetype-dev libjpeg-turbo-dev zip
# docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/
# docker-php-ext-install -j$(nproc) gd
# docker-php-ext-install -j$(nproc) pdo pdo_mysql
# docker-php-ext-install -j$(nproc) zip
```
php-fpmコンテナから出て再起動。
```auto
# exit
$ docker container restart php-fpm
```
## **UserFrostingのダウンロード・コピー**
コンテナ外の環境でgit cloneコマンドによりUserFrostingソースコードをダウンロードします。
（PHP-FPMコンテナ内にgitをインストールしてダウンロードしても構いません）
```auto
$ git clone https://github.com/userfrosting/UserFrosting.git userfrosting
```
PHP-FPMコンテナ内の/var/www/htmlディレクトリにUserFrostingフォルダの中身をコピーします。
```auto
$ docker cp userfrosting/. php-fpm:/var/www/html
```
PHP-FPMコンテナ内の/var/www/htmlディレクトリ内でcomposerコマンドによりPHP関連ライブラリ・サードパーティPHPフレームワークなどをダウンロードします。
```auto
$ docker exec php-fpm composer install
```
またはPHP-FPMのコンテナ内にbashコマンドで入り、現ディレクトリを確認後composerコマンドを実行します。
```auto
$ docker exec -it php-fpm bash
# pwd
/var/www/html
# composer install
```
## **NGINXコンテナの設定**
PHP-FPM, phpMyAdminコンテナに対応したNGINXの設定をします。Nginx-proxyとLet’sencryptコンテナを事前に稼働させている条件（SSL接続）での設定となります。
```auto
$ docker exec nginx apk add nano
$ docker exec nginx nano /etc/nginx/conf.d/default.conf
```
**/etc/nginx/conf.d/default.conf**
```auto
resolver 127.0.0.11 valid=15s;
server {
listen 80;
root /var/www/html;
server_name "";
location / {
add_header X-Frame-Options SAMEORIGIN;
add_header X-Content-Type-Options nosniff;
root /var/www/html/public;
index index.php;
try_files $uri /index.php?$query_string;
location = /index.php {
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_keep_conn on;
fastcgi_param HTTPS 'on';
fastcgi_pass php-fpm:9000;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}
location ~* \.(png|gif|jpg|jpeg|ico|css|js|woff|ttf|otf|woff2|eot)$ {
include /etc/nginx/mime.types;
expires max;
try_files $uri /index.php?$query_string;
}
client_max_body_size 100M;
}
# subdirectory for phpmyadmin pages
location ^~ /phpmyadmin {
alias /var/www/html/phpmyadmin;
try_files $uri $uri/ @phpmyadmin;
location ~ \.php$ {
fastcgi_split_path_info ^\/phpmyadmin\/(.+\.php)(.*)$;
fastcgi_param HTTPS 'on';
fastcgi_pass phpmyadmin-fpm:9000;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $fastcgi_script_name;
}
}
location @phpmyadmin {
rewrite /phpmyadmin/(.*)$ /phpmyadmin/index.php?/$1 last;
}
}
```
設定をリロードします。
```auto
$ docker exec nginx nginx -s reload
```
## **ｐｈｐMyAdminによるデータベース作成**
MariaDBのユーザとパスワードはcomposerファイルの中で設定済なので、以下アドレスでMariaDBデータベースにアクセスします。
[https://test-site.com/phpmyadmin](https://test-site.com/phpmyadmin)
アプリ専用のデータベースtest-database（名称は任意）を作成します。
## **Bakery CLIによるインストール**
PHP-FPMコンテナ内にbashコマンドで入り、以下のコマンドを実行してUserFrostingをインストールします。上記で設定したMariaDBデータベース、ユーザ名、パスワードなどを入力します。
```auto
$ docker exec -it php-fpm bash
```
メールによるユーザ認証などにSMTPサーバへのアクセスが必要になるため、事前にSMTPサーバ用ユーザ名とパスワードをメモしておいて下さい。
```auto
# php bakery bake
_ _ ______ _ _
| | | | | ___| | | (_)
| | | | ______ _ __| |_ ___ ______ | |_ _ _ ____ _
| | | / __|/ _ \ '__ | _| ' __/ _ \/__ | __| | '_ \ / _` |
| |_| \ __\__ / | | | | | | (_) \__ \ |_| | | | | (_| |
\ ___/|___ /\ ___|_| \_| |_| \___ /| ___/\__ |_|_| |_|\__, |
__/ |
|___/
UserFrosting's Database Setup Wizard
====================================
! [NOTE] Database credentials will be saved in `/var/www/html/app/.env`
[0] MySQL / MariaDB
[1] ProgreSQL
[2] SQL Server
[3] SQLite
> 0
Hostname [localhost]:
> mariadb
Port [3306]:
>
Database name [userfrosting]:
> test-database
Username [userfrosting]:
> your_user
Password:
>
[OK] Database connection successful
Saving data
-----------
[OK] Database config successfully saved in `/var/www/html/app/.env`
UserFrosting's SMTP Setup Wizard
================================
! [NOTE] SMTP credentials will be saved in `/var/www/html/app/.env`
In order to send registration emails, UserFrosting requires an outgoing mail server.
Select setup method [SMTP Server]:
[0] SMTP Server
[1] Gmail
[2] No email support
> 1
Your full Gmail (e.g. example@gmail.com):
> your_address@gmail.com
Your Gmail password:
>
Saving data
-----------
[OK] SMTP credentials saved to `/var/www/html/app/.env`
UserFrosting
============
UserFrosing version : 4.3.3
OS Name : Linux
Project Root : /var/www/html
Environment mode :
PHP Version : 7.2.24
Node Version : v10.16.3
NPM Version : 6.9.0
```
## **動作確認**
以下設定したアドレスにアクセスして動作を確認して下さい。アプリ用のデフォルト画面が表示されます。画面右上 **“Sign In”** をクリックするとログイン画面が表示されます。上記インストール時に設定した管理ユーザ名とパスワードでログインして下さい。
以下メイン画面上の **“UserFrosting”** という表記や内容はデフォルトのものであり、各々のアプリに合わせてカスタマイズします。
メイン画面のカスタマイズ、ユーザテーブルデータの拡張方法などについては次回のブログ・フォーラムでフォローする予定です。
`https://test-site.com/`
**UserFrostingアプリ用メイン画面**
* * *
**ユーザ登録画面**
* * *
**ユーザログイン画面**
* * *
**ユーザアカウント設定画面**
* * *
**登録ユーザ管理画面**
---
### Author:  [@tk-fuse](https://forum.ficusonline.com/u/tk-fuse)
#### Post date: [2020 年 1 月 18 日午後 3:32 UTC](https://forum.ficusonline.com/t/topic/340/2 "2020-01-18T15:32:19Z")
### php extension エラー
php-fpmコンテナを再構築後に上記不具合発生。php機能拡張モジュールが正しくインストールされていないことによる。
**Userfrostingをphp-fpmコンテナ内で稼働させる場合、以下のapkパッケージ、php機能拡張が必要です。（上記のインストールプロセスでの記入漏れです。すみません。）**
[https://github.com/userfrosting/UserFrosting/blob/master/docker/php/Dockerfile](https://github.com/userfrosting/UserFrosting/blob/master/docker/php/Dockerfile)
コンテナ内にbashコマンドで移動
```auto
$ docker exec -ti php-fpm bash
```
以下パッケージとphp機能拡張モジュールをインストール
```auto
# apk add libpng-dev freetype-dev libjpeg-turbo-dev zip
# docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/
# docker-php-ext-install -j$(nproc) gd
# docker-php-ext-install -j$(nproc) pdo pdo_mysql
# docker-php-ext-install -j$(nproc) zip
```
php-gd機能拡張モジュールを確認する場合（他のモジュールを確認する場合はgdをpdo,pdo\_mysql,zipに置換え）
```auto
# php -i | grep -i gd
Additional .ini files parsed => /usr/local/etc/php/conf.d/docker-php-ext-gd.ini,
gd
GD Support => enabled
GD Version => bundled (2.1.0 compatible)
gd.jpeg_ignore_warning => 1 => 1
```
コンテナから出ます
```auto
# exit
```
コンテナの再起動
```auto
$ docker container restart php-fpm
```
```auto
```
---
### Author:  [@tk-fuse](https://forum.ficusonline.com/u/tk-fuse)
#### Post date: [2020 年 2 月 3 日午前 7:41 UTC](https://forum.ficusonline.com/t/topic/340/3 "2020-02-03T07:41:26Z")
### 補足：SMTPサーバ設定・変更
**.env** または **app/sprinkles/core/config/default.php** に設定内容を直接記述することで、SMTPの設定・変更ができます。
> **[UserFrosting Documentation | The Mailer Service](https://learn.userfrosting.com/mail/the-mailer-service)**
>
> UserFrosting's mailer service integrates smoothly with Twig to create dynamically generated messages. Templated messages can be sent to large groups of recipients, customizing the content for each recipient.
**default.php**
```auto
/*
* ----------------------------------------------------------------------
* Mail Service Config
* ----------------------------------------------------------------------
* See https://learn.userfrosting.com/mail/the-mailer-service
*/
'mail' => [
'mailer' => 'smtp', // Set to one of 'smtp', 'mail', 'qmail', 'sendmail'
'host' => getenv('SMTP_HOST') ?: null,
'port' => 587,
'auth' => true,
'secure' => 'tls', // Enable TLS encryption. Set to `tls`, `ssl` or `false` (to disabled)
'username' => getenv('SMTP_USER') ?: null,
'password' => getenv('SMTP_PASSWORD') ?: null,
'smtp_debug' => 4,
'message_options' => [
'CharSet' => 'UTF-8',
'isHtml' => true,
'Timeout' => 15,
],
],
```
メモ：Elastic Emailは5000件/日の送信が可能なフリーのメールサービス
> **[Elastic Email](https://elasticemail.com/account#/create-account)**
>
> Elastic Email Dashboard.