サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール

現在位置: index.html » 09.emailとpasswordでパスワード制限
トレース:
09.emailとpasswordでパスワード制限:index.html


差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
09.emailとpasswordでパスワード制限:index.html [2018/12/20] – [6. src/App.vueの編集] adash33309.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> <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> </html>
- 
- 
-作成中 
  
 ==== 0.用意するもの（開発環境） ==== ==== 0.用意するもの（開発環境） ====
行 138: 行 134:
 {{:09.emailとpasswordでパスワード制限:pasted:20181221-000645.png}} {{:09.emailとpasswordでパスワード制限:pasted:20181221-000645.png}}
  
-ログインしていないので、Home.vueのログイン画面が表示される。+ログインしていないので、Home.vueのログイン画面が表示されます。
  
 ==== 7. Emailログインの実装 ==== ==== 7. Emailログインの実装 ====
 +Googleログインより、Email-Passwordログインの方が、難しい。
  
 +参考：https://qiita.com/sin_tanaka/items/ea149a33bd9e4b388241
  
 +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>
 +
 +===== 今回参考にした本 =====
 +以下の本が、写経していて楽しいし、説明もしっかりされていて、Vue.js入門書として非常におすすめです。
 +
 +<html>
 +<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B07HXMHQQK&linkId=2676690c66ac2be60e3b288d6c87b766"></iframe>
 +</html>
 +
 +
 +===== リンク =====
  
 https://qiita.com/sin_tanaka/items/ea149a33bd9e4b388241 https://qiita.com/sin_tanaka/items/ea149a33bd9e4b388241


09.emailとpasswordでパスワード制限/index.html.1545318609.txt.gz · 最終更新: 2018/12/20 by adash333
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki