前置き
※以前loginとregisterを
コンポーネントにし
componentタグで
表示を切り替えていましたが
pagesに変更しました!
urlをきちんと分けるためです💡
※またlogin状態のtrue, falseを
state.user.loginで作っていましたが
state.userのid, emailに値があれば
ログイン状態がtrueになるよう
変更しました!!
※今後もアップデートをする可能性がございます✨
不具合などがありましたら教えてください🙇♀️
この記事は有料です💡
https://note.com/aliz/n/n882048f66734
![画像11](https://i1.wp.com/assets.st-note.com/production/uploads/images/26039396/picture_pc_a2d0b79f9797ccea282514bec7153343.gif?w=920&ssl=1)
前回のTODOリストに
オプション機能をつけていきます♪
https://note.com/aliz/n/n8411db2c9a20
今回はログイン機能を追加🌟
実際にサービスを運用するには
必須の機能ですね!👍
以前の記事をやっていない方でも
仕組みと書き方が分かれば大丈夫です🙆♀️
【使うもの】
・Firebase Authentication
・Vuex(ログイン状態の保持)
【流れ】
ボリュームがあるため2回に分けます!
・ログイン画面の作成
・新規アカウント作成画面の作成
・ログイン時とログアウト時の
表示の出し分け
・+a
メールアドレス以外のログイン
エラー時の処理や
アカウント作成時にメール送信
❓公式guides, Referenceの読み方
基本的にfirebaseのreferenceは
英語の状態で表示し、
自分でgoogle翻訳で翻訳しましょう📚🔍
言語を日本語にすると
古いバージョンだったりするので、
最新の英語を翻訳していくのがベスト!⭕️
ただいきなり全部英語だと
欲しい情報がどこにあるか分からないので
最初は日本語で表示させて
ある程度検討をつけてから英語にしてます🍬
(英語も理解できるように頑張ろう…💪)
Step1: firebaseAuthの準備
まずはfirebaseで既に作成したプロジェクトに
ログイン方法の設定をしていきます🍒
簡単にできるメールアドレスから!✉️
ログインできるかどうか判断するため
firebase上でアカウントを作成してみます🌟
💡後からアカウント作成画面も作ります
💡Googleアカウントでの
ログインなども追加していきます
・プロジェクトの概要ページから
サイドメニューのAuthenticationを選択
ログイン方法を設定を選択
![画像3](https://i0.wp.com/assets.st-note.com/production/uploads/images/26028535/picture_pc_97960608c360454064b29a95a7d12cc7.png?w=920&ssl=1)
・メールを選択
![画像4](https://i1.wp.com/assets.st-note.com/production/uploads/images/26028559/picture_pc_16643e74387d269ad2167f5023ab2751.png?w=920&ssl=1)
・メールでのログインを有効にし、保存
![画像5](https://i0.wp.com/assets.st-note.com/production/uploads/images/26028571/picture_pc_541d09df10585d413eb25f9ee0f8e45d.png?w=920&ssl=1)
・usersタブに戻りユーザーを追加
![画像6](https://i2.wp.com/assets.st-note.com/production/uploads/images/26028594/picture_pc_8933e7f24430a86d056661f9f94743c5.png?w=920&ssl=1)
登録できるとユーザー情報が表示されます🌟
![画像7](https://i1.wp.com/assets.st-note.com/production/uploads/images/26028617/picture_pc_8d096209ed29f74922a08a0102275c8b.png?w=920&ssl=1)
このラインより上のエリアが無料で表示されます。
続きはnoteにて🗒
https://note.com/aliz/n/n882048f66734