目次

Ionic4とFirebaseでEmail認証つき掲示板 Part.2

前回のIonic4とFirebaseでEmail認証つき掲示板 Part.1に引き続き、以下の本の『第6章 Firebaseでユーザー認証しよう』を写経していきたいと思います。

上記の本のサポートサイト
https://sinack.com/ird_ionic/

すること

  1. 掲示板
  2. Emailアドレスとパスワードでログイン制限あり
  3. ユーザー登録ができる
  4. 掲示板にメッセージを書き込める(Create)
  5. メッセージの更新(Update)と削除(Delete)ができる
  6. メッセージにコメントできる
  7. PWA化して、オフラインでもアプリとして利用できようにする

作成の流れとしては、初心者でも大丈夫!! IonicとFirebaseでゼロからはじめるアプリ開発によると、以下のようになります。

  1. ログイン機能のない『疑非メッセージボード』を作成する(Part.1
  2. 上記メッセージボードにログイン機能をつける(←今回)
  3. 投稿されたメッセージをFirebaseに保存できるようにする

ソースコード

DEMO

開発環境

私の環境は以下のようになっていますが、Windowsパソコンの場合、

WindowsでIonicを始める方法

や、

オプション:nvm-windowsでNode.jsのバージョン管理

の手順でインストールしていただければ、ほぼ同じ環境が整います。

Windows10パソコン購入後のWindows Subsystem for Linuxでの環境構築については、Windows10購入時の設定に記載させていただきました。

Panasonic CF-RZ6
Windows10 Pro (1803)
VisualStudioCode 

Windows Subsystem for Linux (WSL)
Ubuntu18.04
VisualStudioCodeのターミナル画面をWSLのBashに設定
git 2.17.1
anyenv 
nodenv 1.1.2-69-gced0e70
node 10.14.2


私の場合、以下のようにフォルダ共有しています。

Windowsの C:/Users/a/a/
Ubuntuの  /mnt/c/Users/a/a/

また、Windows10のVisualStudioCodeでC:/Users/a/a/フォルダを開き、こちらの設定Ctrl+Shift+Pで、Terminal select default shellをクリック)にて、VisualStudioCodeのターミナル画面をWSLのUbuntuのBash画面に設定しています。

Firebaseで新規プロジェクト(新しいサーバ)を作成

パスワード制限を行うために、サーバサイドの処理が必要です。
サーバサイドの処理のために、Firebase(無料プラン)というものを利用します。

IonicからFirebaseを利用できるようにする

ローカルパソコンのVisualStudioCodeにターミナル画面に戻り、以下を入力します。

npm install firebase @angular/fire --save

src/environments/environments.ts に、先ほどのFirebaseのconfig以下をコピペします。
(変更前)

(変更後)

src/environments/environment.prod.ts も、同様に変更しておきます。

引き続き、Firebaseの機能をIonicで利用できるようにセットアップを行っていきます。
src/app/app.module.tsを編集。
(変更前)

(変更後)

これで、FirebaseのAuthentication(認証)を利用する準備ができました。
(Netlifyにデプロイする場合は、Firebaseアプリの設定で、Netlifyのドメインを許可する必要があります。、)

ログインページの作成

ログインページを作成します。ターミナルで以下を入力します。

ionic g page login


上記コードにより、以下の5個のファイルが新規作成されます。

また、ルーティングを記載している

src/app/app-routing.module.ts

も自動的にアップデートされて、http://localhost:8100/login にアクセスすると、loginページが表示されるようになります。

いきなり出てきたapp-routing.module.tsですが、今後、todos/:id などのルーティングや、ルーティングのガードを行いたい(後述)などの場合は、このファイルを編集していくことになります。

login.page.htmlの編集

ログイン画面の見栄えを作成していきます。

src/app/login/login.page.html
(変更前)

(変更後)

login.emailとlogin.passwordの定義と、userLogin()関数の定義(ToastControllerというものを用います)を、src/app/login/login.page.tsに記載していきます。

(変更前)

(変更後)

(作成中)

リンク

目次:スマホ用ホームページ&スマホアプリ作成ソフトIonic4

前:

次: