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

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 16.vue.jsのvuexでパスワード制限 ======

状態管理システムvuexが難しすぎて理解できないので、わかりやすいサイトをひたすら写経して理解しようと努力していくシリーズの3回目。

今回は、Vue.js上でVuexを用いて、FirebaseのGoogle認証にtryします。

認証システムを実装するのは本当に面倒です。これでも、Firebaseを利用しているので、かなり簡単になっている方であることは理解しているつもりなのですが、、、
===== 初めてのVuex目次 =====
[[14.vue.jsのvuexで入力フォーム:index.html|14.vue.jsのvuexで入力フォーム]]

[[15.vue.jsのvuexでカウンター:index.html|15.Vue.jsのvuexでカウンター]]

[[16.vue.jsのvuexでパスワード制限:index.html|16.vue.jsのvuexでパスワード制限]]

[[17.nuxt.jsのvuexでパスワード制限:index.html|17.Nuxt.jsのvuexでパスワード制限]]

===== すること =====
  -Vuexを用いて、FirebaseへのGoogleログイン認証機能を実装する
  -ページは、HomeとAboutの2ページ、vue-routerで振り分ける
  -Googleログインした状態では、Aboutページに、ログインした人の名前を表示する
  -ログインする前は、ログインボタン、ログインした状態では、ログアウトボタンを、ナビゲーションバー（ヘッダー）に表示する

今回は、https://qiita.com/ErgoFriend/items/bd1bb445e185bf45e272を写経させていてだきました。

ソースコード
https://github.com/adash333/Vue_Vuex_Firebase_Auth
https://codesandbox.io/s/54n9575y44

Demo
https://54n9575y44.codesandbox.io/
{{:16.vue.jsのvuexでパスワード制限:pasted:20190201-074345.png}}
{{:16.vue.jsのvuexでパスワード制限:pasted:20190201-074324.png}}
{{:16.vue.jsのvuexでパスワード制限:pasted:20190201-074427.png}}
{{:16.vue.jsのvuexでパスワード制限:pasted:20190201-074458.png}}


===== 開発環境 =====
<code>
Chrome
Codesandbox

Vue 2.5.2
vuetify 1.4.3
Vuex 3.1.0
vue-router 3.0.2

@firebase/app 0.3.8
@firebase/auth 0.9.2
babel-polyfill 6.26.0
</code>


===== CodeSandboxで新規Vue.jsアプリを作成 =====
最初に、CodeSandbox上で、新規Vue.jsアプリを作成し、CSSフレームワークVuetifyが利用できるように設定します。

  -https://codesandbox.io/へ行き、画面右上の、『Create Sandbox』をクリック
  -Vue　をクリック
  -Add Dependencyから、Vuetifyをインストール
  -index.htmlの編集
  -src/main.jsの編集

{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-123704.png}}

{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-123723.png}}

{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-123749.png}}

{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-123804.png}}

{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-123835.png}}

index.htmlと、src/main.jsは、以下をコピペします。

<html>
<script src="https://gist.github.com/adash333/a61cf750e6c8410bc53f65a43ca8c84c.js"></script>
</html>

{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-124228.png}}

{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-124252.png}}

以上で、Vue.jsで、Vuetifyを利用する準備ができました。

===== Vuetifyのテンプレートを適用 =====
src/App.vueに、以下のコードをコピペします。

<html>
<script src="https://gist.github.com/adash333/0595b0b3b03b8427dcbf7d845414174c.js"></script>
</html>

{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-124906.png}}

これで、App.vueの土台が出来上がりました。

===== Vue.jsにVuexをインストール =====

Vuexを利用するための準備を行います。

  -Add Dependencyから、Vuexをインストール
  -Add Dependencyから、babel-polyfillをインストール
  -src/main.jsの編集
  -src/store.jsの新規作成

{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-141702.png}}

{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-141741.png}}

{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-141941.png}}

src/main.jsは、以下の2行を追加します。（追加する位置には注意する必要があります。）

<code>
import store from './store'

store,
</code>

（変更前）
{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-142758.png}}

（変更後）
{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-142928.png}}

この時点では、store.jsを作成していないので、エラーが出ます。

  *src/store.jsのテンプレートの作成
src/store.jsを新規作成し、以下をコピペします。
<code>
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {},

  getters: {},

  mutations: {},

  actions: {}
});

export default store;
</code>

これでも、まだエラーが出ています。。。

{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-143709.png}}

右側の画面の更新画面を押すと、以下のように、vuexが動く準備ができたようです。

{{:15.vue.jsのvuexでカウンター:pasted:20190126-021146.png}}

===== Vue-Routerのインストール =====
Vue-Routerを利用するための準備を行います。
  -Add Dependencyからvue-routerをインストール
  -src/router.jsの新規作成
  -src/main.jsでrouter.jsを設定
{{:16.vue.jsのvuexでパスワード制限:pasted:20190127-081151.png}}

src/router.js
<code>
import Vue from 'vue'
import VueRouter from 'vue-router'

//プラグインとして登録
Vue.use(VueRouter)
</code>
{{:16.vue.jsのvuexでパスワード制限:pasted:20190127-083520.png}}

src/main.jsに追加するコード
<code>
import router from './router'

// new Vueの中に記載
router,
</code>
{{:16.vue.jsのvuexでパスワード制限:pasted:20190127-153354.png}}
  *Home.vueとAbout.vueが無いとエラーが出てしまうので、src/components/Home.vueとAbout.vueを新規作成し、以下のテンプレートだけ記載しておく。
<code>
<template>
</template>

<script>
export default {
  name: "Home",
  components: {}
};
</script>
</code>
{{:16.vue.jsのvuexでパスワード制限:pasted:20190127-153734.png}}
{{:16.vue.jsのvuexでパスワード制限:pasted:20190127-153833.png}}









==== Vue Routerの組み込みコンポーネント ====
Vue Routerをインストールすると、次のコンポーネントが使用可能になります。
（参考：[[https://amzn.to/2CR9GGn|基礎から学ぶ Vue.js]]）

^ カスタムタグ         ^ 役割                   ^
| <router-view>  | ルートとマッチしたコンポーネントを描画  |
| <router-link>  | ルートのリンクを作成           |

==== Home.vueとAbout.vueをrouter.jsに設定する ====
先ほど作成した2つのコンポーネント
src/components/Home.vueと,
src/components/About.vue
をrouter.jsに、設定します。

<html>
<script src="https://gist.github.com/adash333/c5d39338fb2076fa0996a0f88311015c.js"></script>
</html>

{{:16.vue.jsのvuexでパスワード制限:pasted:20190127-145531.png}}



===== 新規Firebaseアプリの作成とsrc/firebase.jsの新規作成 =====
準備ばかりでうんざりですが、やります。
  -https://console.firebase.google.com　にGoogleアカウントでログイン
  -新規プロジェクト作成
  -Project Overview > 「開始するにはアプリを追加してください」のすぐ上の、「</>」をクリック
  -「ウェブアプリに Firebase を追加」画面が出てくるので、中身をメモ帳などにコピーしておく(後で、src/firebse.jsにペーストします)
  -Authentication > ログイン方法 > Google をクリックして、Google認証を「有効にする」をONにして保存
  -Authentication > ログイン方法　の画面の下の方へ行き、承認済みドメイン > ドメインの追加　で、codesandbox.io　を追加する。（本当は、サブドメインまで記入することが望ましい。）
{{:16.vue.jsのvuexでパスワード制限:pasted:20190127-150042.png}}

参考：https://liginc.co.jp/378463

  *Add Dependencyから、@firebase/app, @firebase/authをインストール
{{:16.vue.jsのvuexでパスワード制限:pasted:20190127-150351.png}}
{{:16.vue.jsのvuexでパスワード制限:pasted:20190127-150423.png}}
  *src/firebase.jsを新規作成
<code>
import firebase from "@firebase/app";
import "@firebase/auth";
import store from "./store";

// こちらは、ご自身のFirebaseアプリの「ウェブアプリに Firebase を追加」の中の設定をコピーしてください
const config = {
  apiKey: "xxxxxxxxxxx",
  authDomain: "xxxxxxxxxxx.firebaseapp.com",
  databaseURL: "https://xxxxxxxxxxx.firebaseio.com",
  projectId: "xxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxx.appspot.com",
  messagingSenderId: "xxxxxxxxxxx"
};

export default {
  init() {},
  login() {},
  logout() {},
  onAuth() {}
};
</code>

{{:16.vue.jsのvuexでパスワード制限:pasted:20190127-151601.png}}

  *src/main.jsにfirebaseを設定
<code>
import Firebase from "./firebase";
Firebase.init();
</code>

{{:16.vue.jsのvuexでパスワード制限:pasted:20190127-154238.png}}

===== firebase.jsに、Google認証のコードを記載 =====
src/firebase.jsに、Google認証を実装します。引き続き、[[https://qiita.com/ErgoFriend/items/bd1bb445e185bf45e272#%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%84%E3%81%8D%E3%81%BE%E3%81%99|Vue vuexでfirebaseのログイン保持]]のコードをコピペします。

{{:16.vue.jsのvuexでパスワード制限:pasted:20190127-152423.png}}

<code>
user = user ? user : {};
</code>
のところは、『三項演算子』を利用しているようです。

===== src/store.jsにログイン情報、ログイン状態の2つを保持する場所を作成する =====
今回のコードの肝です。https://qiita.com/ErgoFriend/items/bd1bb445e185bf45e272#vuex-storejsをコピペします。写経してから中身を考えます！（爆）

（変更前）
{{:16.vue.jsのvuexでパスワード制限:pasted:20190127-154653.png}}
（変更後）
{{:16.vue.jsのvuexでパスワード制限:pasted:20190127-155003.png}}

===== Navigation.vueとAuthentication.vueのテンプレートを作成 =====
ナビゲーションバーのNavigation.vueと、その中に設置する、ログインボタン(未認証時)+ログアウトボタン（認証時）をまとめたAuthenticatoin.vueを新規作成し、とりあえず、テンプレートで埋めておきます。

src/components/Navigation.vue
<html>
<script src="https://gist.github.com/adash333/ad0e1e22b6e9ae6d3ad0318043d9641b.js"></script>
</html>
{{:16.vue.jsのvuexでパスワード制限:pasted:20190130-224629.png}}

src/components/Authentication.vue
<html>
<script src="https://gist.github.com/adash333/a0a2d208d6920cf6e272dc775f4f5eb1.js"></script>
</html>
{{:16.vue.jsのvuexでパスワード制限:pasted:20190130-225100.png}}
{{:16.vue.jsのvuexでパスワード制限:pasted:20190130-232441.png}}

ログイン機能は、Authentication.vueに実装予定ですが、この時点では、まだ見栄えのみです。また、個人的に、<style scoped></style>は極力書きたくないのですが、Googleのボタンだけは、https://qiita.com/ErgoFriend/items/bd1bb445e185bf45e272のコピペをさせていただくことにしました。

参考
https://codepen.io/atgarbett/pen/QOZoyg
Vuetify.js Responsive v-toolbar not triggering open/close event
https://stackoverflow.com/questions/47536881/vuetify-js-responsive-v-toolbar-not-triggering-open-close-event

===== router.jsを編集してコンポーネントにルートを定義する =====
src/components/Navigation.vueの<v-navigation-drawer></v-navigation-drawer>の中の、
<code>
<v-list-tile :to="{ path: '/' }">

<v-list-tile :to="{ path: '/About' }">
</code>
の部分のリンクを定義するために、src/router.jsを編集します。
また、このルーティングの定義により、<wrap hi><router-view/></wrap>と記載することにより、コンポーネントを表示することができるようになります。

src/router.js
<html>
<script src="https://gist.github.com/adash333/1c026ea5979b881bbe40eb3af698ca7b.js"></script>
</html>

===== App.vueの中にNavigation.vueとHome.vue(/About.vue)を表示する =====
  -Navigation.vueは、importしてから、<Navigation/>と記載することにより表示します。
  -Home.vue(/About.vue)は、router.jsにルーティングを記載しているので、<wrap hi><router-view/></wrap>と記載することにより、コンポーネントを表示します。
src/App.vueの編集
<code>
// <template>の中に記載
<Navigation/>
<router-view/>

// <script>の中に記載
import Navigation from "@/components/Navigation.vue";

export default {
  components: {
    Navigation
  },
}
</code>
src/App.vue
(変更前)
{{:16.vue.jsのvuexでパスワード制限:pasted:20190130-233949.png}}
(変更後)
{{:16.vue.jsのvuexでパスワード制限:pasted:20190130-234630.png}}
{{:16.vue.jsのvuexでパスワード制限:pasted:20190130-234736.png}}

Googleサインインのところが変ですが、今回はこのままで、、、

===== src/components/Authentication.vueにGoogleログインを実装 =====
https://qiita.com/ErgoFriend/items/bd1bb445e185bf45e272#authenticationvueのコードをコピペします。

  -createdでインスタンス作成後に認証状態の監視を開始します。
  -computedでvuexのstatusにログインしているかどうかを保持し、v-ifで分岐できるようにしています。
  -methods: { func() } : @clickに登録した関数（doLogin()関数と、doLogout()関数）を実行します。

{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-000054.png}}
{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-000204.png}}

{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-000336.png}}
残念ながら、ログインした後も、Sign in With Googleのボタンのままでした。。。
firebase.jsの写経をするときに、どこかでタイプミスしたことが原因であったらしく、https://qiita.com/ErgoFriend/items/bd1bb445e185bf45e272#firebase-firebasejsのコードをコピペしたら、動くようになりました。
（見栄えは変えないと、、、）
{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-001353.png}}





