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

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

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

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

(開発環境)
image_thumb2

image_thumb14

(1)Firebaseのセットアップ

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

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

image

image

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

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

image

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

image

image

(2)Ionic3アプリの作成

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

? 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

image

お決まりのionic serveで確認。

cd login-sidemenu

ionic serve

image

image

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

(3)loginページと、auth providerの作成

Firebaseを使用するための準備

image

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

image

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

image

image

(4)src/app/app.module.ts の編集

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

(変更前)
image

(変更後)
image

image

(参考)

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

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

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

image

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

(5)src/app/app.component.ts に、

LoginPageコンポーネントをimport

rootPageを、HomePageから、LoginPageに変更

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

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

(変更前)
image

image

image

(変更後)
image

image

image

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

src/app/app.module.ts

(変更前)
image

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

@NgModule({
imports: [HttpClientModule]

(変更後)
image

image

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

signInWithEmailAndPassword 関数

logOut()関数

src/providers/auth/auth.ts

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

(変更前)
image

(変更後)

image

image

image

(7)LoginPageの作成

src/pages/login/login.ts

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

(変更前)
image

(変更後)
image

image

src/pages/login/login.html

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

(変更前)
image

(変更後)
image

image

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

image

(8)実行してみる。

ionic serve

image

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

image

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

image

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

image image image

image

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

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

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

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

(参考)

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

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

途中

関連記事
Count per Day
    Popular Posts
    スポンサーリンク

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする