13.vue.jsとfirebaseで認証つきボイスレコーダー:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
13.vue.jsとfirebaseで認証つきボイスレコーダー:index.html [2019/01/09] – [src/Home.vueとsrc/Edit.vueの作成と、src/App.vueの編集によるログイン機能の実装] 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=" | ||
+ | </ | ||
行 46: | 行 63: | ||
Vuetify | Vuetify | ||
firebase | firebase | ||
- | vue-spinner | ||
moment | moment | ||
</ | </ | ||
行 83: | 行 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認証の有効化とドメイン追加 ===== | ||
行 128: | 行 159: | ||
firebase | firebase | ||
moment | moment | ||
- | vue-spinner | ||
</ | </ | ||
{{: | {{: | ||
行 150: | 行 180: | ||
{{: | {{: | ||
- | ===== src/ | + | ===== src/ |
最初に、ログイン機能を実装します。 | 最初に、ログイン機能を実装します。 | ||
行 167: | 行 197: | ||
src/ | src/ | ||
+ | {{: | ||
+ | ===== ログイン関数googleLoginの実装と、ローディング表示の実装 ===== | ||
+ | Home.vueでおログインボタンをクリックしたときに、googleLogin()関数が実行されて、google認証されるように設定します。 | ||
+ | googleLogin()関数は、< | ||
+ | src/ | ||
+ | {{: | ||
+ | ログイン状態のチェックは、src/ | ||
+ | src/App.vue | ||
+ | {{: | ||
+ | なお、google認証時に、Googleからuserというデータ(認証した人の名前などのデータ)をuserDataに格納しています。App.vue(親コンポーネント)からMemo.vue(子コンポーネント)にuserDataを渡すために、App.vueの< | ||
+ | <Memo : | ||
+ | と記載します。Memo.vue(子コンポーネント)で: | ||
- | 参考:https:// | + | props: [" |
- | 2018-08-07 | + | |
- | Vueでloading indicatorを実装する | + | |
+ | として受け取ります。 | ||
- | ===== 新規Vue.jsアプリの作成と、前回の部分までのコードをコピペ ===== | + | src/ |
+ | {{:13.vue.jsとfirebaseで認証つきボイスレコーダー: | ||
- | 前回の< | + | (作成中、、、) |
+ | |||
+ | ===== 実行してみる ===== | ||
+ | |||
+ | {{:13.vue.jsとfirebaseで認証つきボイスレコーダー: | ||
+ | |||
+ | {{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted: | ||
+ | |||
+ | {{: | ||
+ | うまくいっているようです。必ずしも音声入力しなくても、普通のメモとしても利用できます。 | ||
+ | |||
+ | ===== ソースコード ===== | ||
+ | ソースコード | ||
+ | |||
+ | https:// | ||
+ | |||
+ | できたもの | ||
+ | {{: | ||
+ | |||
+ | デモサイト | ||
+ | https:// | ||
+ | |||
+ | |||
+ | |||
+ | < | ||
+ | <iframe src=" | ||
+ | </ | ||
- | 作成中 | + | ===== 気になること ===== |
+ | 前回の< | ||
===== 今回写経した本 ===== | ===== 今回写経した本 ===== | ||
Vue.js初めての方に非常にお勧めです。読みながら手を動かしてアプリが動くことを実感できて楽しいです。 | Vue.js初めての方に非常にお勧めです。読みながら手を動かしてアプリが動くことを実感できて楽しいです。 |
13.vue.jsとfirebaseで認証つきボイスレコーダー/index.html.1547023891.txt.gz · 最終更新: 2019/01/09 by adash333