スポンサーリンク

Ionic4とFirestoreとCapacitorで写真アップロードつきCRUDアプリを写経してみる(2)

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

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

(1)Ionic4からFirebaseへの接続
(2)Firebaseでのauthentication(認証)
(3)FirestoreでのCRUD
(4)Firebaseへの画像のアップロード(Capacitor)
(5)Firebaseのセキュリティーのルール

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

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

Ionic4とFirestoreとCapacitorで写真アップロードつきCRUDアプリを写経してみる(1)Ionic4アプリ作成とCapacitorのインストール

(開発環境)
image_thumb
Visual Studio Code

(0)今回行うこと

Firebase、Firestoreを用いて、

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

を実装する。

(1)Firebaseアプリの初期化(initialize)

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

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

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

image

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

image

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

(変更前)
image

(変更後)
image

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

image

image

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

(変更前)
image

(変更後)
image

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

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

(2)anonymous usersのページアクセスからの保護

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

image

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

ionic g guard services/user/auth

image

src/app/services/auth.guard.ts

(変更後)
image

なお、15行目の

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

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

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

(変更前)
image

(変更後)
image

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/
image

 

(3)認証サービス(authentication service)の作成

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

(変更前)
image

(変更後)
image

(4)ログインページ

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

(変更前)
image

(変更後)
image

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

(変更前)
image

(変更後)
image

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

image

ググる。

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

image

@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

(変更前)
image

(変更後)
image

やっと画面が出てきた。

微調整。

image

scss をコピペ。

login.page.scss

image

ここまでのコード

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

 

 

 

 

 

 

 

 

 

 

作成中

スポンサーリンク