差分

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

--- 09.emailとpasswordでパスワード制限:index.html [2018/12/20] – [7. Emailログインの実装] adash333
+++ 09.emailとpasswordでパスワード制限:index.html [2018/12/22] (現在) – [方針をたてる] adash333
@@ 行 13: / 行 13: @@
 となります。
-  -emailごパスワードは『Firebase』という場所に保存
+  -emailとパスワードは『Firebase』という場所に保存
 するものとします。
-今回は、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.用意するもの（開発環境） ====
@@ 行 138: / 行 134: @@
 {{:09.emailとpasswordでパスワード制限:pasted:20181221-000645.png}}
-ログインしていないので、Home.vueのログイン画面が表示される。
+ログインしていないので、Home.vueのログイン画面が表示されます。
 ==== 7. Emailログインの実装 ====
@@ 行 147: / 行 143: @@
 src/components/Home.vueを編集
+先に、<template></template>内のbuttonのところを変更します。
+v-text-fieldのところに、それぞれ、v-model="username"と、v-model="password"を追加します。
+また、v-btnのところに、@click="emailLogin"を追加します。
+(変更前１)
+<code>
+              <v-card-text>
+                <v-form>
+                  <v-text-field
+                    prepend-icon="person"
+                    name="login"
+                    label="Login"
+                    type="text"
+                  ></v-text-field>
+                  <v-text-field
+                    id="password"
+                    prepend-icon="lock"
+                    name="password"
+                    label="Password"
+                    type="password"
+                  ></v-text-field>
+                </v-form>
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="primary">Login</v-btn>
+              </v-card-actions>
+</code>
+(変更後１)
+<code>
+              <v-card-text>
+                <v-form>
+                  <v-text-field
+                    prepend-icon="person"
+                    name="username"
+                    label="Username"
+                    type="text"
+                    v-model="username"
+                  ></v-text-field>
+                  <v-text-field
+                    id="password"
+                    prepend-icon="lock"
+                    name="password"
+                    label="Password"
+                    type="password"
+                    v-model="password"
+                  ></v-text-field>
+                </v-form>
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="primary" @click="emailLogin">Login</v-btn>
+              </v-card-actions>
+</code>
+次に、<script></script>のところにdata()関数と、emailLogin()関数を定義。
+(変更前２)
+<code>
+  data: function () {
+    return {}
+  },
+</code>
+(変更後２)
+<code>
+  data() {
+    return {
+      username: "",
+      password: ""
+    };
+  },
+  methods: {
+    emailLogin: function() {
+      firebase
+        .auth()
+        .signInWithEmailAndPassword(this.username, this.password)
+        .then(
+          user => {
+            alert("Success!");
+            this.$router.push("/");
+          },
+          err => {
+            alert(err.message);
+          }
+        );
+    }
+  }
+</code>
+この時点で、user@example.com, 111111　と入力してLoginボタンをクリックすると、Success!というアラートが表示される。
+{{:09.emailとpasswordでパスワード制限:pasted:20181222-105302.png}}
+==== 8. ログイン状態のチェック ====
+サイト上でログイン状態をチェックします。
-途中
+App.vue内でログイン状態をチェックして、isLoginに格納します。
+src/App.vueの<script></script>内に、data関数の後ろに、created関数を定義します。created関数は、Vue.jsがそのcomponentを作成したタイミングで実行されるとのことです。
+<code>
+  created: function() {
+    firebase.auth().onAuthStateChanged(user => {
+      console.log(user);
+      if (user) {
+        this.isLogin = true;
+      } else {
+        this.isLogin = false;
+      }
+    });
+  },
+</code>
+(変更前)
+{{:09.emailとpasswordでパスワード制限:pasted:20181222-110527.png}}
+(変更後)
+{{:09.emailとpasswordでパスワード制限:pasted:20181222-110842.png}}
+先ほど、ログインしていますので、上記コード変更により、Secret.vueコンポーネントが表示されるようになりました。
+==== 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>
 ===== 今回参考にした本 =====