13.vue.jsとfirebaseで認証つきボイスレコーダー:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
13.vue.jsとfirebaseで認証つきボイスレコーダー:index.html [2019/01/08] – [Codesandboxで新規Vue.jsアプリの作成] adash333 | 13.vue.jsとfirebaseで認証つきボイスレコーダー:index.html [2019/01/10] – [方針をたてる] adash333 | ||
---|---|---|---|
行 26: | 行 26: | ||
https:// | https:// | ||
+ | |||
+ | ソースコード | ||
+ | |||
+ | https:// | ||
+ | |||
+ | できたもの | ||
+ | {{: | ||
+ | |||
+ | デモサイト | ||
+ | https:// | ||
+ | |||
+ | < | ||
+ | <iframe src=" | ||
+ | </ | ||
行 82: | 行 96: | ||
これは、Firestore内の、/ | これは、Firestore内の、/ | ||
+ | |||
+ | この後、さらに以下のように変更しました。 | ||
+ | < | ||
+ | service cloud.firestore { | ||
+ | match / | ||
+ | match / | ||
+ | allow read, write: if request.auth.uid == user_id; | ||
+ | } | ||
+ | match / | ||
+ | allow read, write: if request.auth.uid == user_id; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | {{: | ||
===== FirebaseでGoogle認証の有効化とドメイン追加 ===== | ===== FirebaseでGoogle認証の有効化とドメイン追加 ===== | ||
行 127: | 行 156: | ||
firebase | firebase | ||
moment | moment | ||
- | vue-spinner | ||
</ | </ | ||
{{: | {{: | ||
行 138: | 行 166: | ||
{{: | {{: | ||
- | ===== src/ | + | ===== src/App.vueにVuetifyのテンプレートをコピペ |
- | 最初に、ログイン機能を実装する。 | + | src/App.vueに、以下をコピペします。 |
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | ===== src/ | ||
+ | 最初に、ログイン機能を実装します。 | ||
+ | ログイン機能は、実装が一番楽な、Google認証とします。 | ||
+ | src/ | ||
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
- | 参考:https://exhikkii.hatenablog.com/ | + | {{:13.vue.jsとfirebaseで認証つきボイスレコーダー: |
- | 2018-08-07 | + | |
- | Vueでloading indicatorを実装する | + | |
+ | {{: | ||
- | ===== 新規Vue.jsアプリの作成と、前回の部分までのコードをコピペ ===== | + | src/App.vueの編集し、isLoginがtrue or falseで、Home.vueとMemo.vueの表示を分けます。 |
- | 前回の<wrap hi>[[12.vue.jsとwebspeechapiで音声認識アプリ:|12.vue.jsとwebspeechapiで音声認識アプリ:]]</wrap> | + | {{: |
+ | |||
+ | ===== ログイン関数googleLoginの実装と、ローディング表示の実装 ===== | ||
+ | Home.vueでおログインボタンをクリックしたときに、googleLogin()関数が実行されて、google認証されるように設定します。 | ||
+ | googleLogin()関数は、<script>内のmethods: | ||
+ | |||
+ | src/ | ||
+ | {{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted: | ||
+ | ログイン状態のチェックは、src/ | ||
+ | src/ | ||
+ | {{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted: | ||
+ | なお、google認証時に、Googleからuserというデータ(認証した人の名前などのデータ)をuserDataに格納しています。App.vue(親コンポーネント)からMemo.vue(子コンポーネント)にuserDataを渡すために、App.vueの<template>内に、 | ||
+ | |||
+ | <Memo : | ||
+ | |||
+ | と記載します。Memo.vue(子コンポーネント)で: | ||
+ | |||
+ | props: [" | ||
+ | |||
+ | として受け取ります。 | ||
+ | |||
+ | src/ | ||
+ | {{: | ||
+ | |||
+ | (作成中、、、) | ||
+ | |||
+ | ===== 実行してみる ===== | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | うまくいっているようです。必ずしも音声入力しなくても、普通のメモとしても利用できます。 | ||
+ | |||
+ | ===== ソースコード ===== | ||
+ | ソースコード | ||
+ | |||
+ | https:// | ||
+ | |||
+ | できたもの | ||
+ | {{: | ||
+ | |||
+ | デモサイト | ||
+ | < | ||
+ | <iframe src=" | ||
+ | </ | ||
- | 作成中 | + | ===== 気になること ===== |
+ | 前回の< | ||
===== 今回写経した本 ===== | ===== 今回写経した本 ===== | ||
Vue.js初めての方に非常にお勧めです。読みながら手を動かしてアプリが動くことを実感できて楽しいです。 | Vue.js初めての方に非常にお勧めです。読みながら手を動かしてアプリが動くことを実感できて楽しいです。 |
13.vue.jsとfirebaseで認証つきボイスレコーダー/index.html.txt · 最終更新: 2019/05/11 by adash333