Ionic3でFirebaseでパスワード制限の写経にtry（3）

2018年6月8日

ionic3とFirebaseで、email とパスワードによるログイン制限を行いたい。

以下のサイトを写経してみる。

http://masteringionic.com/blog/2017-09-19-adding-a-login-page-to-an-ionic-sidemenu-project/

（開発環境）

（１）Firebaseのセットアップ

以下のリンクからログインして、プロジェクトを新規作成して、「WebアプリにFirebaseを追加」をクリック。

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

このコードの一部を後で用いるので、テキストファイルとしてコピーしておく。

また、画面に左側の”Authentication”　＞　ログイン方法　として、Email/Password をEnabled にする。

ユーザー　＞　ユーザーを追加　から、自分のemail とパスワード（自分で決める）を登録。

（２）Ionic3アプリの作成

今回は、C:/ionic3/ フォルダで、右クリック　＞　VisualStudioCodeを開き、Ctrl+@でターミナルを表示して、以下を入力。

ionic start login-sidemenu sidemenu

? Would you like to integrate your new app with Cordova to target native iOS and Android? は、y + Enter

? Install the free Ionic Pro SDK and connect your app? は、 n + Enter

お決まりのionic serveで確認。

cd login-sidemenu

ionic serve

一度閉じて、C:/ionic3/login-sidemenu/ フォルダをVisualStudioCodeで開く。

（３）loginページと、auth providerの作成

ionic g page login
ionic g provider auth

Firebaseを使用するための準備

npm install --save firebase
npm install --save promise-polyfill

src/ フォルダに、src/environments/ フォルダを作成し、environment.ts　を作成し、以下を記載。

大文字のところは、（１）のFirebaseのセットアップのところで出てきた部分をコピペする。

（４）src/app/app.module.ts の編集

https://gist.github.com/adash333/3fdf434e6d1f50cfa812f9650148e665

(変更前)

(変更後)

（参考）

http://www.fumiononaka.com/Business/html5/FN1707005.html

https://qiita.com/ponday/items/1ec0e500cd801286845e

https://stackoverflow.com/questions/45129790/difference-between-http-and-httpclient-in-angular-4

Angular4.3以上は、HttpClientModuleを利用するのが望ましいらしい。。。

 

（５）src/app/app.component.ts　に、

LoginPageコンポーネントをimport

rootPageを、HomePageから、LoginPageに変更

firebaseからのlog outと、userをLoginPageへ戻す関数を実装

https://gist.github.com/adash333/203954692d24cd28b5219d97faa26d96

(変更前)

(変更後)

なんかhttpがどうたらこうたらのエラーが出たので、先にapp.module.ts をHttpClientModuleの設定（Angular4.3　以降は、HttpClientModule推奨らしい。。。）

src/app/app.module.ts

(変更前)

import { HttpClientModule } from ‘@angular/common/http’;

@NgModule({
imports: [HttpClientModule]

(変更後)

(6) src/providers/auth/auth.ts の編集

signInWithEmailAndPassword 関数

logOut()関数

src/providers/auth/auth.ts

https://gist.github.com/adash333/5fb8ef127dba5200f034a708c5afc233

(変更前)

(変更後)

（７）LoginPageの作成

src/pages/login/login.ts

https://gist.github.com/adash333/64ba661e693fb4f90b85a11019ade371

(変更前)

(変更後)

src/pages/login/login.html

https://gist.github.com/adash333/4db08317c3cc254ed8ea1bbe9f20ba8b

(変更前)

(変更後)

ロゴの画像はもとから入っていたので、以下のように変更している。

（８）実行してみる。

ionic serve

本家サイトをコピペしているつもりなのだが、なぜか以下のエラーが出てしまう。。。

ググってもよく分からなかったので、エラーで赤線がひいてある : Promise　の2か所を削除してみたら、うまくいった。。。

なお、sassはわざといじっていません。（１）で登録したEmailとパスワードを入力してログインすると、

　　

ちゃんとログインして、ログアウトできた！

これで、簡単なパスワード制限ができるようになった。かな？

次は、以下のサイトを順番に写経していきたい。

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

 

(参考)

http://tech.pjin.jp/blog/2017/03/13/make-firebase-board-4/

https://javebratt.com/ionic-firebase-authentication/

 

 

途中