00.ionic4:05.ionic4とfirebaseで掲示板part2
差分
このページの2つのバージョン間の差分を表示します。
次のリビジョン | 前のリビジョン最新のリビジョン両方とも次のリビジョン | ||
00.ionic4:05.ionic4とfirebaseで掲示板part2 [2019/02/13] – 作成 adash333 | 00.ionic4:05.ionic4とfirebaseで掲示板part2 [2019/02/14] – [login.page.htmlの編集] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
====== Ionic4とFirebaseでEmail認証つき掲示板 Part.2 ====== | ====== Ionic4とFirebaseでEmail認証つき掲示板 Part.2 ====== | ||
- | 前回に引き続き、以下の本の『第6章 Firebaseでユーザー認証しよう』を写経していきたいと思います。 | + | 前回の[[00.ionic4: |
< | < | ||
<iframe style=" | <iframe style=" | ||
行 7: | 行 7: | ||
上記の本のサポートサイト | 上記の本のサポートサイト | ||
https:// | https:// | ||
+ | |||
+ | ===== すること ===== | ||
+ | -掲示板 | ||
+ | -Emailアドレスとパスワードでログイン制限あり | ||
+ | -ユーザー登録ができる | ||
+ | -掲示板にメッセージを書き込める(Create) | ||
+ | -メッセージの更新(Update)と削除(Delete)ができる | ||
+ | -メッセージにコメントできる | ||
+ | -PWA化して、オフラインでもアプリとして利用できようにする | ||
+ | |||
+ | 作成の流れとしては、[[https:// | ||
+ | |||
+ | -ログイン機能のない『疑非メッセージボード』を作成する(< | ||
+ | -上記メッセージボードにログイン機能をつける(←今回) | ||
+ | -投稿されたメッセージをFirebaseに保存できるようにする | ||
+ | |||
+ | ソースコード | ||
+ | |||
+ | DEMO | ||
+ | |||
+ | |||
+ | |||
+ | ===== 開発環境 ===== | ||
+ | 私の環境は以下のようになっていますが、Windowsパソコンの場合、 | ||
+ | |||
+ | <wrap hi> | ||
+ | |||
+ | や、 | ||
+ | |||
+ | [[00.ionic4: | ||
+ | |||
+ | の手順でインストールしていただければ、ほぼ同じ環境が整います。 | ||
+ | |||
+ | Windows10パソコン購入後のWindows Subsystem for Linuxでの環境構築については、< | ||
+ | < | ||
+ | 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 | ||
+ | </ | ||
+ | {{: | ||
+ | 私の場合、以下のようにフォルダ共有しています。 | ||
+ | < | ||
+ | Windowsの C:/ | ||
+ | Ubuntuの | ||
+ | </ | ||
+ | また、Windows10のVisualStudioCodeでC:/ | ||
+ | |||
+ | ===== Firebaseで新規プロジェクト(新しいサーバ)を作成 ===== | ||
+ | パスワード制限を行うために、サーバサイドの処理が必要です。 | ||
+ | サーバサイドの処理のために、Firebase(無料プラン)というものを利用します。 | ||
+ | |||
+ | *https:// | ||
+ | {{: | ||
+ | |||
+ | *今回は、「firebase-auth」という名前で新規プロジェクトを作成しました。 | ||
+ | {{: | ||
+ | |||
+ | *測定管理者間のデータ保護条項と規約の左側のチェックボックスをONにして、右下の「プロジェクトを作成」をクリック。 | ||
+ | {{: | ||
+ | |||
+ | *少し待つと、「新しいプロジェクトの準備ができました」と表示されるので、次へ をクリック。 | ||
+ | {{: | ||
+ | |||
+ | *以下のようなプロジェクトトップ画面になるので、下図のように、「</> | ||
+ | {{: | ||
+ | |||
+ | *「ウェブアプリにFirebaseを追加」の画面が出てくるので、グレーで表示された部分の中身をメモ帳などにコピーしておきます。これは、後で、VisualStudioCodeで、ペーストします。 | ||
+ | {{: | ||
+ | |||
+ | *プロジェクトトップ画面で、画面左側の列の「開発」をクリック | ||
+ | {{: | ||
+ | |||
+ | *Authentication をクリック | ||
+ | {{: | ||
+ | |||
+ | *ログイン方法 をクリック | ||
+ | {{: | ||
+ | |||
+ | *「メール/ | ||
+ | {{: | ||
+ | |||
+ | ===== IonicからFirebaseを利用できるようにする ===== | ||
+ | ローカルパソコンのVisualStudioCodeにターミナル画面に戻り、以下を入力します。 | ||
+ | < | ||
+ | npm install firebase @angular/ | ||
+ | </ | ||
+ | {{: | ||
+ | |||
+ | src/ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | src/ | ||
+ | {{: | ||
+ | |||
+ | 引き続き、Firebaseの機能をIonicで利用できるようにセットアップを行っていきます。 | ||
+ | src/ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | これで、FirebaseのAuthentication(認証)を利用する準備ができました。 | ||
+ | (Netlifyにデプロイする場合は、Firebaseアプリの設定で、Netlifyのドメインを許可する必要があります。、) | ||
+ | |||
+ | ===== ログインページの作成 ===== | ||
+ | ログインページを作成します。ターミナルで以下を入力します。 | ||
+ | < | ||
+ | ionic g page login | ||
+ | </ | ||
+ | {{: | ||
+ | 上記コードにより、以下の5個のファイルが新規作成されます。 | ||
+ | {{: | ||
+ | また、ルーティングを記載している | ||
+ | |||
+ | src/ | ||
+ | |||
+ | も自動的にアップデートされて、http:// | ||
+ | {{: | ||
+ | |||
+ | いきなり出てきたapp-routing.module.tsですが、今後、todos/: | ||
+ | |||
+ | ==== login.page.htmlの編集 ==== | ||
+ | ログイン画面の見栄えを作成していきます。 | ||
+ | |||
+ | src/ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | {{: | ||
+ | |||
+ | login.emailとlogin.passwordの定義と、userLogin()関数の定義(ToastControllerというものを用います)を、src/ | ||
+ | |||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
===== リンク ===== | ===== リンク ===== |
00.ionic4/05.ionic4とfirebaseで掲示板part2.txt · 最終更新: 2019/08/28 by adash333