==== ログイン/ログアウトボタンの見た目の調整 ====
かなり厳しい。。。名前を表示するのはあきらめようかと思います。
{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-002954.png}}

Vuetifyの<v-list-tile>の使い方がいまいちわからず、思った通りにならない。

とりあえず、<v-navigation-drawer>のところに名前を表示するのはあきらめて、Sign outボタンのみにしました。

{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-003426.png}}

ちなみに、<v-button>の中身のテキストがすべて大文字になってしまうため、<style>のところに、以下のように記載しています。
<code>
<style scoped>
* {
  text-transform: none !important;
}
</style>
</code>

参考：https://github.com/vuetifyjs/vuetify/issues/1443
[Help]How to make the global text not uppercase/capitalize #1443
 Closed	alterhu2020 opened this issue on 22 Aug 2017

===== App.vueの<content>の中身のcardを、Home.vueとAbout.vueにそれぞれ移動 =====

src/App.vue
(変更前)
{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-004004.png}}
(変更後)
{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-004330.png}}

src/components/Home.vue
(変更前)
{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-004348.png}}
(変更後)
{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-004458.png}}

src/components/About.vue
(変更前)
{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-004533.png}}
(変更後)
{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-004610.png}}

===== Home.vueの編集 =====
中身を変えます。Home.vueはログイン前後で変化なしにしようと思います。
(変更前)
{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-004832.png}}
(変更後)
{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-010253.png}}



