スポンサーリンク

Ionic3でFirebaseでパスワード制限の写経にtry(1)

Ionicについては、以下の本がお勧め!

Firebaseを用いた、パスワード制限つきのサイトandアプリを作ってみたい。

とりあえず、以下のサイトの写経にtryしてみる。

https://medium.com/appseed-io/integrating-firebase-password-and-google-authentication-into-your-ionic-3-app-2421cee32db9
image

(環境)
image

VIsualStudioCode 1.20.1
git version 2.16.1.windows.4

C:/ionic3/ フォルダに、右クリックで、「VisualStudioCodeで開く」をクリック。

Ctrl + @ で、ターミナルを開き、以下のサイトからgit cloneする。

git clone https://github.com/appseed-io/supermodular2.git

(1)下記のサイトから、git cloneする。

https://github.com/appseed-io/supermodular2
image

git clone https://github.com/appseed-io/supermodular2.git

image

cd supermodular2
npm install
ionic serve

npm installには、数分かかる。

image

image

なんかトップページの一番上の文字がヘッダーのせいで見えないが、続きをやる。

src/assets/img/ フォルダに、適当な画像を保存。

今回は、https://pixabay.com/ja/%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3-%E5%BB%BA%E7%89%A9-%E3%83%A2%E3%83%80%E3%83%B3-%E5%B8%82-%E3%82%AC%E3%83%A9%E3%82%B9-%E3%82%AA%E3%83%95%E3%82%A3%E3%82%B9-%E9%AB%98%E5%B1%A4%E3%83%93%E3%83%AB-3180097/ から、640×426の画像を、

architecture_640.jpg

という名前で保存。

なんかだめであった。

(1-2)git cloneからやり直し、

ionic serveまでやり直すと、なぜかうまくいった。

image

(2)firebaseプロジェクトの新規作成

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

supermodular という名前で新規作成

image

image

image

(3)ionicと、firebaseの連携

image

image

この部分の var config = { } の中身を、src/config.ts の一部にコピペする。

(変更前)
image

(変更後)
image

(4)firebaseとangularfire2のインストール

npm install firebase angularfire2 --save

src/app/app.module.ts の変更

image

image

image

(5)login pageの作成

ionic g page login

image

src/app/app.module.ts に、LoginPageを追加

image

src/app/app.component.ts を変更して、初期ページを、LoginPageとする。

image

(変更前)
image

(変更後)
image

ionic serve

で確認。

image

しかし、上記のように、login.htmlが表示されず、以前のまま、home.html が表示されてしまった。

どこが間違っているのか分からない。。。

app.component.ts

image

このようにコメントアウトすると、ionic serveにより、以下のようになってしまった。(Login という文字は出てこない。。。)

厳しい。。。

image

スポンサーリンク