09.emailとpasswordでパスワード制限:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
09.emailとpasswordでパスワード制限:index.html [2018/12/20] – [6. src/App.vueの編集] adash333 | 09.emailとpasswordでパスワード制限:index.html [2018/12/22] (現在) – [方針をたてる] adash333 | ||
---|---|---|---|
行 13: | 行 13: | ||
となります。 | となります。 | ||
- | -emailごパスワードは『Firebase』という場所に保存 | + | -emailとパスワードは『Firebase』という場所に保存 |
するものとします。 | するものとします。 | ||
- | 今回は、https:// | + | 今回は、以下の3つのソースコードを利用させていただこうと思います。 |
- | + | -https:// | |
- | のソースコードを利用させていただこうと思います。 | + | -https:// |
+ | | ||
ソースコード | ソースコード | ||
+ | https:// | ||
- | + | 作ったもの | |
- | + | ||
- | これから作るもの | + | |
< | < | ||
+ | <iframe src=" | ||
</ | </ | ||
- | |||
- | |||
- | 作成中 | ||
==== 0.用意するもの(開発環境) ==== | ==== 0.用意するもの(開発環境) ==== | ||
行 138: | 行 134: | ||
{{: | {{: | ||
- | ログインしていないので、Home.vueのログイン画面が表示される。 | + | ログインしていないので、Home.vueのログイン画面が表示されます。 |
==== 7. Emailログインの実装 ==== | ==== 7. Emailログインの実装 ==== | ||
+ | Googleログインより、Email-Passwordログインの方が、難しい。 | ||
+ | 参考:https:// | ||
+ | src/ | ||
+ | 先に、< | ||
+ | v-text-fieldのところに、それぞれ、v-model=" | ||
+ | また、v-btnのところに、@click=" | ||
+ | (変更前1) | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | prepend-icon=" | ||
+ | name=" | ||
+ | label=" | ||
+ | type=" | ||
+ | ></ | ||
+ | < | ||
+ | id=" | ||
+ | prepend-icon=" | ||
+ | name=" | ||
+ | label=" | ||
+ | type=" | ||
+ | ></ | ||
+ | </ | ||
+ | </ | ||
+ | | ||
+ | < | ||
+ | < | ||
+ | <v-btn color=" | ||
+ | </ | ||
+ | </ | ||
+ | (変更後1) | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | prepend-icon=" | ||
+ | name=" | ||
+ | label=" | ||
+ | type=" | ||
+ | v-model=" | ||
+ | ></ | ||
+ | < | ||
+ | id=" | ||
+ | prepend-icon=" | ||
+ | name=" | ||
+ | label=" | ||
+ | type=" | ||
+ | v-model=" | ||
+ | ></ | ||
+ | </ | ||
+ | </ | ||
+ | | ||
+ | < | ||
+ | < | ||
+ | <v-btn color=" | ||
+ | </ | ||
+ | </ | ||
+ | 次に、< | ||
+ | (変更前2) | ||
+ | < | ||
+ | data: function () { | ||
+ | return {} | ||
+ | }, | ||
+ | </ | ||
+ | (変更後2) | ||
+ | < | ||
+ | data() { | ||
+ | return { | ||
+ | username: "", | ||
+ | password: "" | ||
+ | }; | ||
+ | }, | ||
+ | methods: { | ||
+ | emailLogin: function() { | ||
+ | firebase | ||
+ | .auth() | ||
+ | .signInWithEmailAndPassword(this.username, | ||
+ | .then( | ||
+ | user => { | ||
+ | alert(" | ||
+ | this.$router.push("/" | ||
+ | }, | ||
+ | err => { | ||
+ | alert(err.message); | ||
+ | } | ||
+ | ); | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | この時点で、user@example.com, | ||
- | 途中 | + | {{: |
- | ===== リンク ===== | + | ==== 8. ログイン状態のチェック ==== |
+ | サイト上でログイン状態をチェックします。 | ||
+ | App.vue内でログイン状態をチェックして、isLoginに格納します。 | ||
+ | src/ | ||
+ | |||
+ | < | ||
+ | created: function() { | ||
+ | firebase.auth().onAuthStateChanged(user => { | ||
+ | console.log(user); | ||
+ | if (user) { | ||
+ | this.isLogin = true; | ||
+ | } else { | ||
+ | this.isLogin = false; | ||
+ | } | ||
+ | }); | ||
+ | }, | ||
+ | </ | ||
+ | |||
+ | (変更前) | ||
+ | {{: | ||
+ | |||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | 先ほど、ログインしていますので、上記コード変更により、Secret.vueコンポーネントが表示されるようになりました。 | ||
+ | |||
+ | |||
+ | |||
+ | ==== 9. コンポーネント間の情報の受け渡しとログアウトボタン ==== | ||
+ | |||
+ | src/ | ||
+ | |||
+ | src/ | ||
+ | また、< | ||
+ | |||
+ | (変更前1) | ||
+ | {{: | ||
+ | (変更後1) | ||
+ | {{: | ||
+ | |||
+ | (変更前2) | ||
+ | {{: | ||
+ | (変更後2) | ||
+ | {{: | ||
+ | |||
+ | src/ | ||
+ | ログアウトボタンは、< | ||
+ | |||
+ | (変更前) | ||
+ | {{: | ||
+ | |||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 画面上の「ログアウト」ボタンを押すと、ログアウトされて、ログインフォームのページ(Home.vue)が表示されます。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 完成です。お疲れさまでした。 | ||
+ | |||
+ | さらに、 | ||
+ | |||
+ | -ユーザーがパスワードを忘れてしまった場合のための、パスワード再発行手続き | ||
+ | -誰もがemailとpasswordを登録すればログインできる(サインアップ) | ||
+ | |||
+ | などの実装を追加してもよいかもしれません。 | ||
+ | |||
+ | ===== ソースコード ===== | ||
+ | |||
+ | https:// | ||
+ | |||
+ | 作ったもの | ||
+ | < | ||
+ | <iframe src=" | ||
+ | </ | ||
+ | |||
+ | ===== 今回参考にした本 ===== | ||
+ | 以下の本が、写経していて楽しいし、説明もしっかりされていて、Vue.js入門書として非常におすすめです。 | ||
+ | |||
+ | < | ||
+ | <iframe style=" | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== リンク ===== | ||
https:// | https:// |
09.emailとpasswordでパスワード制限/index.html.1545318609.txt.gz · 最終更新: 2018/12/20 by adash333