Ionic3とFirebaseでTodoアプリ（４）パスワード制限つきVersion2その2（ソースコード一部あり）

2018年7月15日

前回は、上記の本に記載されているTodoアプリを写経して、localStorage、すなわち、各々のブラウザにデータの永続化を行った。

http://twosquirrel.mints.ne.jp/?p=26136

今回は、これをもとに、データの保存先を、localStorageから、Firebaseに変更したい。

＜目次＞
Ionic3とFirebaseでTodoアプリ（１）
Ionic3とFirebaseでTodoアプリ（２）FirebaseAuthでパスワード制限
Ionic3とFirebaseでTodoアプリ（３）パスワード制限つきPart2その1
Ionic3とFirebaseでTodoアプリ（４）パスワード制限つきPart2その2

ソースコードの一部は以下にアップロードしました。

https://github.com/adash333/ionic3-firebase-todo2

（開発環境）
Windows 8.1 Pro
VisualStudioCode
git version 2.16.1.windows.4
Sourcetree Version 2.4.8.0
Android Studio 3.0.1

Node v8.11.2
npm 6.1.0
@ionic/cli-utils 1.19.2
Ionic (Ionic CLI) 3.20.0

firebase@4.8.0
angularfire2@5.0.0-rc.4
promise-polyfill@8.0.0

npm install --save firebase@4.8.0
npm install --save angularfire2@5.0.0-rc.4
npm install --save promise-polyfill

C:/ionic3/ フォルダに、ionic3-firebase-todo2 というIonic3アプリを作成している。

（０）今回すること

データの保存先を、localStorageから、Firebaseに変更する。以下の記事を参考にする。

http://twosquirrel.mints.ne.jp/?p=25980

（１）firebase@4.8.0 angularfire2@5.0.0-rc.4 promise-polyfillをインストール。

npm install firebase@4.8.0 angularfire2@5.0.0-rc.4 promise-polyfill --save

（２）Firebaseのセットアップ

こちらの記事の「（２）Firebaseのセットアップ」と全く同様に設定する。

ただし、この時点では、Databaseのルールが、以下のような設定になっている。
（あとで必ず、認証が必要なルールに戻す。）

（３）src/enironments/environment.ts の新規作成

こちらの記事の「（３）src/enironments/environment.ts の新規作成」と全く同様に設定する。

（４）src/app/app.module.ts の修正

こちらの記事の「（４）src/app/app.module.ts の修正」と全く同様に設定する。

（５）task モデルの定義（src/models/task.tsの新規作成）

後で必要になるので、nameだけではなく、keyも定義しておく。

src/models/task.ts　（新規作成）

（６）TaskProviderの作成

ionic g provider task

src/providers/task/task.ts

（変更前）

（変更後）

（７）Firebaseにあるタスクリストの表示

task-list.ts

同様に、

hello-ionic.ts

（８）タスクの追加

hello-ionic.ts

hello-ionic.html

実際に、登録をすることができた。Firebaseにも反映されていた。

（９）タスクの編集

task-list.html

task-list.ts

試しに編集してみる

できたようである。

（１０）タスクの削除

task-list.ts

やってみる

削除できた。

（１１）email & passwordによるパスワード制限

あとは、以下の記事の通りにやる。

http://twosquirrel.mints.ne.jp/?p=25984

こちらの記事の「（１）AngularFire2を使うための準備」の通りに、Firebaseを操作する。

Database > ルール　をクリック。

認証しているユーザーは全てのデータにアクセス許可する方式に変更。

この時点で、以下のようになる。

（１２）LoginPageの作成と、AuthProviderの作成。

今回は、自分でFirebase Consoleでユーザー登録するので、、ResetPasswordPageとSignupPageは作成しない。

ローカルのVisualStudioCodeのターミナル画面で、以下を入力して、LoginPageの作成と、AuthProviderの作成を行います。

ionic generate page Login
ionic generate provider Auth

（１３）authenticaton observerの作成

例えば、Mikeが一度メールアドレスとパスワードでアプリにログインした後に、後日、またログインし直すのは面倒。ログアウトしない限り、2回目以降はログイン入力は省略したいような場合、auth listener　を作り、2回目以降はLoginPageを飛ばして直でHomePageへ誘導するようにする。

src/app/app.module.ts

src/app/app.component.ts

afAuth.authState　の、subscribe()関数で、userの状態を監視し、

user が authenticated(認証済み)　であれば、 HelloIonicPageに移動
userが not authenticated（未認証）　であればLoginPageへ移動

そして、ページ遷移が終了したら、unsubscribe()関数で、監視終了.

（１４）AuthProviderの作成

src/providers/auth/auth.ts

AuthProviderに以下の４つの関数のうちの２つを定義しています。

（１５）LoginPageの作成

今回は自分でFirebaseでパスワードなどを設定するので、validationなどは行う必要はないのだが、前回のコードをコピペする。

login.html

src/validators/email.ts (新規作成)

login.ts

Firebaseがログイン処理を行って居る際に用いるLoadingController　と、Firebaseの処理にエラーが出たときに表示するためのAlertControllerをimport

また、FormBuilder関連、AuthProvider、HomePage、EmailValidator（これから作成）をimport　その他、いろいろ、こちらを参考に。

一度、Ctrl+C でサーバ停止してから、再度、ionic serve

Firebase consoleで設定したメールアドレスとパスワードでちゃんとログインできた。

（１５）ログアウトボタンを作成

task-list.html

task-list.ts

うまくいかない。。。ログアウトボタンはあきらめるか。。。
(Netlifyにデプロイした後は、うまくいっていた。)

いったん終了とする。

（１６）アイコンその他の変更

src/manifest.json

src/index.html

これで、NetlifyにデプロイしたアドレスにAndroidスマホのChromeからアクセスして、

● chromeの画面右上の、点が縦に3つ並んでいるアイコンをクリック　＞　ホーム画面に追加　＞　追加　で、PWA（Progressive Web Apps）としてインストール

●次回以降は、スマホの画面から、「TODO2」をタップして起動すれば、スマホアプリとしてオフラインでも利用できる。

ソースコードの一部は以下にアップロードしました。

https://github.com/adash333/ionic3-firebase-todo2

参考：https://qiita.com/xiaca/items/321fb5ab3cb36c0c6cf6