Ionic+Firebaseでパスワード制限つきチャットアプリ（７）（最終だけど途中）FirebaseAuthenticationでメールアドレス認証

2018年6月13日

Angular+Firebaseでパスワード制限つきチャットアプリの作成方法が解説されている以下のサイトをIonic3に少し改変しながら写経している。

https://qiita.com/Yamamoto0525/items/a76ea4b3924eeb82b0f9

前回は、「AngularのRxJSを使ってデータの受け渡しをする」まで（曲りなりに）写経した。

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

今回は、その続きで、2018年6月時点で最後の、「Angular+Firebase Authenticationで認証機能を導入する」の写経をやってみたい。前回のRxJSによるデータの受け渡しがてきていないので、今回は無理かもしれない。。。

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

firebase-tools
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

（０）今回行うこと

●Firebase Authentication　の設定

●AngularFireAuth　を SessionProviderに組み込む

●LoginPageに認証機能を実装

（１）Firebase Authentication　の設定

firebase consoleにログインして、今回使用しているプロジェクトを開く。

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

Authentication > ログイン方法 で、 メール/パスワード　を　「有効」　にする。

テンプレート言語の設定を、「Japanese」に変更。

なお、ユーザー　のところをクリックすると、メールアドレスとパスワードの組み合わせを、管理者としてあらかじめ登録することができます。

サインアップページを作らずに、完全招待制アプリとすることもできるようです。

ちなみに、Databaseのルールは、以下のようにしています。

（２）AngularFireAuth　を SessionProviderに組み込む

src/providers/session/session.ts

(変更前)

AngularFireAuthとfirebaseをimport して、constructorの引数（？）に、afAuth: AngularFireAuth を定義

(変更後)

メールアドレスとパスワードを引数に渡す必要があるため、Passwordモデルを新規作成

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

再び、SessionProvider　で、アカウント作成の関数signup()関数を定義

src/providers/session/session.ts

前回作成したlogin()メソッドとlogout()メソッドに、AngularFireAuthのsignInWithEmailAndPassword()とsignOut()を追加する。

ここで使用したAngularFireAuthのメソッド

（３）ログイン画面に認証機能を実装する

サインアップ画面の実装

SessionProviderのメソッドを、ビューに設置していく。

今回は、Validationのために、FormModuleを使用する。

sign-up.ts に、SessionProviderをDI（Dependency Injection）し、submitSignUp()メソッドを追加する。

src/pages/sign-up/sign-up.ts

(変更前)

(変更後)

ビューの実装

src/pages/sign-up/sign-up.html

(変更前)

ここ、AngularのビューをIonic形式に変更しようとがんばったが、無理だった。

見栄えは無視！

(変更後)

src/pages/sign-up/sign-up.scss 元サイトのコードをコピペ。

もうこれで実行してみる！

メールアドレスと、パスワード2回を入力すると、SIGN UP がクリックできるようになるので、クリック。

メールがすぐに届く。

メールのリンクをクリックすると、以下のようなページが出た。おお！

firebase console で確認すると、ちゃんと今回登録したメールアドレスがAuthenticationのユーザーのところに記載されている。

（参考）

http://www.htmq.com/html5/input_type_email.shtml

https://allabout.co.jp/gm/gc/23897/2/

（４）ログイン画面の実装

login.ts

(変更後)

login.html

src/pages/login/login.ts 元サイトのコードをコピペ。

（５）実行してみる。

先ほどのSignUp画面で登録したメールアドレスとパスワードを入力してログインをクリック。

ログインに失敗したと出たのに、HomePageへ移動してしまっている。

まずい、、、

入力したメールアドレスが間違っていた。

しかし、Firebaseの方で、認証されていなければ、おそらく、ページ遷移はされても、firebaseからのデータは見ることができない（はず、、、）なので、とりあえず、今回はこれで終了とする。（なんと、現時点では、誰がコメントしても、（Tさん）のコメントになってしまうが、、、）

元サイトが更新されたら、また写経していきたい！

やっぱりちょこっと見栄えをionic風にして、login.scss と sign-up.scssは、ほぼ空に戻した。

（参考）https://ionicframework.com/docs/components/#floating-labels

git push

ここまでのソースコード（ここで一旦終了。）

https://github.com/adash333/ionic3_firebase_chat2/tree/bbb2a2a80d59f9a2026041b67d4d0923155469ab

（６）Androidアプリのビルド

ionic cordova build android

何分かかかった。

app-debug.apk　を、自分のGdriveを介して、自分のAndroidスマホ（arrows M03）にインストール。

しかし、やはり、パスワードを間違っても、チャットの中身が見えてしまった。。。

とりあえず、ここまで。

（参考）

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