====== Ionic4とFirebaseでEmail認証つき掲示板 Part.2 ======
前回の[[00.ionic4:04.ionic4とfirebaseで掲示板part1|Ionic4とFirebaseでEmail認証つき掲示板 Part.1]]に引き続き、以下の本の『第6章　Firebaseでユーザー認証しよう』を写経していきたいと思います。
<html>
<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B07MFYD3DP&linkId=99913f94e2ab04b2dc5476177cb1bf4a"></iframe>
</html>

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

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

作成の流れとしては、[[https://amzn.to/2I7ktCj|初心者でも大丈夫!! IonicとFirebaseでゼロからはじめるアプリ開発]]によると、以下のようになります。

  -ログイン機能のない『疑非メッセージボード』を作成する（<wrap hi>[[00.ionic4:04.ionic4とfirebaseで掲示板part1|Part.1]]</wrap>）
  -上記メッセージボードにログイン機能をつける（←今回）
  -投稿されたメッセージをFirebaseに保存できるようにする

ソースコード

DEMO


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

<wrap hi>[[00.ionic4:01.windowsでionicを始める方法|WindowsでIonicを始める方法]]</wrap>

や、

[[00.ionic4:01.windowsでionicを始める方法#オプション：nvm-windowsでNode.jsのバージョン管理]]

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

Windows10パソコン購入後のWindows Subsystem for Linuxでの環境構築については、<wrap hi>[[z_blog:2018:181219_windows10_config|Windows10購入時の設定]]</wrap>に記載させていただきました。
<code>
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
</code>
{{:00.ionic4:pasted:20190210-143318.png}}
私の場合、以下のようにフォルダ共有しています。
<code>
Windowsの C:/Users/a/a/
Ubuntuの  /mnt/c/Users/a/a/
</code>
また、Windows10のVisualStudioCodeでC:/Users/a/a/フォルダを開き、<wrap hi>[[http://i-doctor.sakura.ne.jp/web/doku.php?id=z_blog:2018:181219_windows10_config#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%85%B1%E6%9C%89%E3%81%AE%E5%88%9D%E6%9C%9F%E8%A8%AD%E5%AE%9A|こちらの設定]]</wrap>（<wrap em><wrap hi>Ctrl+Shift+P</wrap></wrap>で、Terminal select default shellをクリック）にて、VisualStudioCodeのターミナル画面をWSLのUbuntuのBash画面に設定しています。

===== Firebaseで新規プロジェクト（新しいサーバ）を作成 =====
パスワード制限を行うために、サーバサイドの処理が必要です。
サーバサイドの処理のために、Firebase（無料プラン）というものを利用します。

  *https://console.firebase.google.com　にGoogleアカウントでログインし、新規プロジェクト作成
{{:08.googleアカウントでのログイン機能:pasted:20181216-124725.png}}

  *今回は、「firebase-auth」という名前で新規プロジェクトを作成しました。
{{:08.googleアカウントでのログイン機能:pasted:20181216-124838.png}}

  *測定管理者間のデータ保護条項と規約の左側のチェックボックスをONにして、右下の「プロジェクトを作成」をクリック。
{{:08.googleアカウントでのログイン機能:pasted:20181216-125023.png}}

  *少し待つと、「新しいプロジェクトの準備ができました」と表示されるので、次へ　をクリック。
{{:08.googleアカウントでのログイン機能:pasted:20181216-125148.png}}

  *以下のようなプロジェクトトップ画面になるので、下図のように、「</>」をクリック。
{{:08.googleアカウントでのログイン機能:pasted:20181216-125305.png}}

  *「ウェブアプリにFirebaseを追加」の画面が出てくるので、グレーで表示された部分の中身をメモ帳などにコピーしておきます。これは、後で、VisualStudioCodeで、ペーストします。
{{:08.googleアカウントでのログイン機能:pasted:20181216-125734.png}}

  *プロジェクトトップ画面で、画面左側の列の「開発」をクリック
{{:08.googleアカウントでのログイン機能:pasted:20181216-130117.png}}

  *Authentication　をクリック
{{:08.googleアカウントでのログイン機能:pasted:20181216-130030.png}}

  *ログイン方法　をクリック
{{:08.googleアカウントでのログイン機能:pasted:20181216-130219.png}}

  *「メール/パスワード」をクリックして、有効　にします。その後、「保存」をクリック
{{:00.ionic4:pasted:20190213-170919.png}}

===== IonicからFirebaseを利用できるようにする =====
ローカルパソコンのVisualStudioCodeにターミナル画面に戻り、以下を入力します。
<code>
npm install firebase @angular/fire --save
</code>
{{:00.ionic4:pasted:20190214-160939.png}}

src/environments/environments.ts　に、先ほどのFirebaseのconfig以下をコピペします。
（変更前）
{{:00.ionic4:pasted:20190214-163631.png}}
（変更後）
{{:00.ionic4:pasted:20190214-163801.png}}

src/environments/environment.prod.ts も、同様に変更しておきます。
{{:00.ionic4:pasted:20190214-163916.png}}

引き続き、Firebaseの機能をIonicで利用できるようにセットアップを行っていきます。
src/app/app.module.tsを編集。
（変更前）
{{:00.ionic4:pasted:20190214-164032.png}}
（変更後）
{{:00.ionic4:pasted:20190214-164421.png}}

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

===== ログインページの作成 =====
ログインページを作成します。ターミナルで以下を入力します。
<code>
ionic g page login
</code>
{{:00.ionic4:pasted:20190214-165133.png}}
上記コードにより、以下の5個のファイルが新規作成されます。
{{:00.ionic4:pasted:20190214-165302.png}}
また、ルーティングを記載している

src/app/app-routing.module.ts

も自動的にアップデートされて、http://localhost:8100/login にアクセスすると、loginページが表示されるようになります。
{{:00.ionic4:pasted:20190214-165540.png}}

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

==== login.page.htmlの編集 ====
ログイン画面の見栄えを作成していきます。

src/app/login/login.page.html
（変更前）
{{:00.ionic4:pasted:20190214-165916.png}}
（変更後）
{{:00.ionic4:pasted:20190214-171111.png}}
{{:00.ionic4:pasted:20190214-171143.png}}

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

（変更前）
{{:00.ionic4:pasted:20190214-171421.png}}
（変更後）


(作成中)


===== リンク =====
目次：[[00.ionic4:index.html|スマホ用ホームページ&amp;スマホアプリ作成ソフトIonic4]]

前：

次：