差分

このページの2つのバージョン間の差分を表示します。

--- 09.emailとpasswordでパスワード制限:index.html [2018/12/22] – [8. ログイン状態のチェック] adash333
+++ 09.emailとpasswordでパスワード制限:index.html [2018/12/22] (現在) – [方針をたてる] adash333
@@ 行 17: / 行 17: @@
 するものとします。
-今回は、https://qiita.com/sin_tanaka/items/ea149a33bd9e4b388241と、https://www.tohuandkonsome.site/entry/2018/11/19/182438#Eメールとパスワードでユーザー管理する
+今回は、以下の３つのソースコードを利用させていただこうと思います。
+  -https://qiita.com/sin_tanaka/items/ea149a33bd9e4b388241
-のソースコードを利用させていただこうと思います。
+  -https://www.tohuandkonsome.site/entry/2018/11/19/182438#Eメールとパスワードでユーザー管理する
+  -[[https://amzn.to/2EJyMuw|改訂新版　Vue.jsとFirebaseで作るミニWebサービス]]
-ソースコード（作成中）
+ソースコード
 https://codesandbox.io/s/6xzm6wr2k3
-これから作るもの
+作ったもの
 <html>
+<iframe src="https://codesandbox.io/embed/6xzm6wr2k3" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
 </html>
-作成中
 ==== 0.用意するもの（開発環境） ====
@@ 行 278: / 行 274: @@
 ==== 9. コンポーネント間の情報の受け渡しとログアウトボタン ====
+src/App.vueがFirebaseから受け取ったユーザー情報userを、src/components/Secret.vueに渡して、Secret.vue上で表示します。
+src/App.vueの<template>の<Editor>の部分に、user="userData"を追加します。
+また、<script>のdata関数でuserDataを初期化し、created関数のところで、ログイン状態のときにuserDataにFirebaseからの情報userを格納します。
+(変更前１)
+{{:09.emailとpasswordでパスワード制限:pasted:20181222-111809.png}}
+(変更後１)
+{{:09.emailとpasswordでパスワード制限:pasted:20181222-111915.png}}
+(変更前２)
+{{:09.emailとpasswordでパスワード制限:pasted:20181222-111949.png}}
+(変更後２)
+{{:09.emailとpasswordでパスワード制限:pasted:20181222-112136.png}}
+src/components/Secret.vue　にて、src/App.vueからの情報userを受け取るために、<script>内でpros: ["user"]と記載します。
+ログアウトボタンは、<script>内で、buttonを作成して@click="logout"と記載し、<script>内でlogout()関数を定義します。
+(変更前)
+{{:09.emailとpasswordでパスワード制限:pasted:20181222-112542.png}}
+(変更後)
+{{:09.emailとpasswordでパスワード制限:pasted:20181222-113050.png}}
+{{:09.emailとpasswordでパスワード制限:pasted:20181222-113137.png}}
+画面上の「ログアウト」ボタンを押すと、ログアウトされて、ログインフォームのページ（Home.vue）が表示されます。
+{{:09.emailとpasswordでパスワード制限:pasted:20181222-113214.png}}
-途中
+完成です。お疲れさまでした。
+さらに、
+  -ユーザーがパスワードを忘れてしまった場合のための、パスワード再発行手続き
+  -誰もがemailとpasswordを登録すればログインできる（サインアップ）
+などの実装を追加してもよいかもしれません。
+===== ソースコード =====
+https://codesandbox.io/s/6xzm6wr2k3
+作ったもの
+<html>
+<iframe src="https://codesandbox.io/embed/6xzm6wr2k3" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+</html>
 ===== 今回参考にした本 =====