投稿者: sumito.tsukada

  • Firebase AuthenticationにFacebook Accountでログインする

    Firebase AuthenticationにFacebook Accountでログインする

    はじめに

    Firebase AuthenticationにFacebook Accountでログインを有効にさせる方法をまとめます。

    設定

    Facebook for Developers(以下Facebook)にログインして、アカウントのセットアップをします

    https://developers.facebook.com/?locale=ja_JP

     

    Firebaseのログインプロバイダの画面で「Facebookログイン」を有効にします。

    Facebook側のページに戻り、左側の設定のからベーシックを押し、アプリID/app secretを確認します。

    Firebase側に戻り、それぞれ埋めます。

    Facebookでクイックスタートからウェブを選択します。

    WebアプリケーションのURLを入力。

    Firebaseの画面に表示されているOAuth リダイレクト URI を Facebook アプリの設定に追加します。

    以上で設定は完了です。

    Signin

    自作のアプリケーションからSigninします

    Facebookログインを試みると、

    よく見るFacebookの承認画面が表示され、ログインを押すと、無事アプリケーションにログインできるようになりました。

    注意すべきところ

    接続元の環境がhttp

    ローカルで開発しているので、http://localhost/ で確認していたのですが、httpでFacebookログインを試みると

    Facebook側で以下のようなアラートが出て、invalid_request

    無視して進めたところ認証エラーが。

    Error getting verification code from facebook.com response: error=invalid_request&error_code=191&error_description

    というエラーが表示されるようになりました。

    その対策としてFirebase Hostingへdeployして、httpsで接続できるようにした上でFacebookとの接続をするようにしました。

    メールアドレスの重複

    既に他のソーシャルアカウントでログインした後に、Facebookアカウントでログインを試みるとエラーが。。

    An account already exists with the same email address but different sign-in credentialsSign in using a provider associated with this email address

    どうやらFirebaseのデフォルトの動きとしてソーシャルアカウントに登録したメールアドレスが、他のソーシャルアカウントで使っている場合、「既に登録してある」と見なされアカウント作成できないようです。

    もちろんFirebaseで承認したアカウントを削除することで、Facebookアカウントでログインできるようになりました。

     

    しかし、やはりユーザーによっては複数ソーシャルアカウントが同一メールアドレスで登録している人も少なくありません。

    設定変更画面から複数メールアドレスの登録を許可させることができます。

    デフォルトでは上段が選択されていますが、下の「複数のアカウントを作成できるようにする」を選択します。

    Google認証に加え、Facebookアカウントでもログインできるようになりました。
    登録アカウントは以下の通り。

    Firebaseはシンプルな認証機能を提供してくれるので、これからアプリケーションを作っていくという場合は最適な選択肢になるのではないでしょうか。

     

     

  • firebase authenticationでユーザーのimport/exportについて調べた

    firebase authenticationでユーザーのimport/exportについて調べた

    はじめに

    Firebase Authentication は、firebase での認証処理を行うための機能です。
    ID/PWによるパスワード認証、電話番号認証、Google、Facebook、Twitterなどソーシャルアカウントを使用した認証を行うことができます。

    本記事はfirebase authenticationでユーザーのimport/exportについて調べました。

    firebase authenticationの責務について

    責務としては認証までです。
    認可については本機能のスコープ外になります。

    詳細は以下参考

    https://apps-gcp.com/firebase-authentication/

     

    コンソール画面での見え方について

    コンソール画面にcsv/json形式でimportする機能があっても良さそうですが、残念ながらそのボタンは見当たりません。

    青い「ユーザーを追加」ボタンを押しても、メールアドレスとパスワードを入力する画面が表示されるのみです。

    対応

    firebase cliを使うことで、具体的には “` firebase auth:import “` コマンドを使うことでimportが可能ということが分かりました。

    https://firebase.google.com/docs/cli/auth-import#syntax

    firebase cliのinstall方法はこちら

    https://firebase.google.com/docs/cli?hl=ja

    jsonファイルを作成する

    試しにtwitter認証アカウントを2つ、Google認証というアカウントを1つ。合計3ユーザーを作成することにします。

    {
      "users": [
        {
          "localId": "1",
          "email": "ec@sumito.jp",
          "emailVerified": null,
          "passwordHash": null,
          "salt": null,
          "displayName": "test1",
          "photoUrl": null,
          "providerUserInfo": [
            {
              "providerId": "twitter.com",
              "rawId": "xxxxxxxxxxxx",
              "email":  null,
              "displayName": "test1",
              "photoUrl": null
            }
          ]
        },
        {
          "localId": "2",
          "email": "sute@sumito.jp",
          "emailVerified": null,
          "passwordHash": null,
          "salt": null,
          "displayName": "test2",
          "photoUrl": null,
          "providerUserInfo": [
            {
              "providerId": "twitter.com",
              "rawId": "xxxxxxxxxxxx",
              "email":  null,
              "displayName": "test2",
              "photoUrl": null
            }
          ]
        },
        {
          "localId": "3",
          "email": "mitsuisumito.viva@gmail.com",
          "emailVerified": true,
          "displayName": "sumito tsukada",
          "photoUrl": "https://lh3.googleusercontent.com/a-/xxx,
          "providerUserInfo": [
            {
              "providerId": "google.com",
              "rawId": "1234",
              "email": "mitsuisumito.viva@gmail.com",
              "displayName": "sumito tsukada",
              "photoUrl": "https://lh3.googleusercontent.com/a-/xxx"
            }
          ]
        }
      ]
    }

     今回はuser.jsonという名前で保存し、読み込ませます。

    $ firebase auth:import ./user.json --hash-algo=HMAC_SHA256  --hash-key=hogehoge
    Processing ./user.json (1451 bytes)
    Starting importing 3 account(s).
    ✔  Imported successfully.
    

    今回はハッシュアルゴリズムをHMAC_SHA256にしましたが、適宜変更してください。

    firebase authentication上でimport確認

    無事importされたようです。

    ちなみに、デフォルトでFirebase authenticationを使いアカウント作成すると、ユーザーUIDはランダム数字になりますが、import形式では任意のIDを指定することができるようです。

    動作確認

    自作のアプリケーションのログイン画面からログインを試みます。

    無事ログインできたようです。

    無事ログイン日時も記載されました

    export

    firebase authenticationに登録されたユーザーは“` firebase auth:export “` コマンドでexportすることができます

    $ firebase auth:export hogehoge --format=json
    Exporting accounts to hogehoge
    ✔  Exported 3 account(s) successfully.

    所感

    firebase authenticationを使えば既存システムからの移行も現実的に見えるかもしれません。
    とはいえ、まだまだ調査すべきところは山のようにあるので、一つ一つ調べていこうと思います。

     

     

  • laravelのシンプルな機能でデータベースから値を取得し画面に表示する

    laravelのシンプルな機能でデータベースから値を取得し画面に表示する

    はじめに

    laravelのrouterとModelのみのシンプルな機能でデータベースから値を取得し画面に表示する。

    modelとmigrationを追加

    -mオプションでmigrationファイルも一緒に作ってくれるようになる。

    php artisan make:model Photo -m

    成功したようだ。

    migrationディレクトリ配下にmigrationファイルも一緒に作られた。

    注意したいのが、“` Photo “` という名前で作ったのに、migrationファイルの中では複数形の “`  photos “` になっているという点だ。

    今回、path,imageable_id,imageable_typeというカラムを追加した。

        public function up()
        {
            Schema::create('photos', function (Blueprint $table) {
                $table->increments('id');
                $table->string('path');
                $table->integer('imageable_id');
                $table->string('imageable_type');
                $table->timestamps();
            });
        }

    migration を実施

    $ php artisan migrate
    Migration table created successfully.
    Migrating: 2014_10_12_000000_create_users_table
    Migrated:  2014_10_12_000000_create_users_table
    Migrating: 2014_10_12_100000_create_password_resets_table
    Migrated:  2014_10_12_100000_create_password_resets_table
    Migrating: 2019_12_03_153039_create_photos_table
    Migrated:  2019_12_03_153039_create_photos_table

    成功したようだ

    データを投入する

    MySQL workbenchを用いてデータを投入する

    今回は上記データを入れた。

    Modelを編集する

    appディレクトリ配下にphp artisanコマンドで生成されたModelは格納される。
     
    <?php
    
    namespace App;
    
    use Illuminate\Database\Eloquent\Model;
    
    class Photo extends Model
    {
        //
        public function imageable(){
            return $this->morphTo('App\Photo');
        }
    }
    

    Photoテーブルを参照することとする。

    Routerを編集する

    Laravel 5.5では、routesディレクトリ配下の“` web.php “`がrouterの役割を担っている。

    以下の通り修正する

    <?php
    
    use App\Photo;
    
    Route::get('user/photos', function(){
        $user = Photo::find(1);
        return $user->path;
    });
    

    結果

    無事データベースの中の値の取得に成功した

     

     

     

  • laravelのmigration(migrate)を使いテーブルを全て削除する

    laravelのmigration(migrate)を使いテーブルを全て削除する

    はじめに

    なかなか実作業では使わないコマンドだが、ローカルで環境構築中だったら割とよく使いそうなコマンド。

    migrationで作ったテーブルを全て消す。

    前提条件

    例えば、以下の様なマイグレーションファイルがあって、全てRUNしている状態だとする。

    “` php artisan migrate:status “`の結果は以下の通り

    MySQL workbenchで確認すると、確かにテーブルは存在している。

    削除

    問題なくテーブルは作成されている様なので、全テーブル削除する

    php artisan migrate:reset

    結果は以下の通り

    ぞろぞろとRoll backされている。

    ステータスを確認すると、以下の通りRUNはNの状態。

    php artisan migrate:status

    MySQL workbenchでも削除されたことを確認できた

     

    laravel の実践向け書籍

  • laravelのmigration(migrate)を使いcreate table

    laravelのmigration(migrate)を使いcreate table

    はじめに

    laravelのmigration機能を使ってcreate tableを行う。

     デフォルトの設定

    laravelのmigrationファイルは以下の通り

    “` database/migrations “` 配下にファイルが存在している。

    database/migrations/
    合計 12
    -rw-rw-r--. 1 coco nginx 746 11月 26 04:18 2014_10_12_000000_create_users_table.php
    -rw-rw-r--. 1 coco nginx 683 11月 26 04:18 2014_10_12_100000_create_password_resets_table.php

    テーブルを追加する

    migrationファイルの追加

    php artisan make:migration create_hogehoge_table --create="hoge"

    hogehogeというファイル名のintegration fileが作成され、hogeテーブル作成のphpファイルが作成される。

    カラムを追加する

    viで追加したいカラムを追加する

    laravelで使うことができるメソッドは以下の公式ドキュメントに書いてある

    https://laravel.com/docs/5.8/migrations

    例えば、stringであればvarcharに置き換えられる

    動作確認

    migrate前にテーブルを確認する

    mysql> show tables;
    +-------------------+
    | Tables_in_laravel |
    +-------------------+
    | migrations        |
    | password_resets   |
    | users             |
    +-------------------+
    3 rows in set (0.00 sec)

    デフォルトのusersテーブルと、残り2つはmigrationを実施する際に作成されるテーブル

    migrateを実施する

    php artisan migrate

    問題なければ以下のようにテーブルが新規でhogeテーブルが作成される

    mysql> show tables;
    +-------------------+
    | Tables_in_laravel |
    +-------------------+
    | hoge              |
    | migrations        |
    | password_resets   |
    | users             |
    +-------------------+
    4 rows in set (0.00 sec)
    
    mysql> 
    

     状況確認

    migrationの状況を確認するには “` migrate:status “` を実行する。

    [coco@instance-2 cms]$ php artisan migrate:status 
    +------+------------------------------------------------+
    | Ran? | Migration                                      |
    +------+------------------------------------------------+
    | Y    | 2014_10_12_000000_create_users_table           |
    | Y    | 2014_10_12_100000_create_password_resets_table |
    | Y    | 2019_11_28_161446_create_hogehoge_table        |
    +------+------------------------------------------------+
    [coco@instance-2 cms]$ 

    RunがYの場合は、migrationが完了しているものになる。

  • ERROR 1820 (HY000): You must reset your password using ALTER USER statement before executing this statement.

    ERROR 1820 (HY000): You must reset your password using ALTER USER statement before executing this statement.

    はじめに

    パスワードを更新を促されるメッセージ。パスワードポリシーに則った形で変更するパスワードを必要がある。

    パスワード変更方法

    set password for root@localhost=password('hogeHoge@Hog123');

    結果以下の通りなれば成功

    mysql> set password for root@localhost=password('hogeHoge@Hog123');
    Query OK, 0 rows affected, 1 warning (0.05 sec)
    

    参考情報

    https://qiita.com/RyochanUedasan/items/9a49309019475536d22a

     

  • laravelでControllerを自動作成する

    laravelでControllerを自動作成する

    はじめに

     laravelでは“`php artisan“` コマンドを使って、Controllerを自動生成することができる

    通常の生成

    php artisan make:controller PostsController

    Controller created successfully.

    と表示されれば、app/Http/Controllers ディレクトリに作られる。

    上記コマンドの場合は以下のファイルになる。

    app/Http/Controllers/PostsController.php

    中身はこのような感じ。

    <?php
    
    namespace App\Http\Controllers;
    
    use Illuminate\Http\Request;
    
    class PostsController extends Controller
    {
        //
    }
    

    プレーンで何もない。

    resourceオプションを付けた生成

    php artisan make:controller --resource PostsController2

    必要なfunctionも含めて作られる。

    <?php
    
    namespace App\Http\Controllers;
    
    use Illuminate\Http\Request;
    
    class PostsController2 extends Controller
    {
        /**
         * Display a listing of the resource.
         *
         * @return \Illuminate\Http\Response
         */
        public function index()
        {
            //
        }
    
        /**
         * Show the form for creating a new resource.
         *
         * @return \Illuminate\Http\Response
         */
        public function create()
        {
            //
        }
    
        /**
         * Store a newly created resource in storage.
         *
         * @param  \Illuminate\Http\Request  $request
         * @return \Illuminate\Http\Response
         */
        public function store(Request $request)
        {
            //
        }
    
        /**
         * Display the specified resource.
         *
         * @param  int  $id
         * @return \Illuminate\Http\Response
         */
        public function show($id)
        {
            //
        }
    
        /**
         * Show the form for editing the specified resource.
         *
         * @param  int  $id
         * @return \Illuminate\Http\Response
         */
        public function edit($id)
        {
            //
        }
    
        /**
         * Update the specified resource in storage.
         *
         * @param  \Illuminate\Http\Request  $request
         * @param  int  $id
         * @return \Illuminate\Http\Response
         */
        public function update(Request $request, $id)
        {
            //
        }
    
        /**
         * Remove the specified resource from storage.
         *
         * @param  int  $id
         * @return \Illuminate\Http\Response
         */
        public function destroy($id)
        {
            //
        }
    }
    

    resourceオプションを付け、不要なものは削除していくという使い方でも良いかも。

  • laravelでrouteの一覧を表示する

    laravelでrouteの一覧を表示する

    はじめに

    Laravelでルーティングを全て表示する方法を紹介します。

    ルーティング設定の方法

    Laravelでは、有効なメソッドとURLを表示するために、以下のphp artisan route:listコマンドを利用します。

    php artisan route:list
    このコマンドを実行すると、以下のようなルーティング一覧が表示されます。
    +--------+----------+--------------+------+--------------------------------------------+--------------+
    | Domain | Method   | URI          | Name | Action                                     | Middleware   |
    +--------+----------+--------------+------+--------------------------------------------+--------------+
    |        | GET|HEAD | /            |      | App\Http\Controllers\PostsController@index | web          |
    |        | GET|HEAD | api/user     |      | Closure                                    | api,auth:api |
    |        | GET|HEAD | posts/back   |      | App\Http\Controllers\PostsController@back  | web          |
    |        | GET|HEAD | posts/{post} |      | App\Http\Controllers\PostsController@show  | web          |
    +--------+----------+--------------+------+--------------------------------------------+--------------+

    ルーティング設定の方法

    <?php
    Route::get('/', 'PostsController@index');
    // 数字のみを受け付けるルート設定
    Route::get('/posts/{post}', 'PostsController@show')->where('post','[0-9]+');
    // 記事のタイトルを受け付けるルート設定
    Route::get('/posts/{slug}', 'Posts

    laravel の実践向け書籍

  • mmap() failed: [12] Cannot allocate memory

    mmap() failed: [12] Cannot allocate memory

    はじめに

    laravelをinstall時、memoryが不十分だとinstallでエラーになる。

    twitterで投稿したところ、アドバイスもらった。確かにswapの設定してなかった。。

    クラウドであれば一時的にインスタンスタイプを変更することでインストールできるが、今回はインスタンスタイプを変更せず対応する。

    swapを設定する

    実は、GCPやAWSの場合、デフォルトでswapの設定がされていない。

    # free
                  total        used        free      shared  buff/cache   available
    Mem:         601172      383328       48068       14160      169776      107824

    手動でswapを設定する

    cat /proc/swaps
    dd if=/dev/zero of=/swapfile bs=1M count=2048
    chmod 600 /swapfile
    mkswap /swapfile
    swapon /swapfile
    free -m

    再起動しても設定されるよう、fstabに設定を追加する

    /swapfile   swap        swap    defaults        0   0

    作業後

    無事swapが追加された

    free -m
                  total        used        free      shared  buff/cache   available
    Mem:            587         375          43          13         167         103
    Swap:          2047           0        2047

    @kondonator さん、ありがとうございます🙏

     

  • CentOS7にlaravel install(nginx,php-fpm)

    CentOS7にlaravel install(nginx,php-fpm)

    はじめに

    PHP でcomposerをinstallしようとした際に使った手順まとめ

    オフィシャルサイトに書いてあったコマンドをそのまんまコピペでinstallすることができる。

    https://getcomposer.org/download/

    今回はnginx, php-fpmで動作する環境を作る。

    nginx install

    yum install nginx -y
    

    設定ファイル修正

    cd /etc/nginx/conf.d
    cp -p default.conf default.conf.org
    vi default.conf
    server {
      listen 80;
      server_name localhost;
      root /usr/share/nginx/html/;
      index index.php index.html index.htm;
    
      location / {
        try_files $uri $uri/ /index.php?$query_string;
      }
    
      location ~ \.php$ {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/var/run/php-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
        include fastcgi_params;
      }
    }

    /etc/nginx/nginx.conf に/etc/nginx/conf.d/default.conf をincludeする設定をするのを忘れずに。

    自分はすっかり忘れて無駄な時間を費やしました。

    上記設定が終わったら再起動する

    systemctl restart nginx

    php-fpmなどをinstall

    yum -y --enablerepo=remi-php72,epel install php-fpm php-gd php-gmp php-mbstring php-mcrypt php-opcache php-pdo php-pear-MDB2-Driver-mysqli php-pecl-memcached php-pecl-msgpack php-xml php-devel php-gd

    php-fpmの設定ファイルを修正

    cd /etc/php-fpm.d/
    cp -p www.conf www.conf.org
    vi www.conf
    [www]
    listen.allowed_clients = 127.0.0.1
    user = nginx
    group = nginx
    listen = /var/run/php-fpm.sock
    listen.owner = nginx
    listen.group = nginx
    pm = dynamic
    pm.max_children = 50
    pm.start_servers = 5
    pm.min_spare_servers = 5
    pm.max_spare_servers = 35
    slowlog = /var/log/php-fpm/www-slow.log
    php_admin_value[error_log] = /var/log/php-fpm/www-error.log
    php_admin_flag[log_errors] = on
    php_value[session.save_handler] = files
    php_value[session.save_path] = /var/lib/php/session
    [www]
    listen.allowed_clients = 127.0.0.1
    user = nginx
    group = nginx
    listen = /var/run/php-fpm.sock
    listen.owner = nginx
    listen.group = nginx
    pm = dynamic
    pm.max_children = 50
    pm.start_servers = 5
    pm.min_spare_servers = 5
    pm.max_spare_servers = 35
    slowlog = /var/log/php-fpm/www-slow.log
    php_admin_value[error_log] = /var/log/php-fpm/www-error.log
    php_admin_flag[log_errors] = on
    php_value[session.save_handler] = files
    php_value[session.save_path] = /var/lib/php/session
    systemctl restart php-fpm

    Composerのinstallコマンド

    php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
    php -r "if (hash_file('sha384', 'composer-setup.php') === 'a5c698ffe4b8e849a443b120cd5ba38043260d5c4023dbf93e1558871f1f07f58274fc6f4c93bcfd858c6bd0775cd8d1') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
    php composer-setup.php
    sudo mv composer.phar /usr/local/bin/composer
    php -r "unlink('composer-setup.php');"

    環境変数追加

    公式ドキュメントにあるように

    https://laravel.com/docs/6.x

    環境変数のPATHにcomposerのbinを追加する必要がある。

    export PATH="~/.composer/vender/bin:$PATH";

    最新版のinstall

    composer create-project --prefer-dist laravel/laravel cms

    version指定したinstall。現在、

    v5.5.28がinstall される。

    composer create-project --prefer-dist laravel/laravel cms "5.5.*"

     

    権限変更

    sudo chown -R nginx:nginx cms/storage
    sudo chmod -R 775 cms/storage
    sudo chown `whoami` /usr/share/nginx/html/cms/storage/logs

    selinuxを無効化

    sudo setenforce 0

     

    確認

    installに成功すると、以下のような画面が表示する

    http://{GLOBAL IP}/cms/public/index.php