途中ですが、ここまでのソースコード
{{ :16.vue.jsのvuexでパスワード制限:vuex-firebase-auth.zip |}}

===== About.vueの編集 =====
ログインした状態で、ログインした人の名前を表示しようと思います。
https://qiita.com/ErgoFriend/items/bd1bb445e185bf45e272#aboutvueを参考に、変えてみます。

<html>
<script src="https://gist.github.com/adash333/291ef9a3df09f58e6182c9847f21560f.js"></script>
</html>

(変更前)
{{:16.vue.jsのvuexでパスワード制限:pasted:20190131-010352.png}}
(変更後)
{{:16.vue.jsのvuexでパスワード制限:pasted:20190201-051958.png}}
{{:16.vue.jsのvuexでパスワード制限:pasted:20190201-052015.png}}
{{:16.vue.jsのvuexでパスワード制限:pasted:20190201-052120.png}}

今回はここまでとなります。

参考：https://vuetifyjs.com/ja/components/lists


===== ソースコード =====
https://github.com/adash333/Vue_Vuex_Firebase_Auth
https://codesandbox.io/s/54n9575y44

Demo
https://54n9575y44.codesandbox.io/
{{:16.vue.jsのvuexでパスワード制限:pasted:20190201-053519.png}}




===== Vuexとログイン機能に関するリンク =====

https://qiita.com/ErgoFriend/items/bd1bb445e185bf45e272
@ErgoFriend
2018年10月27日に更新
Vue vuexでfirebaseのログイン保持
→firebaseのGoogle認証を作成します。

https://mabui.org/firebase-authentication-vuex-mail-verification/
Firebase AuthenticationとVuexでメール認証を実装する
投稿日：2018年9月13日
→firebaseのメール認証を作成します。

https://www.hypertextcandy.com/vue-laravel-tutorial-authentication-part-3
2019.01.12
Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (6) 認証機能とVuex
Masahiro Harada
→https://www.hypertextcandy.com/vue-laravel-tutorial-authentication-part-2/からの続きで、Laravel+Vue+Vuexでメーリアドレス認証をバックエンドも含めて作成します。

https://qiita.com/k-okina/items/512b9e502f8db49981f3
@k-okina
2018年12月01日に更新
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTips

https://qiita.com/zaru/items/bc90b418dd18a97d8da5
@zaru
2018年10月20日に投稿
Firebase Authentication + Vue.js を SSR/SPA 両方に対応する方法


https://tomokazu-kozuma.com/implement-login-function-with-firebase-authentication-using-vuejs-and-vuex/
2019.01.19
Vue.jsとVuexを使ってFirebase Authenticationでログイン機能を実装する

https://qiita.com/sin_tanaka/items/ea149a33bd9e4b388241
@sin_tanaka
2018年08月03日に更新
Vue.js #4 Advent Calendar 201725日目
Vue.js + Firebase を使って爆速でユーザ認証を実装する



























===== リンク =====
目次：[[:index.html|このサイトについて]]

前：

次：