スポンサーリンク

Ionic3とFirebaseでTodoアプリ（２）FirebaseAuthでパスワード制限

前回は、Ionic3とFirebaseで、（AngularFire2 Version5を用いて）Todoアプリを作成した。

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

このままの状態では全世界にTodoリストが公開されてしまうので、Firebaseを利用したパスワード制限をかけたい。

（開発環境）
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-todo というIonic3アプリを作成している。

（０）今回すること

以下の記事を参考に、ほぼコピペする。

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

（１）AngularFire2を使うための準備

Firebase Consoleにログインして、前回設定したアプリをを開く。

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

Authentication　＞　ログイン方法　をクリック

image

メール/パスワード　をクリックして、有効化する

image

image

ユーザー　＞　ユーザーを追加　をクリックして、適当なメールアドレスとパスワードを入力。（覚えておく。）

image

image

Database > ルール　をクリック。

image

認証しているユーザーは全てのデータにアクセス許可する方式に変更。（デフォルトでは、たしか、このルールだったと思います。）

image

公開　をクリック。

image

この時点で、認証されていないとfirebaseのデータに接続できなくなるので、HomePageが表示されなくなる。

image

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

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

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

ionic generate page Login
ionic generate provider Auth

image

（３）authenticaton observerの作成

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

src/app/app.module.ts
image

app/app.component.ts

（変更前）
image

（変更後）
image

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

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

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

image

（４）AuthProviderの作成

src/providers/auth/auth.ts

（変更前）
image

（変更後）
image

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

（５）LoginPageの作成

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

login.html

（変更前）
image

（変更後）
image

login.ts
image

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

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

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

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

image

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

image

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

home.html
image

home.ts
image

image[

このままだと、ログアウト後にHomePageのままで、以下のような画面になってしまう。

image

そのため、ログアウトと同時にログイン画面に移動するように設定する。

home.ts
image

import { LoginPage } from ‘../login/login’; 　も上の方に記載しておく。

（７）PWA化

src/index.html

（変更前）
image

（変更後）
image

（８）Netlifyにデプロイ。

あらかじめ、Bitbucketにアップロードしておき、そこから、Netlifyにデプロイ。

npm run bulid –prod
www/

後は、自分のスマホなどからアクセスして、PWAとしてスマホに保存しておけば、オフラインでも利用できる。

（９）Androidスマホで実際に触ってみる

PWAはアプリのビルド（Andoirdであれば、apkファイルの作成）が不要なのでかなり楽！

NetlifyにデプロイしたサイトをAndroidスマホ Zenfone 4 Max　で見てみた。

image　Screenshot_20180715-005214

ところが、編集ボタンと、削除ボタンをタップしても、テキストのところが選択されるだけで、うまく編集したり、削除したりすることができない。

原因は不明。

パソコンでクリックするのであれば、うまく機能するのに。。。

UI(User Interface)を変える必要がある。

次回は、以下の本に記載されているTodoアプリを参考にして、Firebase利用パスワード制限つきDodoアプリを作成したい。

スポンサーリンク

Angular5, Firebase, ionic, Ionic3

Posted by twosquirrel