スポンサーリンク

Ionic3でFirebaseでパスワード制限の写経にtry(2)(うまくいかず)

以前、tryして挫折したことがあった。

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

今回、ソースコードがちゃんと公開されていることを把握したので、前回の途中から再度tryしてみたい。

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

本家GitHub:https://github.com/appseed-io/ionic3-firebase-auth
image

(開発環境)
image

(今回構築した環境)
image

firebaseを用いて、emal とパスワードによるログイン機能を実装する。らしい。

(1)Ionicアプリの作成

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

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

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

C:\ionic3\supermodular2 フォルダを、VisualStudioCodeで開き、ターミナルで、

npm install
ionic serve

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

という名前で保存。

image

src/app/home/home.html

(変更前)
image

(変更後)
image

image

(参考)

画像の配置場所
http://ionic.keicode.com/basics/image-location.php

<Ionicで画像を配置する場合>

src/assets/img/ フォルダに画像 hoge.jpg を保存し、たとえば、home.htmlに表示したい場合は、

<img src=”assets/img/hoge.jpg”>

のように記載すれば、画像が表示される。

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

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

と同様に行った。プロジェクト作成後、Authenticationの「ログイン方法」のところを、メール/パスワードと、Googleのところを 有効 にしておく。

image

(3)ionicとFirebaseの連携

Firebase Console画面のProject Overview のところの、ウェブアプリにFirebaseを追加 をクリックして出てくる画面の一部をメモしておく。

image

image

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

(変更前)
image

(変更後)
image

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

npm install firebase angularfire2 --save

image

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

image

image

  (5)loginページの作成

ionic g page login

  image

src/app/app.module.ts に、loginページをimport

image

めずらしく、declarations のところにLoginPageを記載する。

LoginPageを、entryComponentsに追加する。

src/app/app.commponent.ts

(変更前)
image
image

(変更後)
image

image

(6)ionic serveしてみる

image

なんかエラーが出てうまくいかない。

なんかややこしいので、このサイトの写経はあきらめて、次は、以下のサイトの写経にtryしてみる。

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

 

その次は、以下のサイトを写経してみたい。

http://javasampleapproach.com/firebase/ionic-3-firebase-example-crud-operations-with-firebase-realtime-database
image

スポンサーリンク