09.emailとpasswordでパスワード制限:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
09.emailとpasswordでパスワード制限:index.html [2018/12/22] – [7. Emailログインの実装] adash333 | 09.emailとpasswordでパスワード制限:index.html [2018/12/22] (現在) – [方針をたてる] adash333 | ||
---|---|---|---|
行 17: | 行 17: | ||
するものとします。 | するものとします。 | ||
- | 今回は、https:// | + | 今回は、以下の3つのソースコードを利用させていただこうと思います。 |
- | + | -https:// | |
- | のソースコードを利用させていただこうと思います。 | + | -https:// |
- | + | | |
- | ソースコード(作成中) | + | |
+ | ソースコード | ||
https:// | https:// | ||
- | これから作るもの | + | 作ったもの |
< | < | ||
+ | <iframe src=" | ||
</ | </ | ||
- | |||
- | |||
- | 作成中 | ||
==== 0.用意するもの(開発環境) ==== | ==== 0.用意するもの(開発環境) ==== | ||
行 147: | 行 143: | ||
src/ | src/ | ||
- | 先に、< | + | 先に、< |
+ | |||
+ | v-text-fieldのところに、それぞれ、v-model=" | ||
+ | |||
+ | また、v-btnのところに、@click=" | ||
(変更前1) | (変更前1) | ||
< | < | ||
- | <v-btn color=" | + | < |
+ | < | ||
+ | < | ||
+ | prepend-icon=" | ||
+ | name=" | ||
+ | label=" | ||
+ | type=" | ||
+ | ></ | ||
+ | < | ||
+ | id=" | ||
+ | prepend-icon=" | ||
+ | name=" | ||
+ | label=" | ||
+ | type=" | ||
+ | ></ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | | ||
+ | </ | ||
</ | </ | ||
(変更後1) | (変更後1) | ||
< | < | ||
- | <v-btn color=" | + | < |
+ | < | ||
+ | < | ||
+ | prepend-icon=" | ||
+ | name=" | ||
+ | label=" | ||
+ | type=" | ||
+ | v-model=" | ||
+ | ></ | ||
+ | < | ||
+ | id=" | ||
+ | prepend-icon=" | ||
+ | name=" | ||
+ | label=" | ||
+ | type=" | ||
+ | v-model=" | ||
+ | ></ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | | ||
+ | </ | ||
</ | </ | ||
+ | 次に、< | ||
+ | (変更前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=" | ||
+ | </ | ||
===== 今回参考にした本 ===== | ===== 今回参考にした本 ===== |
09.emailとpasswordでパスワード制限/index.html.1545441759.txt.gz · 最終更新: 2018/12/22 by adash333