13.vue.jsとfirebaseで認証つきボイスレコーダー:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
13.vue.jsとfirebaseで認証つきボイスレコーダー:index.html [2019/01/08] – [src/App.vueにVuetifyのテンプレートをコピペ] adash333 | 13.vue.jsとfirebaseで認証つきボイスレコーダー:index.html [2019/05/11] (現在) – [方針をたてる] adash333 | ||
---|---|---|---|
行 26: | 行 26: | ||
https:// | https:// | ||
+ | |||
+ | ソースコード | ||
+ | |||
+ | https:// | ||
+ | |||
+ | できたもの | ||
+ | {{: | ||
+ | |||
+ | デモサイト1 (Firebase認証を用いる場合は、デプロイ先のアドレスを、FirebaseのAuthenticationで『認証済みドメイン』に登録する必要があります。) | ||
+ | https:// | ||
+ | |||
+ | デモサイト2 | ||
+ | https:// | ||
+ | |||
+ | < | ||
+ | <iframe src=" | ||
+ | </ | ||
行 82: | 行 99: | ||
これは、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: | 行 159: | ||
firebase | firebase | ||
moment | moment | ||
- | vue-spinner | ||
</ | </ | ||
{{: | {{: | ||
行 144: | 行 175: | ||
<script src=" | <script src=" | ||
</ | </ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | ===== src/ | ||
+ | 最初に、ログイン機能を実装します。 | ||
+ | ログイン機能は、実装が一番楽な、Google認証とします。 | ||
- | ===== src/App.vueの編集とsrc/ | + | src/components/ |
- | 最初に、ログイン機能を実装する。 | + | |
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
+ | {{: | ||
+ | {{: | ||
+ | src/ | ||
+ | {{: | ||
- | 参考:https:// | + | ===== ログイン関数googleLoginの実装と、ローディング表示の実装 ===== |
- | 2018-08-07 | + | Home.vueでおログインボタンをクリックしたときに、googleLogin()関数が実行されて、google認証されるように設定します。 |
- | Vueでloading indicatorを実装する | + | googleLogin()関数は、< |
+ | src/ | ||
+ | {{: | ||
+ | ログイン状態のチェックは、src/ | ||
+ | src/App.vue | ||
+ | {{: | ||
+ | なお、google認証時に、Googleからuserというデータ(認証した人の名前などのデータ)をuserDataに格納しています。App.vue(親コンポーネント)からMemo.vue(子コンポーネント)にuserDataを渡すために、App.vueの< | ||
- | ===== 新規Vue.jsアプリの作成と、前回の部分までのコードをコピペ ===== | + | <Memo :user=" |
- | 前回の<wrap hi>[[12.vue.jsとwebspeechapiで音声認識アプリ:|12.vue.jsとwebspeechapiで音声認識アプリ:]]</ | + | と記載します。Memo.vue(子コンポーネント)で: |
+ | |||
+ | props: | ||
+ | |||
+ | として受け取ります。 | ||
+ | |||
+ | src/ | ||
+ | {{:13.vue.jsとfirebaseで認証つきボイスレコーダー: | ||
+ | |||
+ | (作成中、、、) | ||
+ | |||
+ | ===== 実行してみる ===== | ||
+ | |||
+ | {{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | うまくいっているようです。必ずしも音声入力しなくても、普通のメモとしても利用できます。 | ||
+ | |||
+ | ===== ソースコード ===== | ||
+ | ソースコード | ||
+ | |||
+ | https:// | ||
+ | |||
+ | できたもの | ||
+ | {{: | ||
+ | |||
+ | デモサイト | ||
+ | https:// | ||
+ | |||
+ | |||
+ | |||
+ | < | ||
+ | <iframe src=" | ||
+ | </ | ||
- | 作成中 | + | ===== 気になること ===== |
+ | 前回の< | ||
===== 今回写経した本 ===== | ===== 今回写経した本 ===== | ||
Vue.js初めての方に非常にお勧めです。読みながら手を動かしてアプリが動くことを実感できて楽しいです。 | Vue.js初めての方に非常にお勧めです。読みながら手を動かしてアプリが動くことを実感できて楽しいです。 |
13.vue.jsとfirebaseで認証つきボイスレコーダー/index.html.txt · 最終更新: 2019/05/11 by adash333