Ionic4とFirestoreとCapacitorで写真アップロードつきCRUDアプリを写経してみる（２）

2018年9月30日

今回の写経経過の目次のリンク

https://javebratt.com/firebase-free-course/ からメールアドレス登録にてダウンロードできる、『Capacitorを用いたカメラ画像を保存できるIonic4アプリ』を写経している。
ソースコードはhttps://github.com/javebratt/master-firestore-event-managerに記載されている。

（１）Ionic4からFirebaseへの接続
（２）Firebaseでのauthentication(認証)
（３）FirestoreでのCRUD
（４）Firebaseへの画像のアップロード(Capacitor)
（５）Firebaseのセキュリティーのルール

について、学ぶことができるとのことです。

前回は、Ionic4アプリの作成とCapacitorのインストールまで行いました。

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

（開発環境）

Visual Studio Code

（０）今回行うこと

Firebase、Firestoreを用いて、

新規アカウント作成
既存アカウントでログイン
パスワードリセットメールの送信

を実装する。

（１）Firebaseアプリの初期化（initialize）

https://console.firebase.google.com/

のサイトへ行き、新規Firebaseプロジェクトを作成。

その後の画面で、図の部分をクリック。

下記のような表示になるので、var config = { } の中身を、テキストファイルにコピーしておく。

コピーした中身を、src/environments/environment.ts にペーストする。

(変更前)

(変更後)

Firebase consoleに戻り、 Authentication > ログイン方法　＞　メール/パスワード　をクリックして、有効にして、保存。

src/app/app.component.ts を変更

(変更前)

(変更後)

ここまでの変更点（src/environments/environment.ts は除く。）

https://github.com/adash333/ionic4-firestore-camera-crud/commit/0ddb774a75ddf43a36461268c4634b7e616726a5

（２）anonymous usersのページアクセスからの保護

なお、src/app/app-routing.ts は、以下のようになっている。

認証保護（Authentication Guard）としては、userのauthentication state を true/false　で定義して、ログインしているか、ログインしていないかを判定すればよい。

ionic g guard services/user/auth

src/app/services/auth.guard.ts

(変更後)

なお、15行目の

): Observable<boolean> | Promise<boolean> | boolean {

の３つの順番についてはよく分からなかった・・・

src/app/app-routing.mdule.ts の変更

(変更前)

(変更後)

home ページへのGuardを入れると、ionic serve後の画面は、自動的に、Loginページになった。

https://github.com/adash333/ionic4-firestore-camera-crud/commit/4b275852a4821e3cf729ddad1bf723f2225bbdf6

参考：https://www.joshmorony.com/prevent-access-to-pages-in-ionic-with-angular-route-guards/

（３）認証サービス（authentication service）の作成

src/app/services/user/auth.service.ts

(変更前)

(変更後)

（４）ログインページ

src/app/pages/login/login.page.html

(変更前)

(変更後)

src/app/pages/login/login.page.ts

(変更前)

(変更後)

あれれ？タイプミスを考慮して、https://github.com/javebratt/master-firestore-event-manager/blob/master/src/app/pages/login/login.page.html　をコピペしたが、以下のようなエラー。

ググる。

https://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form

@angular/forms

を用いる場合は、app.module.ts に、

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

しなさいとのこと。ところが、ionic4では、pages ごとに、module.ts があるので、そちらに記入すらしい。元のコードも、https://github.com/javebratt/master-firestore-event-manager/blob/master/src/app/pages/login/login.module.ts　に、ちゃんとReactiveFormsModuleその他をimport してあった。

src/app/pages/login/login.module.ts

(変更前)

(変更後)

やっと画面が出てきた。

微調整。

scss をコピペ。

login.page.scss

ここまでのコード

https://github.com/adash333/ionic4-firestore-camera-crud/commit/7349fba63e6750a7a4fce286192899ecd0c98368

作成中